Foundations
Colors
The palette is small on purpose: 15 tokens, each named for its role. They cover every surface, text level, accent and status, with no numbered scale of shades.
Every token resolves through a CSS variable, so flipping data-theme on <html> updates the entire surface area at once. The same
component reads the right color on either theme.
The stylesheet also declares 7 mark-* colors. They paint the faces of the logo
at the brand book's values, and they are not meant for interface text or surfaces.
Surfaces
Text
Accents
Status
Depth
7 more colors give a surface its depth. Each one is a translucent light or shadow,
or the brand mixed into the surface, so it has no hex value of its own. A table's head row takes band, the brand at 8% in the surface, and the current navigation row takes tint, the brand at 5%.
Tailwind utilities
Use the tokens through standard Tailwind classes. The shorthand syntax is bg-<token> for backgrounds, text-<token> for text color, and border-<token> for borders. Opacity modifiers like bg-brand/10 work as expected.
Tones
A component that colors itself by what it reports takes a tone rather than a color. The
tones are the accent and status roles above, and two exported types name them.
| Prop | Type | Default | Description |
|---|---|---|---|
StatusTone | 'neutral' | 'brand' | 'success' | 'warn' | 'danger' | no default | A state. Alert, Banner, Stat and toasts take it. Alert, Banner and toasts also accept "info", another name for brand. |
AccentTone | StatusTone | 'violet' | no default | A label rather than a state, so it adds the violet accent. Badge, Tag, Indicator, Progress, AccountMenu and a SidebarNav badge take it. |
An app that maps its own states onto tones types the map with them, so the compiler refuses a tone
no component draws. A StatusTone fits wherever a tone goes, because AccentTone only adds violet.