Design System
A living style guide that themes itself in real time.
Every color, type ramp, and component on this page is driven by one set of design tokens. Switch the theme and watch it all transition at once.
Palette generator
Drag the hue to generate a harmonious tonal ramp. Click any swatch to copy its hex, or pick an accent to recolor the entire page live.
Set page accent
Typography
A consistent type scale in Inter, with JetBrains Mono for code. Every ramp uses the same tokens, so it stays legible in any theme.
Components
A small gallery of themeable primitives. Each reads the same tokens, so switching theme or accent restyles them instantly — and they respond to you in real time.
Buttons
Selected: primary
Input
Focus and type — your text echoes here live.
Badges & states
Tap the badges to toggle their state.
Design tokens
The single source of truth. Each token is a CSS custom property every component reads — change it once, and the whole system follows.
| Token | Role | Value |
|---|---|---|
| --color-bg | Page background | |
| --color-surface | Raised surface | |
| --color-surface-2 | Higher surface / hover | |
| --color-border | Borders & dividers | |
| --color-text | Primary text | |
| --color-text-muted | Secondary text | |
| --color-accent | Brand accent | |
| --color-accent-contrast | Text on accent |