Design Tokens
Override any :root CSS variable to customise the theme.
Component tokens (e.g. --btn-radius) are fine-grained overrides.
Semantic tokens (e.g. --color-primary) affect all components at once.
Primitive
| Token | Default | Description |
| --color-primary-500 | oklch(61% 0.16 360) | Primitive primary color (pink-red) |
| --color-secondary-500 | oklch(67% 0.14 221) | Primitive secondary color (sky blue) |
| --color-success-500 | oklch(67% 0.14 138) | Primitive success color (green) |
| --color-warning-500 | oklch(72% 0.14 77) | Primitive warning color (amber) |
| --color-error-500 | oklch(66% 0.16 25) | Primitive error color (red) |
| --color-neutral-50 | oklch(98% 0.01 68) | Lightest neutral (warm tint) |
| --color-neutral-900 | oklch(23% 0.01 68) | Darkest neutral (warm tint) |
| --radius-base | 0.75rem | Base border radius |
Semantic
| Token | Default | Description |
| --color-bg | var(--color-neutral-50) | Page background |
| --color-fg | var(--color-neutral-900) | Primary text |
| --color-primary | var(--color-primary-500) | Primary interactive color |
| --color-primary-text | oklch(98% 0 0) | Text on primary backgrounds |
| --color-secondary | var(--color-secondary-500) | Secondary interactive color |
| --color-success | var(--color-success-500) | Success state color |
| --color-warning | var(--color-warning-500) | Warning state color |
| --color-error | var(--color-error-500) | Error / danger state color |
| --color-border | oklch(89% 0.01 68) | Default border color |
| --color-muted | oklch(92% 0.01 68) | Muted background |
| --color-muted-fg | oklch(53% 0.01 68) | Muted / secondary text |
| --color-shadow | none | Box shadow for elevated surfaces |
Component
| Token | Default | Description |
| --btn-radius | var(--radius-base) | Button border radius |
| --input-radius | var(--radius-base) | Input border radius |
| --card-radius | calc(var(--radius-base) * 2) | Card border radius |
| --card-padding | 1.5rem | Card internal padding |
| --card-shadow | var(--color-shadow) | Card box shadow |
Dark Mode Overrides
Add data-theme="dark" to any ancestor element to activate dark mode.
These tokens are automatically overridden.
| Token | Dark value |
| --color-bg | oklch(23% 0.01 68) |
| --color-fg | oklch(97% 0.01 68) |
| --color-border | oklch(63% 0.01 68) |
| --color-muted | oklch(28% 0.01 68) |
| --color-muted-fg | oklch(73% 0.01 68) |