skip to content

Modular scale

Large scale

The large scale is designed for font-size, padding, and margin. It ranges from $s1 (1rem) up to $s8:

Token Value Demo
$s1 1rem

A

$s2 1.25rem

A

$s3 1.5625rem

A

$s4 1.953125rem

A

$s5 2.44140625rem

A

$s6 3.0517578125rem

A

$s7 3.8146972656rem

A

$s8 4.768371582rem

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).

Token Value Demo
$ss1 0.125rem
$ss2 0.25rem
$ss3 0.375rem
$ss4 0.5rem
$ss5 0.625rem
$ss6 0.75rem
$ss7 0.875rem
$ss8 1rem