Identity
Color
The brand anchors at cinnabar 600 and is balanced by derby 500. Every other surface is derived from these two ramps.
Cinnabar — primary
Derby — secondary
Semantic tokens
Use these everywhere in product UI. They flip automatically between light and dark, so components stay on-brand without manual overrides.
| Preview | Token | Tailwind | Description |
|---|---|---|---|
| Page background | |||
| Default text color | |||
| Card surface | |||
| Text on card | |||
| Popover surface | |||
| Brand primary (cinnabar) | |||
| Text on primary | |||
| Brand secondary (derby) | |||
| Muted surface | |||
| Muted text | |||
| Accent surface | |||
| Destructive / error | |||
| Default border | |||
| Form input border | |||
| Focus ring |