Skip to content
heyrav design system
Foundations

Accessibility

AA is the floor, measured. 44px targets, visible focus, real buttons, and every moving part behind a reduced-motion switch.

Contrast

Every text colour clears 4.5:1 on paper in both themes - the ratios are computed at build time and printed on the Colour swatches. 12px mono labels use --ink-3 (5.1:1), not --mut.

Targets

44 × 44px minimum on everything interactive. The padding lives on the link, not the bar, so the target is real. Where art is smaller (the 32px footer lockup), min-height:44px keeps the hit area legal.

Focus

Chip
Show code
<button class="btn btn-primary d-focus">Focused</button>
<button class="btn btn-ghost d-focus">Focused</button>
<span class="chip d-focus">Chip</span>

outline:2px solid var(--ink); outline-offset:2px, on :focus-visible only. A tucked nav returns on :focus-within so keyboard focus is never stranded off-screen.

Semantics

  • Toggles are <button>, not <a href="#"> - a link to # scrolls to the top, and a button gives Enter/Space and focus for free.
  • Hidden layers use visibility, not just opacity, or a screen reader reads both at once.
  • Hover-revealed content is gated in @media (hover:hover); touch browsers leave a sticky hover on the last tap.
  • Dialogs use native <dialog> with showModal(): focus trap, Escape and inert background come from the platform.

Motion

See Motion. The reduced-motion block in heyrav.css covers every transition and animation in the system in one place.