The brand reads
for everyone.
Accessibility is editorial discipline applied at a different surface. The same restraint that makes the brand quiet makes it readable: high-contrast pairs, hairline focus rings, motion that yields to preferences, semantics that survive a screen reader.
Every canonical pair, with its measured ratio.
Aa
Ink on paper · canonical body
Aa
Paper on ink · canonical reverse
Aa
Clay on paper · accent · ≥ 700wght required
Aa
Clay-warm on ink · accent · ≥ 600wght required
CHROME SMALLCAPS
72% ink on paper · smallcaps at 11–13px
Aa
Paper on peacock · drenched band only
The Stroke-Continuity Rule, audited.
Clay on paper at roman 400 (regular weight) measures 3.4:1 · fails AA. Hence the no light + clay rule on page 05. The system enforces this by always pairing clay text with weight ≥ 700 on paper and ≥ 600 on ink.
Tab through. Watch the clay ring follow.
Press Tab in the panel below to step through. Focus rings are 2px clay, 3px offset, never removed. The brand's only sharp colour ring lives here, by design.
Rules
- 2px solid
var(--br-clay) - 3px
outline-offset - Always
:focus-visible· not:focus - Never
outline: 0without a replacement - On ink:
var(--br-clay)for luminance
The token
:focus-visible {
outline: 2px solid var(--br-clay);
outline-offset: 3px;
}
.surface-ink :focus-visible {
outline-color: var(--br-clay);
}Every interaction is reachable without a mouse.
Move to the next focusable element in source order. SHIFT+TAB · backward
Activate a button or link. Space toggles checkboxes and switches.
Close modals, sheets, popovers. Returns focus to the trigger.
Move within a composite widget (chip group, segmented control, the Tweaks panel sliders).
Open the command palette (admin app only).
Focus search (admin app only).
Skip-to-content link is required on every product page, hidden until focused, then becomes the first visible element. Modals trap focus until dismissed; sheets do the same; popovers do not (they return focus on close).
Structure first. Markup second. ARIA last.
Heading order is the table of contents
Exactly one <h1> per page. <h2> for section heads. Never skip a level for visual size · use the type ramp tokens (.h1-xl, .h1, .h2) on the correct semantic element.
Landmarks are required
Every page has a <main>, <nav>, and <footer>. <aside> for the sidebar. Identify them with aria-label only when there is more than one of a kind.
Decorative dingbats are hidden
The diamond fleurons (◆), arrow dingbats (→), and middle dots (·) used as ornaments must have aria-hidden="true". A screen-reader user does not need to hear "black diamond" between paragraphs.
Icons inherit labels from context
Phosphor icons rendered inline next to text take no label. Icon-only buttons (close, settings) require aria-label. Never label with an emoji description.
Reduced motion is honoured at the source.
Vestibular-trigger animations stop entirely under prefers-reduced-motion: reduce. State changes (button hover, link underline, focus ring) keep their transitions · they communicate, they do not decorate.
Stopped under reduce
- Marquee · 60s linear loop
- Caret blink
- Cursor-engaged ring scale
- Manifesto blur cycle
- Headline word-stagger entry
- Scroll-driven parallax (none in the system, but if added)
Kept under reduce
- Button hover (colour, border)
- Link underline-draw
- Card hairline brighten
- Focus-ring fade
- Page transition (opacity only, no transform)
Labels are not placeholders. Errors are not red walls.
Labels above inputs, always
Placeholders are not labels. They disappear when the user types and they fail every screen reader test. Use <label for> linked to id on every input.
Errors get an icon and a label
Colour alone is not enough · colour-blind users miss it. Pair clay with the warning icon and a sentence in role="alert". The sentence says what to fix.
Required is named, not asterisked
"Required" appears as smallcaps next to the label, not as a coloured asterisk. The asterisk is fine if a sighted user can hover-tooltip; for screen readers it must also be the field's aria-required.
Submit is never the last step
After submission, focus moves to the next informational region (confirmation, next step). Never leave focus on a disabled submit button · the user is lost.
44 × 44 floor on every interactive element.
Anything tappable. Buttons, chips, icons, links in lists.
Primary CTAs, the Floating CTA pill, sidebar nav items.
Floating action buttons, hero CTAs, mobile bottom-tab.
Visual size may be smaller (a 16px icon inside a 44px button); the hit target is the 44px box. Spacing between targets is at least 8px so users do not mis-tap adjacent controls.
What we audit. How often.
WCAG 2.2 Level AA. AAA on body type and chrome text. AA on accent type.
axe-core in CI · Lighthouse on each deploy · NVDA + VoiceOver smoke tests · keyboard-only test pass before each release.
Every PR runs axe. Every minor release runs the full keyboard + screen-reader pass. Every major release runs an independent third-party audit.
Accessibility regressions are P0 · they block the release. Contrast under AA on body text is a defect, not a stylistic discussion.