OpenSkillIndex← back to search
claude-codecreative

Claude-skill-registry botanical-design

Complete design system guide for Dr. Sophia AI's botanical brand identity. Includes official typography (Livvic/Onest), color palette (#00B368 green spectrum), shadow systems, gradients, and component templates. Use when creating or modifying UI components, implementing brand colors, or ensuring design consistency across the application.

install
source · Clone the upstream repo
git clone https://github.com/majiayu000/claude-skill-registry
Claude Code · Install into ~/.claude/skills/
T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/botanical-design" ~/.claude/skills/majiayu000-claude-skill-registry-botanical-design && rm -rf "$T"
manifest: skills/data/botanical-design/SKILL.md
tags
#design-system#brand-identity#typography#color-palette#ui-components#tailwind-css
source content

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:

ContainerBorder ColorHeader ColorPurpose
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
WhiteImage upload
6-Team Analysis
#00633C/30
Forest greenTeam 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:

ScenarioColorHex Code
Primary actions (buttons, CTAs)Green gradients
#00633C
→ 
#00B368
Special actions (6-Team, toggle)Orange gradients
#FF8C42
→ 
#FFA500
Clinical/analyticalTeal
#06B6D4
User content (messages)Cream + brown text
#E8DCC8
+ 
#505631
Emergency/urgentOrangey-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:

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