Design System
Color Palette
Based on the Kanagawa color scheme.
Core Tokens
| Token | Value |
|---|---|
--bg-primary | Sumi Ink 3 |
--bg-secondary | Sumi Ink 2 |
--bg-elevated | Sumi Ink 0 |
--text-primary | Fuji White |
--text-secondary | Old White |
--accent-primary | Spring Blue |
--accent-secondary | Oni Violet |
Theme Variants
- Default (wave): Dark theme with blue/teal accents
- Dragon: Warmer dark theme with muted greens
- Lotus: Light theme with warm paper tones
Set the theme via data-theme attribute: data-theme="dragon" or data-theme="lotus".
Typography
Based on Bringhurst’s typographic scale (ratio 1.25).
Type Scale
| Token | Size |
|---|---|
--text-xs | 0.64rem |
--text-sm | 0.8rem |
--text-base | 1rem |
--text-lg | 1.25rem |
--text-xl | 1.563rem |
--text-2xl | 1.953rem |
--text-3xl | 2.441rem |
--text-4xl | 3.052rem |
Line Height
| Token | Value |
|---|---|
--leading-none | 1 |
--leading-tight | 1.25 |
--leading-normal | 1.5 |
--leading-loose | 2 |
Spacing
Modular spacing scale matching the type scale:
| Token | Size |
|---|---|
--space-xs | 0.5rem |
--space-sm | 0.75rem |
--space-md | 1rem |
--space-lg | 1.25rem |
--space-xl | 1.563rem |
--space-2xl | 1.953rem |
Usage
Apply tokens directly in CSS or SCSS:
.card {
background-color: var(--bg-secondary);
color: var(--text-primary);
padding: var(--space-md);
border: 1px solid var(--border-color);
}