Design system
§ 01
Colour
Night
#0F1112
Graphite
#17191A
Graphite 2
#232627
Muted steel
#55626A
Concrete
#8E918D
Mineral
#C9C9C3
Concrete light
#E8E5DE
Warm off-white
#F3F1EC
Industrial amber
#D88A2B
Amber text
#9A5A0E
§ 02
Typography
Display / Hero
Inter Tight 500 · 112 · 0.9
Heading / H2
Inter Tight 500 · 44 · 1.05
Engineered with precision.
Heading / H3
Inter Tight 500 · 28 · 1.15
Engineered with precision.
Body / Lead
Inter 400 · 21 · 1.45
Engineered with precision.
Body / M
Inter 400 · 17 · 1.55
Engineered with precision.
Label / Mono
Geist Mono 400 · 12 · +6% · caps
Engineered with precision.
§ 03
Buttons & links
Project number
P—104
Coordinates
41.8857° N 87.6390° W
Spacing & grid
12-column grid · 24px gutter · 40 / 24 / 16px margins · sections 112–120px on desktop, 96 tablet, 80 phone.
Motion by layer name
Name any layer Reveal, Reveal Stagger, Words, Zoom or Draw and the FX component animates it on scroll. Sections with (Light) in the name switch the nav to its light mode.