Per family: the three highlight steps in each mode (each chip keeps its own mode's colors, with its oklch L C H — one lightness per step across families, only the hue changes), and a live selected row, checked button and highlight chip in the page's mode. Every selection should read as the family's tint, never as a surface step or a fill.
Pick a family: the gallery re-scopes to it. Each selected item below paints the family's highlight, and only while it is selected — tick and untick the Panel rows (they follow their checkbox, active="checked"), pick options, buttons, nodes and dates; hover and press a selected row, option or button to see the hover and press steps. Filled (primary) selections keep the accent fill, keyboard focus keeps its ring, and the current location (the nav item) keeps the surface tint — the second nav shows the activeEmphasis="highlight" opt-in.
Colorless (activeEmphasis="tertiary") selection uses the neutral highlight — toggle it too:
secondary · highlight
primary · accent fill (unchanged)
Open it: the selected option uses the neutral highlight (browsers vary in painting option backgrounds).
default · surface tint
activeEmphasis="highlight" · opt-in
Body text with a search match on the press step.
Each family generated without a highlight (left 'Aa') and with it (right 'Aa', text re-solved so it stays AA on every highlight step), on the family's own surface.peak in each mode — every sample keeps its own mode's colors. ΔL is the OKLCH lightness change; the summary lists, per mode and token, how many families moved, the mean shift and the largest one.