Contrast — status text

The raw status hues are for dots, borders and icons. Status text always uses the -ink pair, which is darkened for light mode and lightened for dark.

Focus

• Never outline: none without a replacement ring.
• :focus-visible, so a mouse click paints no ring.
• 2px brand outline, 2px offset — or the --shadow-focus ring on inputs.
• Only [tabindex="-1"] containers suppress it, because script moved focus there, not the user.

Targets

• --target-comfy 40px for anything a thumb hits.
• --target-min 24px is the WCAG 2.2 floor, for dense inline controls only.

Semantics — use the platform

• <dialog> for modal and drawer: focus trap, inert background, Esc, top layer.
• <details> for accordion: find-in-page can still reach collapsed content.
• <progress> for completion, <meter> for a score. Not interchangeable.
• Native <select>, checkbox and radio — restyled, never reimplemented.

Never color alone

• Status = dot + word + color. Works in grayscale.
• Charts pair a legend with direct labels; the palette is CVD-verified by CI.
• @media (forced-colors: active) re-anchors every custom control to system colors.

Announcements

• role="status" polite for info and success.
• role="alert" assertive only for a failure needing action now.
• Live regions are mounted empty and early — a region created with its message announces nothing.
• Never put an actionable error in a toast: it disappears, and it cannot be reached again by keyboard.

Motion

• prefers-reduced-motion collapses all durations globally in base.css.
• Looping animation (shimmer, float) stops entirely rather than snapping to a frame.