Foundations

Design tokens

Colour, type and spacing, defined once. Every screen, in code and in design, reads from the same named values, so nothing drifts.

84tokens
3platforms
0hard-coded values

Colour

Four ramps of nine steps. Screens use the meaning tokens below, never a raw step.

Bluecolor.blue.*

50#EEF3FF
100#DBE5FF
200#BCCFFF
300#92B0FF
400#6488FB
500#3D63F0
600#2848D4
700#1F39A9
800#1C3187

Ambercolor.amber.*

50#FFF7E0
100#FFECB3
200#FFDC7A
300#FFC93D
400#F5AE12
500#D98E04
600#B06E03
700#845206
800#5E3B08

Greencolor.green.*

50#E8F8EF
100#C8F0D9
200#9BE1BA
300#63CD93
400#35B673
500#1F9A5C
color.success.600 · #177A49600#177A49
700#145F3C
800#104A31

Inkcolor.ink.*

50#F6F7FB
100#ECEEF5
200#DDE0EA
300#C2C7D6
400#9199B0
500#69728C
600#4A5370
700#323A55
800#1C2238

surface.pageink.50

text.primaryink.800

action.primaryblue.600

status.successgreen.600

Typography

Six steps on a 1.25 scale. Line height is part of the token.

display56 / 60
Calm, clear, consistent
heading.140 / 46
One source of truth
heading.228 / 34
Every screen reads the same tokens
body18 / 28
Names describe purpose, so a change in one place reaches every product.
small14 / 20
Helper text, table cells and secondary labels.
caption12 / 16
UPDATED 19 OCT · OWNER: PLATFORM TEAM

Marlow SansDisplay: Georgia stack
Text: system UI stack
Code: ui-monospace

Rg Qy 0123 &?

Spacing, radius and depth

A 4 px base unit. Eight spacing steps, four radii, three depths.

space.14
space.28
space.312
space.416
space.524
space.632
space.748
space.864

radius.s6

radius.m12

radius.l20

radius.pill999

depth.1

depth.2

depth.3

One source, every platform

Tokens are stored as JSON and built into the formats each team uses.

tokens/core.json{  "color": {    "action": { "primary": {      "$value": "{color.blue.600}",      "$type": "color" } }  },  "space": { "4": { "$value": "16px" } },  "radius": { "m": { "$value": "12px" } }}Copied

CSS variables--color-action-primary: #2848D4;
Web
Swift constantsColor.actionPrimary
iOS
Kotlin themeMarlowTheme.actionPrimary
Android
Design kit stylesColour, text and effect styles
Design