Brutalist Switch
Mechanical Neo-Brutalist switch states and interaction contract
Switch
Section titled “Switch”The reference Switch uses a capsule and a white circular thumb, each with a 2px black border and no shadow. At a 16px root font size, the track is 24×48px and the thumb is 16px.
- Off: neutral track; On: main blue track. The thumb stays white
- Only the thumb moves, 1.25rem between endpoints (20px with symmetric 6px outer insets at a 16px root font size)
- The 150ms spatial Thumb transition becomes instantaneous under reduced motion
- Press does not flash coral, shift the track, or add an extra shadow
- Keyboard focus retains an offset ring; disabled preserves shape and blocks activation
The prototype uses physical left/right placement so the same measured geometry remains bounded in an RTL parent; this is not a claim of mirrored RTL switch semantics. The visible caption is inside the Switch root, so Base derives its accessible name from the same text across all four Web runtimes. Clicking the caption follows the same activation path; the disabled example remains inert. DM Sans typography comes from the prototype, with host fallback for unsupported glyphs.
Dragging is temporarily unsupported: draggable accepts only false or omission; a raw true input falls back to false. Tap and keyboard activation remain available. The next drag extension must use the same declared endpoints for input and direct thumb presentation while preserving these reference dimensions.