Two brand colors, four states, one gray scale.
A deliberately small palette. Blue leads and coral complements it; four state colors carry meaning; everything else is neutral gray. Each color ships a 50→900 scale — 500 is the base, lighter steps for surfaces and softer fills, darker steps for text, borders and hover.
Primary
Blue is the brand and the workhorse — primary actions, links, focus, active state. Coral is the warm secondary: highlights and editorial accents, used sparingly. Coral is not an error color.
Gray
The neutral scale carries most of the interface: text, surfaces, borders, dividers. Steps are numbered only — no names. --itkaarhus-white is true white for page backgrounds; gray-900 is the darkest ink for body copy.
State
Four colors that carry meaning — never decoration. Each has a full scale: the 50/100 tints back soft alert surfaces, 500 is the icon/accent, 700+ gives readable text on those tints.
The state scales in context — soft surface (50), border (200), icon (500), text (900):
Usage
Hierarchy over variety. Lead with blue, reach for coral rarely, keep state colors meaningful, and let gray do the rest.
- Lead with blue. Primary buttons, links, the focus ring, active nav — one accent carries the interface.
- Use coral sparingly. A single editorial highlight or a secondary CTA per view — not a second primary.
- Reserve state colors for meaning. Green = success, amber = warning, red = danger, cyan = info. Nothing decorative.
- Build surfaces from gray.
whitepage,gray-50muted panels,gray-200borders,gray-500+ for text. - Pair tints with shades. A
-50background wants-700+ text for legible contrast.
- Don't use coral for errors. It's a brand accent — danger (red) signals failure.
- Don't flood with red. Danger stays sharp and rare — small icons, borders, single words, never large fills.
- Don't introduce off-palette hues. If a color isn't a token, it doesn't belong. Add a token instead of inlining a hex.
- Don't use decorative gradients. Flat fills only; gradients are reserved for data-viz.
- Don't put mid-gray text on gray surfaces. Avoid
gray-400/500body text ongray-100— it fails contrast.
Role tokens
Semantic aliases point at scale steps, so intent stays readable in code. Prefer the role token where one exists.
| Token | Maps to | Use for | |
|---|---|---|---|
| --itkaarhus-primary | blue-500 | Primary actions, links, active state | |
| --itkaarhus-primary-hover | blue-600 | Hover / pressed primary | |
| --itkaarhus-secondary | coral-500 | Secondary emphasis, editorial accent | |
| --itkaarhus-info | info-500 | Informational status | |
| --itkaarhus-success | success-500 | Success / active status | |
| --itkaarhus-warning | warning-500 | Warnings, caution | |
| --itkaarhus-danger | danger-500 | Errors, destructive actions | |
| --itkaarhus-{state}-soft | {state}-100 | Soft surface tint for badges / alerts |