Foundations
States
Every interactive part has the same set of states, and each looks like something physical. Here is the key in all of them, in every finish.
On this page
The set
| State | Looks like | How |
|---|---|---|
| Rest | Raised, lit top edge | The raised light, or a key’s skirt |
| Hover | A touch brighter; nothing moves | brightness 1.03 |
| Pressed | Below the plate, shaded by its edge | Down by the skirt + the pressed light |
| Latched · selected | Stays pressed; a lamp lights if it has one | aria-pressed, :checked |
| Focus | A 2px ring, 3px away | --tui-focus |
| Disabled | 45% opacity, no movement | :disabled, aria-disabled |
| Error | A red hairline on the lip; a hint that says what to do | data-error on the field |
| Loading | A blinking amber lamp, a ladder, a progress slot, or the Spinner (a ring of lamps) | Never a rotating arc, dots or a shimmer |
All at once
Documentation shows every state together using three forced-state classes (.is-hover, .is-down, .is-focus) plus the real disabled and aria-pressed. Every part page in these docs has this matrix.
Aluminium
| Part | Rest | Hover | Pressed | Latched | Focus | Disabled |
|---|---|---|---|---|---|---|
| Key | ||||||
| Contrast | ||||||
| Flat | None |
Graphite
| Part | Rest | Hover | Pressed | Latched | Focus | Disabled |
|---|---|---|---|---|---|---|
| Key | ||||||
| Contrast | ||||||
| Flat | None |
The full law
states.mdIn the brain
This page is a summary in plain words. The brain holds the law itself, written for an agent to follow.
The full law, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.