Design Tokens
All tokens are exposed as CSS variables on :root and can be overridden at any level.
Colors
Neutral Scale
| Token | Value | Usage |
|---|---|---|
--color-neutral-950 | #0D0D0D | Headings, deepest text |
--color-neutral-700 | #374151 | Body text |
--color-neutral-500 | #6B7280 | Secondary text, placeholder |
--color-neutral-300 | #D1D5DB | Borders, dividers |
--color-neutral-100 | #F3F4F6 | Hover background, zebra stripes |
--color-neutral-50 | #F5F5F4 | Page background |
Accent
| Token | Value | Usage |
|---|---|---|
--color-accent | #9ebbde | Primary button, focus ring, selected state |
--color-accent-light | #7299a0 | Hover state |
--color-accent-subtle | rgba(158,187,222,0.12) | Tag background, focus ring |
Animation
Easing Curves
| Token | Curve | Usage |
|---|---|---|
--ease-spring | cubic-bezier(0.34, 1.56, 0.64, 1) | Bounce, scale |
--ease-smooth | cubic-bezier(0.25, 0.1, 0.25, 1) | State transitions |
--ease-out | cubic-bezier(0.0, 0.0, 0.2, 1) | Overlay entrance |
Duration
| Token | Duration | Usage |
|---|---|---|
--duration-fast | 160ms | Color, opacity |
--duration-base | 220ms | State switching |
--duration-enter | 320ms | Overlay, drawer |
Spacing (4px Grid)
| Token | Value |
|---|---|
--space-1 | 4px |
--space-2 | 8px |
--space-3 | 12px |
--space-4 | 16px |
--space-6 | 24px |
--space-8 | 32px |
--space-12 | 48px |
Density
| Token | Default | Description |
|---|---|---|
--density-factor | 1 | Spacing scale factor. Desktop recommended 0.75. Override for compact layout. |
Border Radius
| Token | Value | Components |
|---|---|---|
--radius-sm | 6px | Tag, Badge |
--radius-md | 9px | Input, Button |
--radius-lg | 14px | Card, Modal |
--radius-full | 9999px | Radio, Avatar |
Shadows
| Token | Usage |
|---|---|
--shadow-sm | Card default |
--shadow-md | Card hover, dropdown |
--shadow-lg | Modal, Drawer |
--shadow-xl | Global Toast |
Dark Mode
Set data-theme="dark" on the parent container (html or body):
html
<html data-theme="dark">Tokens that switch in dark mode:
| Token | Light | Dark |
|---|---|---|
--color-neutral-950 | #0D0D0D | #F5F5F4 |
--color-neutral-700 | #374151 | #D1D5DB |
--color-neutral-500 | #6B7280 | #9CA3AF |
--color-neutral-300 | #D1D5DB | #4B5563 |
--color-neutral-100 | #F3F4F6 | #1F2937 |
--color-neutral-50 | #F5F5F4 | #111827 |
--color-accent-subtle | rgba(…,0.12) | rgba(…,0.2) |
| All shadows | Light bg shadow | Dark bg shadow |
Other tokens (accent, animation, spacing, radius) remain unchanged in dark mode.
Auto-follow System
Combine with CSS prefers-color-scheme:
css
@media (prefers-color-scheme: dark) {
:root { color-scheme: dark; }
html { background: #111827; }
}