1. Colour Taxonomy — Brand vs Functional
BRAND = identity (max 3). FUNCTIONAL = status/meaning only. Never the two conflated.
The Rule
- Start with BRAND. Every component's default appearance reflects the brand colours (Ink / Paper / Ink-Deep).
- Reach for FUNCTIONAL only for meaning. success / warning / danger / info are reserved for status, alerts and data semantics — they are not brand decoration.
- Use the brand ramp (Ink‑50 … Ink‑950) for surfaces, text, borders, hovers and disabled states — never ad‑hoc hex or Tailwind greys.
- Resolve any component's colours from the Component → Colour Map at the bottom of this page.
BRAND COLOURS — the identity (max 3)
Brand 1 · Ink
#101012
Primary identity. CTAs, primary text, active nav, logo on light.
Brand 2 · Paper
#F7F7FA
Inverted identity. Page bg (light), text on ink, CTA on dark.
Brand 3 · Ink-Deep
#0A0A0C
Deepest tone. Hero blocks, logo on light, chrome accents.
BRAND RAMP — variations of Ink for surfaces & text
Ink-50 · bg
#F7F7FA
Ink-100 · input
#EDEDF1
Ink-200 · border
#D9D9E0
Ink-500 · muted
#63636D
Ink-800 · panel
#1A1A1E
Full scale Ink‑50 … Ink‑950 lives in brandRamp (tokens.ts). Dark mode maps canvas→Ink‑900, panel→Ink‑800, input/border→Ink‑700, muted→Ink‑300 — all brand‑derived.
FUNCTIONAL COLOURS — status & meaning ONLY (not brand)
Success
Light #0DA20D · Dark #15DA15
completed, positive state
Warning
#FFAA00 both themes
caution, attention needed
Danger
Light #EB0D3F · Dark #FD2C4E
error, destructive, blocked
Info
Light #2526FE · Dark #556EFE
neutral information
COMPONENT → COLOUR MAP (use this when designing any component)
| Component / Slot | Token → Colour | Example |
|---|---|---|
| Primary button | brand · Ink / Paper | bg ink, white text |
| Secondary button | ramp · Ink‑100 / Ink‑700 | soft surface, ink text |
| Danger button | functional · danger | red only for destructive |
| Card / Panel | brand · Paper / Ink‑800 | content surface |
| Input / recessed | ramp · Ink‑100 / Ink‑700 | field background |
| Primary text | brand · Ink‑900 / Paper | body & headings |
| Muted text | ramp · Ink‑500 / Ink‑300 | secondary labels |
| Border / Divider | ramp · Ink‑200 / Ink‑700 | 1px hairlines |
| Focus ring | brand · Ink | keyboard focus |
| Status badge / alert | functional | success · warning · danger · info |