Neue Haas Grotesk DP
family/heading
Design System
Colour
Brand & Neutral — Full Tone Ramps
Midnight
100
#020A3D
90
80
70
60
50
40
30
20
10
5
Electric Blue
100
#0114C3
90
80
70
60
50
40
30
20
10
5
Plasma Pink
100
#FF42E6
90
80
70
60
50
40
30
20
10
5
Graphite
100
#686A6E
90
80
70
60
50
40
30
20
10
5
Typography
Families
Neue Haas Grotesk DP
family/body
Atkinson Hyperlegible Mono
family/mono
Scale
Big/L
300px / 90%, -3px tracking
Display/L
170px / 90%, -3px tracking
Display/S
120px / 90%, -3px tracking
Headline/L
90px / 100%, -2px tracking
Headline/S
70px / 100%, -1px tracking
Title/L
52px / 130%, 0 tracking
Title/S
32px / 140%, 0 tracking
Body/L
24px / 140%, 0.75px tracking
Body/S
16px / 140%, 0.75px tracking
Caption/L
14px / 140%, 0 tracking
Caption/S
10px / 150%, 0 tracking
Weights
weight/XXThin
15 XXThin
weight/XThin
25 XThin
weight/Thin
35 Thin
weight/Light
45 Light
weight/Regular
55 Roman
weight/Medium
65 Medium
weight/Semi
65 Medium
weight/Bold
75 Bold
weight/Heavy
95 Black
weight/Black
95 Black
Spacing
gap/xxs
2px
gap/xs
4px
gap/s
8px
gap/sm
16px
gap/m
24px
gap/l
32px
gap/xl
40px
gap/xxl
48px
gap/huge
56px
gap/uber
64px
gap/col
155px
gap/colx2
310px
Elevation & Radius
Elevation
App Dropdown
The only elevation effect style currently defined in this file — a 6-layer soft shadow used for dropdown/menu surfaces.
Effect/App Dropdown
6 stacked drop shadows, 0–21px blur, 0–10.5px spread, alpha 0.04–0.2
Radius
radius/xs
4px
radius/s
8px
radius/m
16px
radius/l
24px
radius/round
9999px
Pixel Iconography
