Design System Overview
Our design system draws inspiration from the natural world, bringing warmth and organic beauty to digital experiences.
Design Philosophy
The botanical design system embraces:
- Warmth over cold minimalism
- Organic shapes over rigid geometry
- Graceful motion over instant transitions
- Accessibility as a foundation, not an afterthought
Color Tokens
Light Mode
| Token | Value | Description |
|---|---|---|
| Background | #F9F8F4 | Warm Alabaster |
| Foreground | #2D3A31 | Deep Forest Green |
| Primary | #8C9A84 | Sage Green |
| Secondary | #E8E6E1 | Soft Sand |
| Interactive | #C27B66 | Terracotta |
| Muted | #6B7280 | Stone Gray |
| Border | #D1CEC7 | Desert Sand |
Dark Mode
| Token | Value | Description |
|---|---|---|
| Background | #1A1F1C | Dark Forest |
| Foreground | #E8E6E1 | Warm White |
| Primary | #A8B8A0 | Light Sage |
| Secondary | #252B27 | Moss |
| Interactive | #D48A75 | Light Terracotta |
Typography
Display Font: Playfair Display
Used for headings and emphasis. An elegant serif that brings sophistication.
font-family: 'Playfair Display', serif;Body Font: Source Sans 3
A clean, readable sans-serif for body text and UI elements.
font-family: 'Source Sans 3', sans-serif;Signature Elements
Arch Shapes
Our signature arch shape adds organic character:
.arch-shape {
border-radius: 50% 50% 0 0;
}Paper Grain Texture
A subtle grain overlay adds tactile warmth:
.grain-overlay {
background-image: url('data:image/svg+xml,...');
opacity: 0.03;
}Animation Principles
Animations follow organic timing:
- Ease-out for entrances (natural deceleration)
- 700ms duration for smooth perception
- Transform-only for 60fps performance
Customization
All tokens are CSS custom properties. Override them in your global CSS:
:root {
--color-interactive: #YourBrand;
--font-display: 'Your Font', serif;
}The design system is your foundation. Build upon it to create something uniquely yours.
