Tokens

The charte on screen, as the site builds it from design/tokens.json: every colour on the ground it is meant for, with its contrast ratio against WCAG AA (4.5:1 for text under 24 px), and every type role at every size the tokens give it. A colour that is not listed under a ground carries no text.

What each token means and where the code uses it is in the token reference on the forge, for a reader signed in to it.

Colours

Text on paper `#F5F4EE`

ink #0A0A0A 17.97:1 AA
Text on paper; Essays cover; back cover ground
ink-2 #3A3A37 10.36:1 AA
Secondary text on paper
muted #5B5B57 6.19:1 AA
Labels, running heads, captions on paper
teal-deep #1E6866 5.91:1 AA
Links on paper; Technical notes series; diagram highlight border; code keyword

Text on paper-2 `#ECEBE3`

ink #0A0A0A 16.55:1 AA
Text on paper; Essays cover; back cover ground
teal-deep #1E6866 5.44:1 AA
Links on paper; Technical notes series; diagram highlight border; code keyword
code-string #8A5A1E 4.93:1 AA
code-comment #666661 4.83:1 AA
code-linenum #8A8A84 2.9:1 exempt, incidental text
Line numbers: incidental text, exempt from AA

Text on ground `#101C1C`

on-ground #F5F4EE 15.82:1 AA
on-ground-2 #C9D1CE 11.2:1 AA
on-ground-muted #8FA09C 6.37:1 AA
teal #00A89E 5.89:1 AA
Brand accent. Text/links/buttons on dark only, never text on paper

Text on teal-deep `#1E6866`

paper #F5F4EE 5.91:1 AA
Page ground

Text on ink `#0A0A0A`

on-ground #F5F4EE 17.97:1 AA
on-ground-2 #C9D1CE 12.72:1 AA
on-ground-muted #8FA09C 7.24:1 AA
teal #00A89E 6.69:1 AA
Brand accent. Text/links/buttons on dark only, never text on paper

Text on teal-mid `#218E8E`

ink #0A0A0A 5.02:1 AA
Text on paper; Essays cover; back cover ground

Text on teal `#00A89E`

ink #0A0A0A 6.69:1 AA
Text on paper; Essays cover; back cover ground

Fills, no text

rule #D5D4CB
Hairlines and borders on paper
tint #DCEDEA
Highlighted diagram node fill
cyan #00FFFF
Highlight only: progress rule, current marker. Never text
ground-2 #152424
Buttons on the ground
ground-3 #1B2B2B
Button hover on the ground
ground-rule #2A3A3A
Hairlines on the ground

Type

label display 500

label desktop 12 / 16

chrome display 500

chrome desktop 13 / 16

meta text 400

meta desktop 14 / 20

caption text 400

caption desktop 13 / 20

text text 400

text desktop 16 / 24

text phone 15 / 22

text tabletPortrait 18 / 28

card-title display 700

card-title desktop 27 / 28

card-title tablet 22 / 24

card-title phone 21 / 24

card-title phoneLandscape 20 / 22

article-title display 700

article-title desktop 31 / 32

article-title tablet 26 / 28

article-title tabletPortrait 36 / 38

article-title phone 28 / 30

article-title phoneLandscape 26 / 28

notice-title display 700

notice-title desktop 27 / 28

h1 display 700

h1 desktop 44 / 44

h1 tablet 32 / 32

h1 phone 28 / 30

cover-title display 700

cover-title desktop 54 / 54

cover-title tablet 46 / 46

cover-title phone 46 / 45

cover-title phoneLandscape 44 / 43

figure-label display 600

figure-label desktop 15 / 17

code mono 400

code desktop 13 / 20

code tablet 12 / 18

code phone 12 / 19