Design Tokens
The init command adds design tokens to your CSS file. After initialization, you own them — customize freely. Values shown are Porcelain (default). See Themes for other presets.
Neutral
| Token | Value | Usage |
|---|---|---|
| --graphite | | Deepest tone |
| --ink | | Primary text |
| --branch | | Brand surfaces |
| --iron | | Dark borders |
| --slate | | Dark secondary |
| --zinc | | Dark muted |
| --steel | | Secondary text |
| --muted | | Muted text |
| --aluminum | | Decorative, shadows |
| --chrome | | Primary border |
| --silver | | Light border |
| --platinum | | Light background |
| --frost | | Hover, inputs |
| --paper | | Primary background |
Use as Tailwind utilities: bg-paper, text-ink, border-chrome, etc.
Signal Colors
| Token | Value | Usage |
|---|---|---|
| --signal-blue | | Links, info |
| --signal-red | | Error, destructive |
| --signal-green | | Success |
| --signal-amber | | Warning |
| --signal-purple | | Accent |
| --signal-cyan | | Info alternate |
Each has hover and active variants (e.g., --signal-red-hover). Use as bg-signal-red, text-signal-blue, etc.
Surface Layers
| Token | Value | Usage |
|---|---|---|
| --surface-0 | | Page background |
| --surface-1 | | Cards, panels |
| --surface-2 | | Nested, elevated |
Shadows
| Token | Value | Usage |
|---|---|---|
| --shadow-offset | 1px 1px 0px 0px #c0c4ca | Default interactive |
| --shadow-offset-hover | 2px 2px 0px 0px #c0c4ca | Hover |
| --shadow-offset-active | 0px 0px 0px 0px #c0c4ca | Active/pressed |
| --shadow-offset-dark | 1px 1px 0px 0px #a0a3a7 | Overlays |
Use as shadow-offset, hover:shadow-offset-hover, active:shadow-offset-active. Size and color vary by theme.
Customization
After init, these tokens are yours. The library will not update them automatically. Check the Changelog when updating.