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

0

Fonts

76

Size tokens

Layer 0

Colours

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

Primärfarbe

#FF2D58 · factory

Sekundärfarbe

#CDEE2E · factory

Überschriftentextfarbe

#666666 · factory

Fließtextfarbe

#666666 · factory

Linkfarbe

#FF2D58 · factory

Gelb

#FFF02B

Blau

#00D7FF

Orange

#FF5A2C

Kobalt

#2540D8

Aubergine

#A0148C

DL primary

↳ Primärfarbe

DL primary hover

↳ DL primary-shade-1

DL secondary

↳ Sekundärfarbe

DL secondary hover

↳ DL secondary shade-1

DL accent

#12557E

DL accent hover

↳ DL accent-shade-1

DL accent text

↳ DL accent

DL bg

#F6F8FA

DL surface

#FDFEFF

DL text

#14181F

DL success

#2E7D32

DL warning

#BC7000

DL danger

#C62828

DL surface-2

↳ DL bg L-3

DL surface-3

↳ DL bg L-7

DL on-surface

↳ DL text

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 surface

DL on-accent

↳ DL surface

DL on-success

↳ DL surface

DL on-warning

↳ DL text

DL on-danger

↳ DL surface

DL on-inverse

↳ DL bg

DL neutral-50

#F9FAFB

DL neutral-100

#F4F5F6

DL neutral-200

#E2E6E9

DL neutral-300

#CED4D9

DL neutral-400

#ACB5BE

DL neutral-500

#7C8A98

DL neutral-600

#657381

DL neutral-700

#535E6A

DL neutral-800

#3D454D

DL neutral-900

#262B31

DL neutral-950

#191C1F

DL primary-tint-1

↳ DL primary L+8

DL primary-tint-2

↳ DL primary L+18

DL primary-tint-3

↳ DL primary L+28

DL primary-tint-4

↳ DL primary L+37

DL primary-shade-1

↳ DL primary L-6

DL primary-shade-2

↳ DL primary L-14

DL primary-shade-3

↳ DL primary L-23

DL primary-shade-4

↳ DL primary L-31

DL primary-tone-1

↳ DL primary S-15

DL primary-tone-2

↳ DL primary S-30

DL primary-tone-3

↳ DL primary S-45

DL primary-tone-4

↳ DL primary S-60

DL accent-tint-1

↳ DL accent L+11

DL accent-tint-2

↳ DL accent L+25

DL accent-tint-3

↳ DL accent L+39

DL accent-tint-4

↳ DL accent L+52

DL accent-shade-1

↳ DL accent L-3

DL accent-shade-2

↳ DL accent L-8

DL accent-shade-3

↳ DL accent L-14

DL accent-shade-4

↳ DL accent L-18

DL accent-tone-1

↳ DL accent S-15

DL accent-tone-2

↳ DL accent S-30

DL accent-tone-3

↳ DL accent S-45

DL accent-tone-4

↳ DL accent S-60

DL info

#153796

DL on-info

#FDFEFF

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

#F3F5FC

DL on-info-subtle

#10359B

DL shadow

↳ DL primary L-40 S-36 12%

DL shadow-strong

↳ DL primary L-40 S-36 18%

DL secondary tint-1

↳ DL secondary L+11

DL secondary tint-2

↳ DL secondary L+25

DL secondary tint-3

↳ DL secondary L+39

DL secondary tint-4

↳ DL secondary L+51

DL secondary shade-1

↳ DL secondary L-3

DL secondary shade-2

↳ DL secondary L-9

DL secondary shade-3

↳ DL secondary L-14

DL secondary shade-4

↳ DL secondary L-19

DL secondary tone-1

↳ DL secondary S-4

DL secondary tone-2

↳ DL secondary S-8

DL secondary tone-3

↳ DL secondary S-12

DL secondary tone-4

↳ DL secondary S-16

DL primary subtle

↳ DL primary-tint-4

DL on primary subtle

↳ DL primary-shade-3

DL border brand

↳ DL primary-tint-3

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-0

0px

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)

DL border-hairline

1px

DL border-thick

4px

DL border-thin

2px

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

DL leading-compact

1.2em

DL leading-prose

1.6em

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

Tracking the letterforms

DL tracking-caps

0.08em

Tracking the letterforms

DL tracking-subtle

0.02em