Interactive
Colour explorer
Every Since Labs colour with its role, and every pairing that occurs in the product with its WCAG ratio. The ratios are computed from tokens.json at build time — change a token and this page changes with it.
Ink
ink.strong
Headlines, primary text, dark surfaces, the dark theme ground.
ink.body
Running body copy on light surfaces. Softer than ink.strong so long text does not vibrate.
ink.muted
Labels, captions, secondary text, inactive nav. AA on every light surface.
ink.on-ink
Text on ink.strong. Warm off-white — never pure #FFF, which reads clinical against the warm ground.
Paper
paper.primary
The default page background. The brand's dominant surface (~60% of any composition).
paper.base
Recessed chrome — sidebars, rails, app frame. One step behind paper.primary.
Surface
surface.white
Cards, panels, inputs, modals. Content that sits on top of paper.
surface.mist
Subtle fills — hover states, neutral chips, avatar wells, icon tiles.
surface.cream
Warm accent fill. The tinted sibling of surface.mist, for accent-adjacent surfaces.
Border
border.light
Default hairline — card edges, table rules, dividers.
border.warm
Emphasised edge — input borders, secondary buttons, anything interactive.
Accent
accent.terracotta
THE brand colour. Fills, the // mark, focus rings, chart series, dots, icons. NOT text on light surfaces — see accent.ink.
accent.ink
Terracotta for TEXT and links on light surfaces, and for solid buttons whose label must pass AA. 5.9:1 on white.
accent.ink-hover
Hover for accent.ink text and links.
accent.hover
Hover for terracotta fills on light surfaces.
accent.lift
Terracotta on DARK surfaces. #C4602A only reaches 4.23:1 on ink; this reaches 5.86:1.
accent.soft
Translucent terracotta wash — active nav rows, attention chips, accent tiles.
rgba(196, 96, 42, 0.12)
accent.light
Opaque equivalent of accent.soft. Same value as surface.cream.
Dark theme
dark.bg
Dark-theme ground. Same value as ink.strong — the brand inverts, it does not switch palettes.
dark.surface
Cards and panels on dark.
dark.surface-2
Raised or hovered surface on dark.
dark.border
Hairlines on dark. Decorative only — it does not carry 3:1.
dark.muted
Secondary text on dark. 5.8:1 on dark.bg. Do NOT use #7A7570 for body text — it is 3.9:1.
dark.on-dark
Primary text on dark.
Status
Each status is a triple: a background, a text colour, and a dot. The dot is the redundant non-colour channel — never ship a status that is colour alone.
5.43:1 · AA
4.98:1 · AA
6.25:1 · AA
8.98:1 · AAA
7.88:1 · AAA
4.87:1 · AA
Data visualisation
Sequential ramp for one measure across ranked categories; categorical for unordered series, terracotta always leading.
chart.sequential
chart.categorical
Contrast reference
WCAG 2.1 ratios for every pairing the product actually uses. Normal text needs 4.5:1; UI boundaries and graphical objects need 3:1.
| Pairing | Sample | Ratio | Grade |
|---|---|---|---|
| ink on paper | Sample text | 16.14:1 | AAA |
| ink-body on paper | Sample text | 13.14:1 | AAA |
| ink-muted on paper | Sample text | 5.16:1 | AA |
| ink-muted on white | Sample text | 5.61:1 | AA |
| ink-muted on mist | Sample text | 4.87:1 | AA |
| accent on white (as TEXT) | Sample text | 4.16:1 | AA Large |
| accent-ink on white (as TEXT) | Sample text | 5.90:1 | AA |
| accent-ink on paper | Sample text | 5.43:1 | AA |
| accent-ink on accent-light | Sample text | 4.73:1 | AA |
| white on accent (button) | Sample text | 4.16:1 | AA Large |
| white on accent-ink (button) | Sample text | 5.90:1 | AA |
| on-ink on ink | Sample text | 15.60:1 | AAA |
| accent on ink | Sample text | 4.23:1 | AA Large |
| accent-lift on ink | Sample text | 5.86:1 | AA |
| dark.muted on dark.bg | Sample text | 5.76:1 | AA |
| success text on bg | Sample text | 5.43:1 | AA |
| attention text on bg | Sample text | 4.98:1 | AA |
| warning text on bg | Sample text | 6.25:1 | AA |
| error text on bg | Sample text | 8.98:1 | AAA |
| info text on bg | Sample text | 7.88:1 | AAA |
| border-warm on white | ▬▬▬ | 1.46:1 | Fail |
| border-light on white | ▬▬▬ | 1.29:1 | Fail |
| focus ring on paper | ▬▬▬ | 3.82:1 | AA |