Components

Segmented Controls

One pattern at two scales: range tabs swap an analysis window in place; category chips filter a list. Both switch content without navigation or animation.

Range tabs, live

1M / 3M / 6M — active cell is a white pill on the warm track; present in every overview card

Property	Spec
Track	--bg2 pill container
Active	white pill + shadow + text weight shift
Special case	TrendsCard adds a “Since [Treatment]” tab when a protocol is marked as a trends anchor
Behaviour	content swaps in place — no animation, no scroll reset

Category chips, live

Single-select filter — Treatments tab (HRT / Skin / custom categories via ⋮)

When to use which

Range tabs when the choices are views of the same data (time windows). Category chips when the choices partition different data (treatment categories). If the options exceed ~4 or are user-defined, use chips — tabs never scroll.

·Keep range tabs to ≤4 fixed options
·Let category chips grow and wrap with user-defined entries
·Swap content instantly — the control is the feedback

Don't

·Animate panel transitions between ranges
·Use segmented controls for navigation between screens
·Mix tab and chip styles in one control

Accessibility

—Range tabs use role="tablist"/tab with aria-selected; category chips behave as a radiogroup.
—Active state = white pill + weight shift, not color alone.