Tokens
The design language's primitives — generated from
@cronwerk/tokens, never hand-copied. Color swatches show
both themes and their WCAG AA contrast pairings.
Color
Semantic color tokens in light and dark. The accent panel stays orange in both themes by design.
--accent #FF5E1F --accent-hover #E8511A --accent-text #C2410C · #FF5E1F --accent-soft #FFF4EE · #241A14 --on-accent #FFFFFF --ink #262626 · #f0e3de --ink-muted #6B7280 · #9a9390 --muted #727272 · #9a9390 --canvas #FFFFFF · #151414 --card #FDFDFC · #191817 --hairline #F0F0F0 · #f0e3de20 --hairline-strong #E2E2E2 · #f0e3de33 --decor-dots #EBEBEB · #f0e3de20 --decor-rail-dots #D9D9D9 · #f0e3de33 --success #00B520 --success-soft #E7F8EC · #14301C --success-text #0F7A32 · #5CD27B --warning #D97706 · #F59E0B --warning-soft #FBEFDD · #33240A --warning-text #8A5300 · #FBC24D --danger #DC2626 · #F87171 --danger-soft #FBEAEA · #3A1B1B --danger-text #B42318 · #F79A9A AA contrast pairings
Foreground-on-background ratios the language relies on, computed with the WCAG 2.1 formula. AA is 4.5:1 for normal text, 3:1 for large text.
Light theme
| Pairing | Sample | Ratio | AA |
|---|---|---|---|
Body text on canvas --ink on --canvas | Aa | 15.13:1 | pass |
Muted text on canvas --ink-muted on --canvas | Aa | 4.83:1 | pass |
Text on card surface --ink on --card | Aa | 14.87:1 | pass |
Accent link on canvas --accent-text on --canvas | Aa | 5.18:1 | pass |
Accent text on soft accent --accent-text on --accent-soft | Aa | 4.79:1 | pass |
White on accent (large only ≥3:1) --on-accent on --accent | Aa | 3.06:1 | pass (lg) |
Success text on success tint --success-text on --success-soft | Aa | 4.94:1 | pass |
Warning text on warning tint --warning-text on --warning-soft | Aa | 5.57:1 | pass |
Danger text on danger tint --danger-text on --danger-soft | Aa | 5.65:1 | pass |
Dark theme
| Pairing | Sample | Ratio | AA |
|---|---|---|---|
Body text on canvas --ink on --canvas | Aa | 14.66:1 | pass |
Muted text on canvas --ink-muted on --canvas | Aa | 6.09:1 | pass |
Text on card surface --ink on --card | Aa | 14.14:1 | pass |
Accent link on canvas --accent-text on --canvas | Aa | 6.02:1 | pass |
Accent text on soft accent --accent-text on --accent-soft | Aa | 5.57:1 | pass |
White on accent (large only ≥3:1) --on-accent on --accent | Aa | 3.06:1 | pass (lg) |
Success text on success tint --success-text on --success-soft | Aa | 7.46:1 | pass |
Warning text on warning tint --warning-text on --warning-soft | Aa | 9.25:1 | pass |
Danger text on danger tint --danger-text on --danger-soft | Aa | 7.43:1 | pass |
Spacing
The 4px-based spacing scale used for padding, gaps, and rhythm.
--space-1 4px --space-2 8px --space-3 12px --space-4 16px --space-6 24px --space-8 32px --space-12 48px --space-16 64px --space-24 96px Radius
Corner radii. Chips are fully rounded pills; cards and panels step up.
--radius-chip 9999px --radius-card 12px --radius-panel 16px Type scale
Display and body sizes. Set in "Inter Variable".
Work that runs itself
Work that runs itself
Work that runs itself
Work that runs itself
Work that runs itself
Work that runs itself
Work that runs itself
Work that runs itself
Work that runs itself
Work that runs itself
Work that runs itself
Motion
Durations pair with the shared easing cubic-bezier(0.4, 0, 0.2, 1). Hover a
bar to play its duration.
--dur-fast 100ms --dur-base 200ms --dur-slow 300ms