Botanical Design System Skill

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 background
rounded-2xl - 16px border radius for main containers
border-[#00633C]/40 - Deep forest border at 40% opacity
shadow-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: .glass class (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 lowercase class

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 #06B6D4 instead)
❌ Purple (use teal or orange)
❌ Magenta/pink (use orange or green)
❌ Generic Tailwind colors (use botanical hex codes)
❌ Cyan (use teal #06B6D4 or 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

Agent Skills: Botanical Design System

Install this agent skill to your local

Skill Files