Component library
The soft UI set used by the dashboard and this site. Each one meets 3:1 at its edge, has a text label, and works with a keyboard. Switch on high contrast at the bottom of the page to see the other palette.
Dial
Ring in --edge-strong (3.5:1); target arc outlined in --warm-ink (4.2:1). role=slider with aria-valuetext.
Toggle
State shown by colour, thumb position and the words On/Off. Active track bounded by --on-ink (4.4:1).
Slider
Inset rail with an --edge-strong ring; the thumb is a full touch target. React Aria slider.
Segmented control
Radio group. The chosen option is pressed in, ticked and ink-coloured, so it never relies on shadow alone.
Button
Raised by default, pressed over 120ms. Text label always; primary uses --warm with --text (4.9:1).
Card
Raised or inset surface. Its --edge hairline is decorative; controls inside carry their own rings.