Calm
Contrast gate enforcedP1 direction (G11). A deep petrol brand on warm stone neutrals; a neutral-led UI with hairlines instead of shadows and a small radius. IBM Plex Sans and Plex Mono.
All 23 gated contrast pairs pass WCAG AA.
Colour roles
Apps write these roles, never a palette class (D11, D12).
Text
Primary text.
Secondary text.
Muted text and captions.
Faint text and placeholders. G17: darkened to pass 4.5:1, so it can carry text.
Surfaces
Page background.
Card and panel surface.
The viewer's dark canvas.
Lines and focus
Dividers and card outlines. Decorative: no contrast minimum.
Subtle dividers and quiet fills.
A control's edge: input, select and checkbox borders. 3:1 on panel (WCAG 1.4.11).
Focus ring.
Brand
Brand fill: the primary button, the selected segment.
Brand fill, hover and pressed.
Text and icons on a brand fill.
Links and the active nav item.
Active nav, selected row and info tints.
Edge of an accent tint.
Logo
The logo's folder and wordmark (G7).
Ochre: the amber tab re-tuned to the warm palette (amber 400).
Sage: the green bar re-tuned (green 500).
Status
Accepted, done.
Changes requested, rejected, overdue.
Waiting on someone: not submitted, due soon.
In review and re-review.
"N new".
Internal notes.
Contrast (G17)
WCAG 2.x ratio. 4.5 for text, 3 for large text and non-text UI. Advisory pairs are reported and never fail a build.
| Sample | Pair | Ratio | Min | Result | Use |
|---|---|---|---|---|---|
| Aa Sample | color.ink on color.panel | 15.80 | 4.5 | Pass | Body text on a panel |
| Aa Sample | color.ink on color.canvas | 15.18 | 4.5 | Pass | Body text on the page |
| Aa Sample | color.ink-2 on color.panel | 9.30 | 4.5 | Pass | Secondary text |
| Aa Sample | color.mute on color.panel | 6.30 | 4.5 | Pass | Muted text and captions on a panel |
| Aa Sample | color.mute on color.canvas | 6.05 | 4.5 | Pass | Muted text on the page |
| Aa Sample | color.faint on color.canvas | 4.70 | 4.5 | Pass | Faint text on the page |
| Aa Sample | color.faint on color.panel | 4.89 | 4.5 | Pass | Faint text. G17: either disabled / decorative only, or dark enough to pass |
| Aa Sample | color.brand on color.panel | 7.34 | 4.5 | Pass | Brand-coloured text |
| Aa Sample | color.accent on color.panel | 7.34 | 4.5 | Pass | Links and the active nav item |
| Aa Sample | color.brand-fg on color.brand | 7.34 | 4.5 | Pass | Primary button label |
| Aa Sample | color.brand-fg on color.brand-2 | 9.92 | 4.5 | Pass | Primary button label, hover and pressed |
| Aa Sample | color.accent on color.accent-bg | 6.83 | 4.5 | Pass | Active nav item, info tag |
| Aa Sample | color.ink on color.accent-bg | 14.70 | 4.5 | Pass | Text on a selected row |
| Aa Sample | color.ok on color.ok-bg | 7.00 | 4.5 | Pass | Status word on its tint: ok |
| Aa Sample | color.bad on color.bad-bg | 6.99 | 4.5 | Pass | Status word on its tint: bad |
| Aa Sample | color.warn on color.warn-bg | 6.95 | 4.5 | Pass | Status word on its tint: warn |
| Aa Sample | color.re on color.re-bg | 6.93 | 4.5 | Pass | Status word on its tint: re-review |
| Aa Sample | color.new on color.new-bg | 6.46 | 4.5 | Pass | "N new" on its tint |
| Aa Sample | color.int on color.int-bg | 8.42 | 4.5 | Pass | Internal-note text on its tint |
| Aa Sample | color.int-ink on color.int-bg | 11.47 | 4.5 | Pass | Internal-note body text on its tint |
| Aa Sample | color.ring on color.panel | 3.90 | 3 | Pass | Focus ring (non-text) |
| Aa Sample | color.ring on color.canvas | 3.75 | 3 | Pass | Focus ring on the page (non-text) |
| Aa Sample | color.line-strong on color.panel | 3.12 | 3 | Pass | A control's edge: input, select and checkbox borders (non-text). line itself is decorative. |
| Aa Sample | color.ok-line on color.ok-bg | 1.32 | 3 | Advisory | Status tag border. Advisory: decorative while the word names the tag |
| Aa Sample | color.bad-line on color.bad-bg | 1.32 | 3 | Advisory | Status tag border. Advisory |
| Aa Sample | color.warn-line on color.warn-bg | 1.32 | 3 | Advisory | Status tag border. Advisory |
| Aa Sample | color.re-line on color.re-bg | 1.31 | 3 | Advisory | Status tag border. Advisory |
| Aa Sample | color.logo on color.panel | 7.34 | 3 | Pass | Logo mark. Advisory: logotypes are exempt (WCAG 1.4.3) |
Type
Banksia Rise OC · Condition 14(b) · 2,418 items
IBM Plex Sans (G19 candidate). Engineered grotesque with humanist warmth; serifed I, tailed l, oval 0; tabular figures by default.
Banksia Rise OC · Condition 14(b) · 2,418 items
IBM Plex Mono: the face's own mono (static weights on Fontsource).
Shape
44px: the touch target (V5 L8). G10 grows interactive hit areas to it under pointer: coarse.
Height of a sm control (G10).
Height of a md control: the default.
Height of a lg control.
Minimum height of a list or table row.
Page side padding at desktop width.