Modular scale
Both scales are defined as CSS custom properties in tokens.css. The Sass
variables still work — they are now aliases onto those properties — but new
code should use the custom properties directly. See
CSS custom properties for the
background.
The scale is named --ds-size-* rather than --ds-font-size-* or
--ds-space-* because it is used for all three: font sizes, padding and
margins.
Large scale
The large scale is designed for font-size, padding, and margin. It is a
modular scale with a ratio of 1.25, ranging from $s1 (1rem) up to $s8.
| Sass variable | CSS property | Value | Demo |
|---|---|---|---|
$s1 |
--ds-size-1 |
1rem |
A |
$s2 |
--ds-size-2 |
1.25rem |
A |
$s3 |
--ds-size-3 |
1.5625rem |
A |
$s4 |
--ds-size-4 |
1.95312rem |
A |
$s5 |
--ds-size-5 |
2.44141rem |
A |
$s6 |
--ds-size-6 |
3.05176rem |
A |
$s7 |
--ds-size-7 |
3.8147rem |
A |
$s8 |
--ds-size-8 |
4.76837rem |
A |
Small scale
The small scale is designed for border, outline, and smaller (hairline) spaces. It ranges from $ss1 (0.125rem) to $ss8 (1rem; equal to $s1).
| Sass variable | CSS property | Value | Demo |
|---|---|---|---|
$ss1 |
--ds-size-small-1 |
0.125rem | |
$ss2 |
--ds-size-small-2 |
0.25rem | |
$ss3 |
--ds-size-small-3 |
0.375rem | |
$ss4 |
--ds-size-small-4 |
0.5rem | |
$ss5 |
--ds-size-small-5 |
0.625rem | |
$ss6 |
--ds-size-small-6 |
0.75rem | |
$ss7 |
--ds-size-small-7 |
0.875rem | |
$ss8 |
--ds-size-small-8 |
1rem |
Semantic font sizes
The heading sizes are also exposed by role. Each heading element additionally
applies a clamp() for fluid sizing, so these are the upper bound rather than
the size rendered at every viewport width.
| CSS property | Value | Used for |
|---|---|---|
--ds-font-size-body |
1rem | Body copy |
--ds-font-size-heading-1 |
3.8147rem | h1 |
--ds-font-size-heading-2 |
3.05176rem | h2 |
--ds-font-size-heading-3 |
2.44141rem | h3 |
--ds-font-size-heading-4 |
1.95312rem | h4 |
--ds-font-size-heading-5 |
1.5625rem | h5 |
--ds-font-size-heading-6 |
1.25rem | h6 |