Type
Fluid scale. Each sample is set at its real computed size and clipped to one line.
The quick brown fox
2xs
The quick brown fox
xs
The quick brown fox
s
The quick brown fox
m
The quick brown fox
l
The quick brown fox
xl
The quick brown fox
2xl
Set at small sizes on purpose
A specimen earns its place by showing how the scale behaves in running text, not by filling the page. This block is deliberately short: heading, body, link — the three things a reader actually meets.
Contrast does the rest of the work; see the colour section.
Headings
Fluid scale. Each sample is set at its real computed size and clipped to one line.
The quick brown fox
h4
The quick brown fox
h3
The quick brown fox
h2
The quick brown fox
h1
The quick brown fox
display
Set at small sizes on purpose
A specimen earns its place by showing how the scale behaves in running text, not by filling the page. This block is deliberately short: heading, body, link — the three things a reader actually meets.
Contrast does the rest of the work; see the colour section.
Colour
Light, dark and alpha ramps per colour. Click any step to copy it.
Primary
--primary
l
l-1
l-2
l-3
l-4
l-5
l-6
l-7
l-8
l-9
l-10
d
d-1
d-2
d-3
d-4
d-5
d-6
d-7
d-8
d-9
d-10
t
10
20
30
40
50
60
70
80
90
Secondary
--secondary
l
l-1
l-2
l-3
l-4
l-5
l-6
l-7
l-8
l-9
l-10
d
d-1
d-2
d-3
d-4
d-5
d-6
d-7
d-8
d-9
d-10
t
10
20
30
40
50
60
70
80
90
Base
--base
l
l-1
l-2
l-3
l-4
l-5
l-6
l-7
l-8
l-9
l-10
d
d-1
d-2
d-3
d-4
d-5
d-6
d-7
d-8
d-9
d-10
t
10
20
30
40
50
60
70
80
90
Contextual
Info
--info
Success
--success
Warning
--warning
Danger
--error
Space
Bars are drawn at true computed height, so the ratio you see is the ratio you get.
space-3xs
space-2xs
space-xs
space-s
space-m
space-l
space-xl
space-2xl
space-3xl
space-4xl
Radius
Outlined rather than filled — the corner is the thing being measured.
XS
S
M
L
XL
Full
Backgrounds
Each section background with the text, pill and buttons that sit on it. Add the class to a Section.
section (default)
Eyebrow text
Category pill
A heading on this background
Body text sits here, with a link in the sentence so you can check it stands out.
Muted text, used for dates and captions.
.section--alt
Eyebrow text
Category pill
A heading on this background
Body text sits here, with a link in the sentence so you can check it stands out.
Muted text, used for dates and captions.
.section--cream
Eyebrow text
Category pill
A heading on this background
Body text sits here, with a link in the sentence so you can check it stands out.
Muted text, used for dates and captions.
.section--dark
Eyebrow text
Category pill
A heading on this background
Body text sits here, with a link in the sentence so you can check it stands out.
Muted text, used for dates and captions.
.section--accent
Eyebrow text
Category pill
A heading on this background
Body text sits here, with a link in the sentence so you can check it stands out.
Muted text, used for dates and captions.