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

🗒️ Creating new points

It is okay to create new scale points on the fly, if needed. But they should be based on the existing scales’ algorithms. To create a 9th step in the large scale, use Sass’s multiplication operator.

.ds-font-size-s9 {
  font-size: $s8 * $ratio;
}