Brand style guide
You write with the cold precision of encryption algorithms, favoring short, declarative sentences that leave no room for ambiguity or marketing 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) | #0055FF | --accent | 3.57:1 ▲ LARGE ONLY | 5.09:1 ✓ PASS |
| Accent (button fill) | #0055FF | --accent-btn | 3.57:1 ▲ LARGE ONLY | 5.09:1 ✓ PASS |
| Accent (text) | #276FFF | --accent-text | 4.58:1 ✓ PASS | 3.97:1 ▲ LARGE ONLY |
| background void | #0A0A0A | — | 1.01:1 ✗ FAIL | 17.98:1 ✓ PASS |
| interface surfaces | #141414 | — | 1.09:1 ✗ FAIL | 16.73:1 ✓ PASS |
| disabled states | #333333 | — | 1.58:1 ✗ FAIL | 11.47:1 ✓ PASS |
| critical alerts | #FF3333 | — | 5.50:1 ✓ PASS | 3.30: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 | #0055FF on #07080c | 3.57:1 | ▲ LARGE ONLY | decorative only; see the next row before setting text in it |
| Accent text on background | #276fff on #07080c | 4.58:1 | ✓ PASS | links and emphasis — the accent shifted until it cleared AA |
| Button label on button fill | #ffffff on #0055FF | 5.61: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
6 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