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:

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:

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