Accessibility
Every keyboard, every screen reader, every zoom level. Accessibility is a first-class constraint in this system — not a layer applied at the end.
All interactive elements expose a single, token-driven focus ring: 2px solid var(--focus), offset 2px from the element boundary. Applied via :focus-visible only — mouse and touch interactions are unaffected. The ring color is the color-wheel complement of --accent in each mode, ensuring it is always visually distinct from the active accent regardless of theme. Elements with a border-radius inherit that shape in the outline; elements with no radius carry a 4px default.
All body text meets WCAG AA (4.5:1 minimum). The focus ring token --focus is verified at AAA (≥ 7:1) against both --bg and --surface in both modes. Accent-on-background combinations are evaluated per-use and documented in the Tokens page.
Every interactive element in the system is reachable by keyboard in logical DOM order. Navigation, dialogs, tabs, and forms follow ARIA patterns for expected keyboard behavior.
Principles that guide every new component and interaction pattern added to this system.
The focus ring is never suppressed for keyboard users. Mouse and touch users see clean UI; keyboard users see a clear, consistent indicator.
Prefer correct HTML elements (button, a, nav, main, h1–h6) over ARIA roles. ARIA supplements what HTML cannot express — it does not replace it.
CSS transitions and JavaScript animation effects honor prefers-reduced-motion. Decorative motion is off by default when the OS preference is set.
Every interactive element has a visible or accessible label. Icon-only controls carry aria-label. Placeholder text is never the sole label for an input.