Brand style guide
Write with the confidence of a system architect who guarantees data sovereignty, using precise technical language without unnecessary fluff.
01
Modular scale, ratio 1.333, base 16px. Sizes below are rendered at their real value — measure them on screen and they will match the label. Display steps use ui-sans-serif; body uses ui-sans-serif.
02
Each ratio is computed from the sRGB relative luminance of the pair. AA needs 4.5:1 for body text and 3:1 for text at 24px or 19px bold — "LARGE ONLY" means the pairing clears the second bar and not the first.
| Colour | Hex | Token | vs background | vs text |
|---|---|---|---|---|
| Background | #07080C | --bg | 1.00:1 ✗ FAIL | 18.18:1 ✓ PASS |
| Surface | #101219 | --surface | 1.07:1 ✗ FAIL | 16.99:1 ✓ PASS |
| Elevated | #171A24 | --elevated | 1.15:1 ✗ FAIL | 15.77:1 ✓ PASS |
| Text | #F2F4F8 | --text | 18.18:1 ✓ PASS | 1.00:1 ✗ FAIL |
| Muted | #9AA3B4 | --muted | 7.88:1 ✓ PASS | 2.31:1 ✗ FAIL |
| Accent (brand) | #00FFFF | --accent | 15.96:1 ✓ PASS | 1.14:1 ✗ FAIL |
| Accent (button fill) | #00FFFF | --accent-btn | 15.96:1 ✓ PASS | 1.14:1 ✗ FAIL |
| Accent (text) | #00FFFF | --accent-text | 15.96:1 ✓ PASS | 1.14:1 ✗ FAIL |
| background depth | #0A0F14 | — | 1.04:1 ✗ FAIL | 17.48:1 ✓ PASS |
| interface surfaces | #1A2330 | — | 1.26:1 ✗ FAIL | 14.37:1 ✓ PASS |
| text hierarchy | #E0E6ED | — | 15.93:1 ✓ PASS | 1.14:1 ✗ FAIL |
| error states | #FF3D00 | — | 5.64:1 ✓ PASS | 3.22:1 ▲ LARGE ONLY |
| Pairing | Colours | Ratio | AA 4.5:1 | Where it is used |
|---|---|---|---|---|
| Body text on background | #f2f4f8 on #07080c | 18.18:1 | ✓ PASS | the default reading pair |
| Body text on surface | #f2f4f8 on #101219 | 16.99:1 | ✓ PASS | cards, panels, table rows |
| Muted text on background | #9aa3b4 on #07080c | 7.88:1 | ✓ PASS | captions and metadata — usually the first to fail |
| Brand accent on background | #00FFFF on #07080c | 15.96:1 | ✓ PASS | decorative only; see the next row before setting text in it |
| Accent text on background | #00FFFF on #07080c | 15.96:1 | ✓ PASS | links and emphasis — the accent shifted until it cleared AA |
| Button label on button fill | #0a0a0a on #00FFFF | 15.79:1 | ✓ PASS | the primary CTA; the fill moved, not the brand colour |
03
A 4px base grid. Use these steps and nothing between them; the value of a scale is what it forbids.
04
Every interactive element sets min-height:var(--tap) — 44px, the WCAG and iOS floor. Smaller controls are the single most common accessibility regression in a redesign.
05
7 glyphs on a 24×24 grid, 2px stroke, round caps and joins. Stroke weight is set once on the root element so no glyph can carry its own.
06