Type scale (ratio 1.2)

Six sizes used for type (--s-1 through --s4). Largest-to-smallest ratio: 2.49, comfortably under the 3:1 cap chosen for screen-magnifier accessibility.

Heading hierarchy

Heading level 1 — page title

Heading level 2 — major section

Heading level 3 — subsection

Heading level 4 — sub-subsection

Heading level 5 — same size, lighter weight

Heading level 6 — same size, italic

Caption / footnote text uses --s-1.

Body prose

Standard paragraph text in Atkinson Hyperlegible at the body size. The line length is capped at the measure (60ch) by the universal axiom in axioms.css, so paragraphs never exceed a comfortable scanning distance regardless of the container they sit in. Italic emphasis and bold emphasis are typographic, not chromatic.

A second paragraph follows with normal link affordance— underlined, distinct colour, thickening on hover and focus — so colour is never the only signal. Inline code uses the system monospace stack.

“None of this is unique to music. It is just easier to see in a place where the wanting is obvious.”

Zonal tinting

Each main-nav landing has its own zone hue; sub-pages inherit. All ten sit at the same OKLCH lightness pair (95% surface / 20% ink in light mode, 20% / 96% in dark), so body-text contrast holds at ~11:1 across every zone — comfortably above AAA’s 7:1 minimum. The pairing is symmetric: the reversed direction (ink-on-surface, used by badges, the pill-toggle’s selected state, the destructive button, and the ImageFigure “View larger” badge) inherits the same contrast, demonstrated by the small reversed-pair sample in each swatch.

Focus indicator

Solid outline at the focus colour, offset 3px from the element edge with a halo box-shadow underneath. Tab into the controls below to see the ring — it stays distinct against any adjacent colour or image.

The ring uses :focus-visible, so mouse clicks on buttons don’t draw it — only keyboard focus does.

Layout primitives (Every Layout)

Class-based implementations of the twelve primitives from Every Layout by Heydon Pickering and Andy Bell. Compose, do not invent.

Stack

Cluster

Sidebar

Switcher

Grid

Frame (16:9)

User preferences honoured

• prefers-color-scheme: dark — surface and ink tokens swap; AAA contrast preserved.
• prefers-contrast: more — palette collapses to pure black and white.
• prefers-reduced-motion: reduce — all animations and transitions clamped to 0.01ms; smooth scroll disabled.
• prefers-reduced-data: reduce — currently a hook only; richer assets will defer to it as they're added.

Toggle each preference in your OS or browser to see the effect live.

Links that open a new window

The NewTabLinkcomponent is used for any link that opens in a new browser window or tab — the interactive demo launchers, and any link that should open away from the current page. The “(opens in a new window)” notice is visible text inside the link, so it is part of the link’s accessible name: a screen-reader user tabbing through focusable content hears the warning when the link takes focus, before they activate it (WCAG 3.2.5, technique G201). It sets rel=“noopener” on the way out.

As a button-style launcher (with the pill class):

Open the interactive terminal map (opens in a new window)

As an inline link in prose:

Read the WCAG 2.2 Understanding On Input (opens in a new window) document for the reasoning behind the warning.

The label and the notice are each kept as one non-breaking phrase, but the link may wrap betweenthem, so the appended notice never forces horizontal overflow on a narrow column — even when the link is also a pill.