Record row
default · illustrativehover · illustrativepressed · illustrativefocus · illustrativeselected · illustrativestale · illustrativeANATOMY
- identity
- primaryReading
- secondaryReading
- trailingAffordance
| State | Looks like | Does |
|---|---|---|
default |
Opaque surface, legible label, essential boundary | Real enabled semantics |
hover |
Tonal lift; no movement of layout | Optional; a pointer that cannot hover simply never shows it |
pressed |
Inset tone; no movement of layout | Equivalent to hover for touch and keyboard |
focus |
2px Gold ring + dark separation, 3px offset | Visible, unclipped and not obscured by sticky UI |
selected |
Check, leading marker or tonal boundary; rim light may accompany, never replace it | Selected / pressed / current state as appropriate |
stale |
Muted surface and an age label beside the value | The value stays readable and carries its age; never a pulse |
Four stills of the same transition. Playback repeats it; the stills explain it on their own.
This tier settles every change at once, so the transition cannot be played here. Switch to System or Reduced to see it run.