Tokens
Every item reads only these. The values shown are Day; the scheme, key, pair and Nocturne switches change them in place.
The dynamics, heard
Every size steps by a fourth, like a scale, from the overture down to the quietest caption on the page.ffffEvery size steps by a fourth, like a scale, from the overture down to the quietest caption on the page.
fffEvery size steps by a fourth, like a scale, from the overture down to the quietest caption on the page.
ffEvery size steps by a fourth, like a scale, from the overture down to the quietest caption on the page.
fEvery size steps by a fourth, like a scale, from the overture down to the quietest caption on the page.
mfEvery size steps by a fourth, like a scale, from the overture down to the quietest caption on the page.
mpEvery size steps by a fourth, like a scale, from the overture down to the quietest caption on the page.
pEvery size steps by a fourth, like a scale, from the overture down to the quietest caption on the page.
ppEvery size steps by a fourth, like a scale, from the overture down to the quietest caption on the page.
Colour
Colour tokens| Token | Day value | Copy |
|---|
--ot-paper | #f2f3f0 | |
--ot-ink | #000 | |
--ot-graphite | #4a4b50 | |
--ot-pencil | #6b6c71 | |
--ot-rule | color-mix(in srgb, var(--ot-ink) 14%, transparent) | |
--ot-rule-strong | color-mix(in srgb, var(--ot-ink) 42%, transparent) | |
--ot-accent | #2b2bee | |
--ot-signal | #c8102e | |
--ot-mark | #ffe45a | |
--ot-on-mark | #000 | |
Type
Type tokens| Token | Day value | Copy |
|---|
--ot-voice | "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif | |
--ot-expression | "Bodoni Moda", "Bodoni 72", Didot, Georgia, serif | |
--ot-expression-scale | 1.15 | |
Reading grade
Reading grade tokens| Token | Day value | Copy |
|---|
--ot-expression-text-opsz | 6 | |
--ot-expression-text-variation | "opsz" var(--ot-expression-text-opsz) | |
--ot-expression-text-weight | 500 | |
--ot-expression-text-tracking | 0.012em | |
--ot-expression-text-scale | 1.18 | |
Dynamics
Dynamics tokens| Token | Day value | Copy |
|---|
--ot-pp | 0.8125rem | |
--ot-pp-lh | 1.45 | |
--ot-pp-tr | 0.01em | |
--ot-p | 1.0625rem | |
--ot-p-lh | 1.6 | |
--ot-p-tr | 0em | |
--ot-mp | 1.375rem | |
--ot-mp-lh | 1.45 | |
--ot-mp-tr | -0.005em | |
--ot-mf | 2rem | |
--ot-mf-lh | 1.15 | |
--ot-mf-tr | -0.015em | |
--ot-f | 3rem | |
--ot-f-lh | 1.05 | |
--ot-f-tr | -0.025em | |
--ot-ff | 4.5rem | |
--ot-ff-lh | 0.95 | |
--ot-ff-tr | -0.035em | |
--ot-fff | clamp(4rem, 11vw, 10rem) | |
--ot-fff-lh | 0.9 | |
--ot-fff-tr | -0.045em | |
--ot-ffff | clamp(4rem, 17.5vw, 17rem) | |
--ot-ffff-lh | 0.82 | |
--ot-ffff-tr | -0.055em | |
--ot-measure | 62ch | |
Space
Space tokens| Token | Day value | Copy |
|---|
--ot-space-1 | 0.25rem | |
--ot-space-2 | 0.5rem | |
--ot-space-3 | 0.75rem | |
--ot-space-4 | 1.125rem | |
--ot-space-5 | 1.6875rem | |
--ot-space-6 | 2.5rem | |
--ot-space-7 | 3.75rem | |
--ot-space-8 | 5.625rem | |
--ot-space-9 | 8.4375rem | |
--ot-space-10 | 12.5rem | |
Line and shape
Line and shape tokens| Token | Day value | Copy |
|---|
--ot-hairline | 1px | |
--ot-stroke | 1.5px | |
--ot-dot | 7px | |
--ot-gutter | 24px | |
--ot-margin | clamp(20px, 5vw, 80px) | |
Tempo
Tempo tokens| Token | Day value | Copy |
|---|
--ot-allegro | 160ms | |
--ot-moderato | 320ms | |
--ot-andante | 640ms | |
--ot-adagio | 1400ms | |
--ot-exhale | cubic-bezier(0.16, 1, 0.3, 1) | |
--ot-breath | cubic-bezier(0.65, 0, 0.35, 1) | |
--ot-spiccato | cubic-bezier(0.34, 1.5, 0.5, 1) | |
--ot-arpeggio | 36ms | |