Skip to content

States

PROPOSAL — under review

Status: proposal, pending ratification — the behaviour layer and states taxonomy below are §4’s proposed half. One element on this page is already law and is labelled where it stands: the status dot.

behaviour layer (proposed). overlay behaviours — focus trap and restore, the keyboard model, typeahead, collision positioning — come from a proven primitive layer in the shell; Distira tokens style it. hand-rolled overlay behaviour is a review flag. every gesture keeps a visible fallback; drag has a single-pointer and keyboard alternative; imported, ported, or suggested content renders visually distinct from user-authored content until accepted.

states taxonomy (proposed). every component answers a completeness checklist: default, hover, focus, active, disabled, loading, error, empty; a missing state is an unfinished component.

  • loading is a skeleton shaped like the content.
  • empty is a vessel: one calm instruction, one action, no mascot, no tour.
  • error voice: what happened in one clause plus the exact corrective action; no codes in the user’s face, no blame, no humour; an error never destroys the user’s input.
  • degraded is a named pattern, not an error: what still works, what is disabled, one recovery action.
  • status is a small vocabulary — operational / degraded / down / unknown — and “unknown” is a lawful thing to display instead of a confident green. daemon-backed surfaces carry a small persistent connection-status word, never a spinner forever.

the status dot (law; ratified in tokens/components-v1.md). one shape (a dot), state carried by fill and hue, exactly five meanings on every surface: done — sage, filled; active — accent, filled; ready — lagoon, filled; down — danger, filled (down never renders in neutral text grey); unknown — hollow, ring in border-panel, no fill (unknown is the only hollow state: filled means known, in either direction). new states join by verdict, and a state that cannot be told apart from another at a glance does not ship.

accessibility floors (proposed). contrast floors are computed on the composited colour, not the raw token, for text, icons, borders, and tints, on light and dark and on busy backdrops. a failure fails the gate; it isn’t written up and shipped anyway. focus is never obscured by a surface’s own footer; the focus ring is tokens, tab order is logical, focus returns to the trigger on dismiss. hit-target floors: 24px desktop, 44px touch. the app never re-asks what the system already reported. high contrast is an authored theme, not a filter. every state change leaves a static cue (colour, icon, or label), so no meaning rides on motion, sound, or haptics alone. timed interactions carry an extension rule; timing is never the only way to succeed.


Every cell below is the component itself, rendered from the token source — not an image of it. States a component does not have are named as absent rather than invented for the grid.

rest

evening

hover (held, so it can be read)

evening

active

evening

disabled

evening

The chip has no error state of its own, and no empty state: errors are stated in words on the surface that owns them, and an absent chip is simply absent. A state that cannot be told apart from another at a glance does not ship — that rule covers this grid too.

done
active
ready
down
unknown

Five meanings, no sixth. Down never renders in neutral grey, and unknown is the only hollow one: filled means known, in either direction.

rest — the tick is pace, standing proud of the track

requests 34 / 80

near the ceiling — warn takes ember

requests 74 / 80

over-asked — danger, and it says so

requests 80 / 80

you asked for 92. the ceiling is 80, so it stops at 80.

empty

requests 0 / 80

nothing yet. the track still shows where the ceiling sits.

the ceiling rule, playable: ask for more than the gauge declares.

requests 34 / 80

declared ceiling: 80. drag the ask past it.

a belt: discrete units spent and remaining. on = the accent-pale fill with the chip’s ring; off = white at 0.08, no ring.


Canonical text: §4, behaviour layer, states, accessibility, in the design language document; status dot values in tokens/components-v1.md.