Layer 0 · Design tokens

Style Guide

The colour, font and size tokens this site is built from, each on a live specimen. Open this page in the Visual Builder and edit a token to watch it cascade — every preset and page that binds it follows. The presets that build ON these tokens live on the Preset Library page.

99

Colours

3

Fonts

68

Size tokens

Layer 0

Colours

Every global colour on this site. Each swatch paints from its variable, so they follow the flavour.

Primary Color

#0E6D80 · factory

Secondary Color

#66B9B4 · factory

Heading Text Color

#0C1A22 · factory

Body Text Color

#0C1A22 · factory

Link Color

#0E6D80 · factory

Silver

#B6BFB0

Green

#008037

Red

#F20000

White

#FFFFFF

Black

#000000

DL primary

↳ Primary Color

DL secondary

↳ Secondary Color

DL accent

#00A3AD

DL bg

#EFFAFF

DL surface

#FAFDFF

DL text

#0C1A22

DL success

#2E7D32

DL warning

#BC7000

DL danger

#C62828

DL surface-2

↳ DL bg L-3

DL surface-3

↳ DL bg L-7

DL border

↳ DL bg L-10

DL muted

↳ DL text L+24 S-28

DL link

↳ DL primary

DL inverse

↳ DL text

DL on-primary

↳ DL surface

DL on-secondary

↳ DL text

DL on-accent

↳ DL text

DL on-success

↳ DL surface

DL on-warning

↳ DL text

DL on-danger

↳ DL surface

DL on-inverse

↳ DL bg

DL on-surface

↳ DL text

DL accent-ink

↳ DL accent-shade-2

DL shadow

↳ DL primary L-20 S-40 12%

DL shadow-strong

↳ DL primary L-20 S-40 18%

DL neutral-50

#F9FAFB

DL neutral-100

#F4F5F6

DL neutral-200

#E2E7E9

DL neutral-300

#CED6D9

DL neutral-400

#ACB8BE

DL neutral-500

#7C8F98

DL neutral-600

#657881

DL neutral-700

#53636A

DL neutral-800

#3D484D

DL neutral-900

#262D31

DL neutral-950

#191D1F

DL primary-tint-1

↳ DL primary L+11

DL primary-tint-2

↳ DL primary L+25

DL primary-tint-3

↳ DL primary L+40

DL primary-tint-4

↳ DL primary L+52

DL primary-shade-1

↳ DL primary L-3

DL primary-shade-2

↳ DL primary L-8

DL primary-shade-3

↳ DL primary L-13

DL primary-shade-4

↳ DL primary L-18

DL primary-tone-1

↳ DL primary S-16

DL primary-tone-2

↳ DL primary S-32

DL primary-tone-3

↳ DL primary S-48

DL primary-tone-4

↳ DL primary S-64

DL primary-hover

↳ DL primary-shade-1

DL secondary-tint-1

↳ DL secondary L+7

DL secondary-tint-2

↳ DL secondary L+15

DL secondary-tint-3

↳ DL secondary L+24

DL secondary-tint-4

↳ DL secondary L+31

DL secondary-shade-1

↳ DL secondary L-7

DL secondary-shade-2

↳ DL secondary L-17

DL secondary-shade-3

↳ DL secondary L-27

DL secondary-shade-4

↳ DL secondary L-37

DL secondary-tone-1

↳ DL secondary S-7

DL secondary-tone-2

↳ DL secondary S-15

DL secondary-tone-3

↳ DL secondary S-22

DL secondary-tone-4

↳ DL secondary S-30

DL secondary-hover

↳ DL secondary-shade-1

DL accent-tint-1

↳ DL accent L+10

DL accent-tint-2

↳ DL accent L+23

DL accent-tint-3

↳ DL accent L+36

DL accent-tint-4

↳ DL accent L+48

DL accent-shade-1

↳ DL accent L-4

DL accent-shade-2

↳ DL accent L-10

DL accent-shade-3

↳ DL accent L-16

DL accent-shade-4

↳ DL accent L-22

DL accent-tone-1

↳ DL accent S-20

DL accent-tone-2

↳ DL accent S-40

DL accent-tone-3

↳ DL accent S-60

DL accent-tone-4

↳ DL accent S-80

DL accent-hover

↳ DL accent-shade-1

DL primary-subtle

↳ DL primary-tint-4

DL on-primary-subtle

↳ DL primary-shade-3

DL border-brand

↳ DL primary-tint-3

DL info

#128FA8

DL on-info

#0C1A22

DL success-subtle

#F4FBF4

DL on-success-subtle

#29822D

DL warning-subtle

#FCF8F3

DL on-warning-subtle

#A36100

DL danger-subtle

#FCF3F3

DL on-danger-subtle

#CD2121

DL info-subtle

#F3FAFC

DL on-info-subtle

#0A7B91

