majiayu000 Botanical Design System
Overview
Access Dr. Sophia AI's complete brand identity guide for maintaining consistent botanical aesthetics across all UI components. This skill provides the official color palette, typography standards, component templates, and visual effects system.
Keywords: design system, brand colors, typography, botanical palette, UI components, Tailwind CSS, brand identity, visual design, color scheme, fonts
When to Use This Skill
- Creating new UI components
- Implementing brand colors in React/Tailwind
- Ensuring design consistency
- Updating existing components to match brand
- Resolving color/typography questions
- Building modal dialogs or containers
Quick Reference
Primary Brand Color
#00B368 - Bright botanical green (PRIMARY for buttons, borders, highlights)
Official Typography
- Body Text: Livvic, sans-serif, regular (400)
- Headings: Livvic, sans-serif, semi-bold (600)
- Buttons: Onest, sans-serif, UPPERCASE, semi-bold (600)
Essential Colors
Deep Forest: #00633C (Container backgrounds, borders)
Bright Green: #00B368 (Primary actions, buttons)
Light Green: #00D67A (Hover states, highlights)
Teal: #06B6D4 (Clinical/analytical containers)
Orange: #FF8C42 (Special actions, warnings)
Cream: #E8DCC8 (User messages, documentation)
Container Template
Use this template for all new container components:
<div className="glass rounded-2xl border border-[#00633C]/40 p-6 shadow-lg shadow-[#00633C]/10">
<h3 className="font-bold text-[#00D67A] text-xl mb-4">SECTION TITLE</h3>
<p className="text-gray-300">Content in Livvic Regular...</p>
</div>
Key Classes:
.glass- 10% white opacity backgroundrounded-2xl- 16px border radius for main containersborder-[#00633C]/40- Deep forest border at 40% opacityshadow-lg shadow-[#00633C]/10- 3D depth effect
Button Template
Standard button with botanical green gradient:
<button className="bg-gradient-to-r from-[#00633C] to-[#00B368] hover:from-[#00B368] hover:to-[#00D67A] text-white px-4 py-2 rounded-lg shadow-lg hover:shadow-[#00B368]/40 transition-all">
Button Text (Auto-uppercase in Onest)
</button>
Gradient Shift on Hover:
- Normal:
#00633C(Deep forest) →#00B368(Bright green) - Hover:
#00B368(Bright green) →#00D67A(Light green)
Component Color Mapping
Container Types:
| Container | Border Color | Header Color | Purpose |
|---|---|---|---|
| Patient Search | #00633C/40 |
Light green #00D67A |
Patient data |
| Consultation History | #00B368/40 |
Green #00B368 |
Conversation |
| Diagnosis (Async) | #06B6D4/40 |
Teal #06B6D4 |
Clinical analysis |
| Evidence (Async) | #FF8C42/40 |
Orange #FF8C42 |
Research findings |
| Treatment (Async) | #00B368/40 |
Green #00B368 |
Treatment plans |
| Medical Imaging | #00633C/40 |
White | Image upload |
| 6-Team Analysis | #00633C/30 |
Forest green | Team button |
Document Download Colors:
- Prescription: Deep green
#00633C - Referral: Bright green
#00B368 - Certificate: Teal
#06B6D4 - Discharge: Orange
#FF8C42 - Clinical Note: Cream
#E8DCC8+ brown text
Visual Effects System
Shadow Depth (3D Floating)
/* Base container */
shadow-lg shadow-[#00633C]/10
/* Hover enhancement */
hover:shadow-xl hover:shadow-[#00B368]/20
/* Selected/Active */
shadow-2xl shadow-[#00D67A]/30
Border Radius Hierarchy
- Main containers:
rounded-2xl(16px) - Cards/sections:
rounded-xl(12px) - Small elements:
rounded-lg(8px) - Circular:
rounded-full
Container Opacity
- All containers:
.glassclass (10% white opacity) - Exception: User messages (100% opacity cream for readability)
Typography Implementation
Import fonts in App.css:
@import url('https://fonts.googleapis.com/css2?family=Livvic:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@500;600;700&display=swap');
body { font-family: 'Livvic', sans-serif; }
h1, h2, h3 { font-family: 'Livvic', sans-serif; font-weight: 600; }
button {
font-family: 'Onest', sans-serif;
text-transform: uppercase;
letter-spacing: 0.04em;
}
Typography Rules:
- Headers: Livvic Semi-bold (600)
- Body: Livvic Regular (400)
- Buttons: Onest UPPERCASE with 0.04em letter-spacing
- Icons in buttons: Override uppercase with
lowercaseclass
Color Selection Rules
Use Cases:
| Scenario | Color | Hex Code |
|---|---|---|
| Primary actions (buttons, CTAs) | Green gradients | #00633C → #00B368 |
| Special actions (6-Team, toggle) | Orange gradients | #FF8C42 → #FFA500 |
| Clinical/analytical | Teal | #06B6D4 |
| User content (messages) | Cream + brown text | #E8DCC8 + #505631 |
| Emergency/urgent | Orangey-red | #FF6B35 |
Avoid:
- ❌ Blue (use teal
#06B6D4instead) - ❌ Purple (use teal or orange)
- ❌ Magenta/pink (use orange or green)
- ❌ Generic Tailwind colors (use botanical hex codes)
- ❌ Cyan (use teal
#06B6D4or light green#00D67A)
Detailed Documentation
For comprehensive color systems, typography examples, and transformation history, see:
- Extended Color Palette: references/color-palette.md
- Typography Guide: references/typography-guide.md
- Transformation History: references/transformation-history.md
Production Requirements
- Brand Compliance: 100% fonts, 98% colors ✅
- WCAG AAA: 10.5:1 contrast ratio on cream backgrounds
- Responsiveness: All components mobile-optimized
- Performance: Consistent 3-5s response times
Brand Source: Official Botaniqal Brand Board V1 (Vlad Kutepov) Last Updated: October 7, 2025 Status: Production-ready, demo-approved