Instruments and readings components
default · illustrative
stale · illustrative
offline · illustrative
State matrix · static HTML, readable without JavaScript
| State | Looks like | Does |
|---|
default |
Opaque surface, legible label, essential boundary |
Real enabled semantics |
stale |
Muted surface and an age label beside the value |
The value stays readable and carries its age; never a pulse |
offline |
Dimmed live surfaces and an offline notice with what is still available |
Cached content stays readable; recovery names the retry |
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.
default · illustrative
pressed · illustrative
stale · illustrative
offline · illustrative
ANATOMY
- bearingRing
- needle
- lubberLine
- label
State matrix · static HTML, readable without JavaScript
| State | Looks like | Does |
|---|
default |
Opaque surface, legible label, essential boundary |
Real enabled semantics |
pressed |
Inset tone; no movement of layout |
Equivalent to hover for touch and keyboard |
stale |
Muted surface and an age label beside the value |
The value stays readable and carries its age; never a pulse |
offline |
Dimmed live surfaces and an offline notice with what is still available |
Cached content stays readable; recovery names the retry |
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.
default · illustrative
pressed · illustrative
selected · illustrative
stale · illustrative
State matrix · static HTML, readable without JavaScript
| State | Looks like | Does |
|---|
default |
Opaque surface, legible label, essential boundary |
Real enabled semantics |
pressed |
Inset tone; no movement of layout |
Equivalent to hover for touch and keyboard |
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.
All families ↑
