Reading ink — measured on white
--color-ink15.9:1
--color-muted6.87:1
--color-label8.6:1
the old muted4.93:1 — retired
Secondary ink is where a page goes washed out. 4.93:1 clears AA and nothing else; on the sunken surface it drops to 4.6:1. The current value has headroom at --size-small, which is where secondary text actually lives.
Weight is an accessibility property
- Body is
--weight-body (450), not 400: N&M Text's Regular renders grey rather than black at 16px.
- Greyscale antialiasing is dark-mode only — forcing it globally strips a quarter-step of apparent weight from every glyph.
- Nothing below 400 is ever set at reading size. The 200/300 cuts exist for display only.
- Inline
<strong> is 600, not 700: against Book, Bold is a shout.
Measure, leading, zoom
- Reading copy caps at
--measure-prose (68ch). Past ~80 characters the eye loses the line return.
- Body leading is 1.65 — WCAG 1.4.12 wants at least 1.5 to survive user text-spacing overrides.
- Every size is
rem. One px font-size anywhere and browser zoom stops working for that text.
- Only two sizes clamp (display and mega). A paragraph that scales with the viewport is a paragraph that ignores the reader's setting.
- Uppercase + tracking is for labels of two or three words. A tracked uppercase sentence is measurably slower to read.
Effects may never be the only signal
Winter '24 API retired — the word carries it, the rule decorates it.
Highlighted text is a real <mark>; struck text is <s>; a citation is a link to a footnote that exists.
- Every effect's final state is the correct rendering, so
prefers-reduced-motion flattening leaves a drawn highlight rather than an invisible one.
- Nothing loops in reading copy. The one infinite effect (the kinetic strip) is
aria-hidden and carries no information.
- Hover-only content repeats what is already at its destination.