Layer 0

Fonts

The font roles. Presets bind these by role, so swapping a flavour re-letters the site.

DL Display

Ag

Source Sans Pro

DL Body

Ag

Open Sans

DL Mono

Ag

JetBrains Mono

Layer 0

Type scale

Every step is a fluid clamp() that interpolates with the viewport — no breakpoint jumps.

DL text-4xs

clamp(0.3686rem, calc(8.8789px - 0.003011 * (100vw - 360px)), 0.5549rem)

The quick brown fox

DL text-3xs

clamp(0.4608rem, calc(9.9887px - 0.002642 * (100vw - 360px)), 0.6243rem)

The quick brown fox

DL text-2xs

clamp(0.576rem, calc(11.2373px - 0.002042 * (100vw - 360px)), 0.7023rem)

The quick brown fox

DL text-xs

clamp(0.72rem, calc(12.642px - 0.001133 * (100vw - 360px)), 0.7901rem)

The quick brown fox

DL text-s

clamp(0.8889rem, calc(0.00018 * (100vw - 360px) + 14.2222px), 0.9rem)

The quick brown fox

DL text-m

clamp(1rem, calc(0.00202 * (100vw - 360px) + 16px), 1.125rem)

The quick brown fox

DL text-l

clamp(1.125rem, calc(0.004545 * (100vw - 360px) + 18px), 1.4063rem)

The quick brown fox

DL text-xl

clamp(1.2656rem, calc(0.007955 * (100vw - 360px) + 20.25px), 1.7578rem)

The quick brown fox

DL text-2xl

clamp(1.4238rem, calc(0.0125 * (100vw - 360px) + 22.7813px), 2.1973rem)

The quick brown fox

DL text-3xl

clamp(1.6018rem, calc(0.018501 * (100vw - 360px) + 25.6289px), 2.7466rem)

The quick brown fox

DL text-4xl

clamp(1.802rem, calc(0.026363 * (100vw - 360px) + 28.8325px), 3.4332rem)

The quick brown fox

DL text-5xl

clamp(2.0273rem, calc(0.036594 * (100vw - 360px) + 32.4366px), 4.2915rem)

The quick brown fox

DL text-6xl

clamp(2.2807rem, calc(0.049838 * (100vw - 360px) + 36.4912px), 5.3644rem)

The quick brown fox

DL text-7xl

clamp(2.5658rem, calc(0.066905 * (100vw - 360px) + 41.0526px), 6.7055rem)

The quick brown fox

DL text-8xl

clamp(2.8865rem, calc(0.088814 * (100vw - 360px) + 46.1841px), 8.3819rem)

The quick brown fox

DL text-9xl

clamp(3.2473rem, calc(0.116849 * (100vw - 360px) + 51.9571px), 10.4774rem)

The quick brown fox

Layer 0

Spacing scale

Padding and margin steps. Each bar is drawn by the token it names.

DL space-3xs

clamp(0.25rem, calc(0.000505 * (100vw - 360px) + 4px), 0.2812rem)

DL space-2xs

clamp(0.3541rem, calc(11.2373px - 0.005628 * (100vw - 360px)), 0.7023rem)

DL space-xs

clamp(0.573rem, calc(12.642px - 0.00351 * (100vw - 360px)), 0.7901rem)

DL space-s

clamp(0.8889rem, calc(0.000617 * (100vw - 360px) + 14.2222px), 0.9271rem)

DL space-m

clamp(1rem, calc(0.008081 * (100vw - 360px) + 16px), 1.5rem)

DL space-l

clamp(1.125rem, calc(0.021042 * (100vw - 360px) + 18px), 2.427rem)

DL space-xl

clamp(1.2656rem, calc(0.04301 * (100vw - 360px) + 20.25px), 3.9269rem)

DL space-2xl

clamp(1.4238rem, calc(0.079675 * (100vw - 360px) + 22.7813px), 6.3537rem)

DL space-3xl

clamp(1.6018rem, calc(0.140258 * (100vw - 360px) + 25.6289px), 10.2803rem)

DL space-4xl

clamp(1.802rem, calc(0.239701 * (100vw - 360px) + 28.8325px), 16.6335rem)

Layer 0

Gap scale

The space between flex and grid children, on its own ramp — distinct from padding.

DL gap-0

0rem

DL gap-2xs

clamp(1.0851rem, calc(0.000421 * (100vw - 360px) + 17.3611px), 1.1111rem)

DL gap-xs

clamp(1.3021rem, calc(0.005892 * (100vw - 360px) + 20.8333px), 1.6667rem)

DL gap-s

clamp(1.5625rem, calc(0.015152 * (100vw - 360px) + 25px), 2.5rem)

DL gap-m

clamp(1.875rem, calc(0.030303 * (100vw - 360px) + 30px), 3.75rem)

DL gap-l

