Does this skill provide code for Tailwind CSS?

Yes, it includes specific Tailwind CSS class combinations and templates for glassmorphism, gradients, and container layouts.

When should I use the botanical-design skill?

Use it whenever you are creating, modifying, or auditing UI components for the Dr. Sophia AI application to ensure brand consistency.

What is the primary action color in this skill?

The primary brand color for buttons and highlights is a bright botanical green with the hex code #00B368.

What typography does this design system use?

The system uses Livvic for body text and headings (400 and 600 weight) and Onest for button text (uppercase, 600 weight).

Is the botanical design system WCAG compliant?

Yes, the system is designed with a 10.5:1 contrast ratio on cream backgrounds to meet WCAG AAA standards for readability.

Botanical Design System

Name: Botanical Design System
Author: adaptationio

byadaptationio

0•

Design Tools

Implements Dr. Sophia AI's botanical brand identity through standardized UI components, typography, and color systems.

Botanical Design System is a specialized skill for maintaining visual consistency within the Dr. Sophia AI ecosystem. It provides immediate access to official brand assets, including the Livvic and Onest typography stacks, a specific botanical color palette (#00B368), and production-ready Tailwind CSS templates. This skill streamlines the creation of new components and the modification of existing UI elements, ensuring every design choice aligns with the established 'botanical' aesthetic while maintaining WCAG accessibility standards and sophisticated visual effects like glassmorphism.

Key Features

010 GitHub stars

02Official botanical color palette featuring hex codes for forest green, teal, and cream accents.

03Typography implementation guides for Livvic and Onest font families.

04Reusable React and Tailwind CSS templates for buttons and glass-effect containers.

05Standardized 3D shadow system and border radius hierarchy for consistent depth.

06Context-specific component mapping for medical, clinical, and analytical UI modules.

Use Cases

01Generating new React components that adhere to Dr. Sophia AI brand guidelines.

02Updating existing UI elements to match production-ready design specifications.

03Ensuring accessibility and design consistency across medical dashboard interfaces.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add adaptationio/skrillz botanical-design

For use in Claude.ai and ChatGPT

Key Features

010 GitHub stars

02Official botanical color palette featuring hex codes for forest green, teal, and cream accents.

03Typography implementation guides for Livvic and Onest font families.

04Reusable React and Tailwind CSS templates for buttons and glass-effect containers.

05Standardized 3D shadow system and border radius hierarchy for consistent depth.

06Context-specific component mapping for medical, clinical, and analytical UI modules.

Use Cases

01Generating new React components that adhere to Dr. Sophia AI brand guidelines.

02Updating existing UI elements to match production-ready design specifications.

03Ensuring accessibility and design consistency across medical dashboard interfaces.