Foundations
Colour
All colours derive from tokens.json. Swap the source file to re-skin the full suite.
Brand
ink
#10293d
highlight
#29b6b6
white
#ffffff
Surfaces & rules
surface-light
#ffeeee
surface-light-2
#eef5f7
rule-muted
#d9e5ea
Text
text-default
#1d2a33
text-strong
#10293d
text-muted
#70818c
text-muted-2
#536b78
Heat scale (diagnostic & heatmap)
1
2
3
4
5
heat-1
#e8fbfb
heat-2
#c8f3f3
heat-3
#86dede
heat-4
#29b6b6
heat-5
#10293d
Foundations
Typography
Three-family system: display (Inter), editorial (Inria Serif), and UI (Inter).
CPO.
AI-durable product leadership for PE-backed businesses.
The biggest gap in most product leaders isn't AI knowledge. It's financial literacy. And that has been true for fifteen years.
Section heading
Sub-heading 16px / 600
Body copy 14px / 400, the primary reading weight for UI contexts
Caption / meta, 12px / 400 for supplementary information
Label / tag, 11px / 600 uppercase with tracking
Components
Component kit
Shared across all templates. All use CSS custom properties, reskin via tokens only.
Buttons
Badges
New
Live
Draft
Coming soon
Metadata labels
Version
V4 · WeWork Cut
Date
29 Apr 2026
Prepared by
Ant Ludlow · Fully Baked AI
Form input
Reference
Token table
All CSS custom properties injected by the build system from this engagement's tokens.json.
| CSS variable | Raw value | Type |
|---|---|---|
| --ink | #10293d | colour |
| --highlight | #29b6b6 | colour |
| --white | #ffffff | colour |
| --surface-light | #ffeeee | colour |
| --rule-muted | #d9e5ea | colour |
| --text-default | #1d2a33 | colour |
| --text-strong | #10293d | colour |
| --text-muted | #70818c | colour |
| --font-heading | Inter | font |
| --font-body | Inria Serif | font |
| --font-ui | Inter | font |
| --radius-btn | 4px | radius |
| --radius-card | 6px | radius |