Design System

Design System

Accessibility rules

  • Target WCAG 2.2 AA. Text is 4.5:1 on its ground (3:1 from 24px, or 18.66px bold); borders, focus rings and icons that carry meaning are 3:1. Each token's note names the grounds it was measured on.
  • Use the native element first: dialog, details, button, a, label. ARIA only where the tag runs out.
  • Every control is at least 44px (min-block-size: 2.75rem) and reachable and operable by keyboard. An icon-only control has a name.
  • Colour is never the only signal: links are underlined, the selected language has a bar and a check, an invalid field has text.
  • Numbers drawn by CSS counters are spoken through the / alt-text slot (content: counter(post) '. ' / ...).
  • Put SkipLink first on every page, and send focus to the page h1 after a route change.