clamp(2.25rem, calc(0.054545 * (100vw - 360px) + 36px), 5.625rem)

DL gap-xl

clamp(2.7rem, calc(0.092727 * (100vw - 360px) + 43.2px), 8.4375rem)

DL gap-2xl

clamp(3.24rem, calc(0.152182 * (100vw - 360px) + 51.84px), 12.6563rem)

DL gap-3xl

clamp(3.888rem, calc(0.243982 * (100vw - 360px) + 62.208px), 18.9844rem)

Layer 0

Radius scale

Corner rounding, from a hairline curve to a full pill.

DL radius-2xs

clamp(0.118rem, calc(0.001908 * (100vw - 360px) + 1.8887px), 0.2361rem)

DL radius-xs

clamp(0.191rem, calc(0.003087 * (100vw - 360px) + 3.0559px), 0.382rem)

DL radius-s

clamp(0.309rem, calc(0.004994 * (100vw - 360px) + 4.9444px), 0.618rem)

DL radius-m

clamp(0.5rem, calc(0.008081 * (100vw - 360px) + 8px), 1rem)

DL radius-l

clamp(0.809rem, calc(0.013075 * (100vw - 360px) + 12.944px), 1.618rem)

DL radius-xl

clamp(1.309rem, calc(0.021155 * (100vw - 360px) + 20.9434px), 2.6179rem)

DL radius-2xl

clamp(2.1179rem, calc(0.034229 * (100vw - 360px) + 33.8864px), 4.2358rem)

DL radius-3xl

clamp(3.4268rem, calc(0.055382 * (100vw - 360px) + 54.8282px), 6.8535rem)

DL radius-pill

999px

Layer 0

Border scale

Rule widths, shown as a framed box.

DL border-m

clamp(0.0625rem, calc(0.00101 * (100vw - 360px) + 1px), 0.125rem)

DL border-l

clamp(0.1011rem, calc(0.001634 * (100vw - 360px) + 1.618px), 0.2023rem)

DL border-xl

clamp(0.1636rem, calc(0.002644 * (100vw - 360px) + 2.6179px), 0.3272rem)

DL border-2xl

clamp(0.2647rem, calc(0.004279 * (100vw - 360px) + 4.2358px), 0.5295rem)

Layer 0

Width scale

Container max-widths. Each bar spans the full row, capped at its token, so the steps read against the whole content area (the largest are simply wider than the page).

DL width-xs

clamp(11.8519rem, calc(0.041182 * (100vw - 360px) + 189.6296px), 14.4rem)

DL width-s

clamp(13.3333rem, calc(0.075421 * (100vw - 360px) + 213.3333px), 18rem)

DL width-m

clamp(15rem, calc(0.121212 * (100vw - 360px) + 240px), 22.5rem)

DL width-l

clamp(16.875rem, calc(0.181818 * (100vw - 360px) + 270px), 28.125rem)

DL width-xl

clamp(18.9844rem, calc(0.261364 * (100vw - 360px) + 303.75px), 35.1563rem)

DL width-2xl

clamp(21.3574rem, calc(0.365057 * (100vw - 360px) + 341.7188px), 43.9453rem)

DL width-3xl

clamp(24.0271rem, calc(0.499467 * (100vw - 360px) + 384.4336px), 54.9316rem)

DL width-4xl

clamp(27.0305rem, calc(0.672874 * (100vw - 360px) + 432.4878px), 68.6646rem)

DL width-5xl

clamp(30.4093rem, calc(0.895699 * (100vw - 360px) + 486.5488px), 85.8307rem)

DL width-6xl

clamp(34.2105rem, calc(1.181057 * (100vw - 360px) + 547.3674px), 107.2884rem)

Layer 0

Measure

The ideal line length for body copy — real text capped at the token.

DL measure

65ch

Good typography holds a line to a comfortable length. This paragraph is capped at the measure token, so the eye returns to the next line without hunting — which is why body copy is rarely set full-bleed.

Layer 0

Leading

Line height, as a multiple of the type size, so a step keeps its proportion at any font size. Each paragraph is set in the step it names.

DL leading-none

1em

Line height is the space a line of type occupies, not the gap between lines — which is why it is set as a multiple of the type size rather than in pixels. Tighten it for display copy, loosen it for anything a reader has to stay inside for more than a sentence.

DL leading-tight

1.1em

DL leading-snug

1.25em

DL leading-normal

1.5em

DL leading-relaxed

1.7em

Layer 0

Tracking

Letter spacing, in em rather than px, so it tracks the type it is applied to instead of drifting as the size changes. Tight for display, wide for small caps.

DL tracking-tight

-0.02em

Tracking the letterforms

DL tracking-normal

0em

Tracking the letterforms

DL tracking-wide

0.05em

Tracking the letterforms

DL tracking-wider

0.1em