Tier 1Tier 1 · Web (www / app / auth). The full design system: our component library and the components.css recipe. This is the one tier where the recipe is the contract, native tiers take the tokens and nothing else.--dur-fast · --ease-out · --segmented-control-bg · --radius-sm
01 Segmented control SegmentedControl
Switches a parameter of the current view: list vs grid, sort direction, plan interval. If it swaps the content region, use Tabs.
roleradiogroup + aria-checked, never tablist
tray--segmented-control-bg, one step below its surface
thumb--segmented-control-bg-active + --shadow-sm
outline--line, non-interactive chrome
radius--radius tray, --radius-sm thumb
height30px default, 26px sm. Icon-only needs aria-label
02 Anatomy
--segmented-control-bgtray fill, inset one step below the surface it sits on --segmented-control-bg-activeselected thumb, raises back to the surface, plus --shadow-sm --linetray outline (non-interactive chrome, step 6) --radius tray corner; thumbs use --radius-sm 30px / 26pxsegment heights, default and sm; icon-only segments need an aria-label
Selection is surface plus shadow, never yellow. Yellow marks brand and primary actions, not which option is on. Two to four segments; past that use a Menu or Select.