Bar
The top of a page: a wordmark with a lamp, printed links, and one contrast key at most.
Templates
Funnels · Sluice
A funnel workbench for an invoicing app, on a Quiet page: the steps are plates in a rack you reorder by hand, and beside them the funnel is measured as it changes, with an amber lamp on the step most people never reach, what the leavers did instead, and a breakdown by source, device or country. Loading, empty, error and read-only states included.
On this page
Anatomy
Side rail
App navigation in a panel: the current page is a recess with its lamp lit, links grouped under printed labels.
Selector
One mode of two to five: latching keys in a tray, one down at a time, each with a lamp that lights when chosen.
Select
A choice from a longer list, in the same recess as a field, with a printed chevron. The browser’s own menu opens it.
Combo
One field with its one action in a shared well: subscribe, search, add.
Sortable list
Plates in a rack that you reorder. Each has a knurled handle: drag it and the plate lifts off the rack on a shadow while the others slide aside, or pick it up from the keyboard and walk it up and down. Every step is spoken.
Lamp
The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
Status
A lamp with words: the state line in tables, panel heads and lists. The words carry the meaning; the lamp is the glance.
Tag
A small printed plate: a type, a count, a badge. Solid for the one tag that must stand out.
Panel
A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.
LCD
A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.
Readout
A printed label over a value: key figures, with the unit small and the change in words.
LED bar chart
A bar chart built like a studio meter bridge: columns of LED segments behind a smoked window, green then amber then red, with a peak segment that lingers and a lit readout for the exact value.
Table
Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.
Progress
Progress through a task: ink filling a groove, never a coloured bar.
List
Rows in a rack: a mark, a title, a second line and a fact or a key at the end. Chosen rows sink into a recess with their check key latched; in a running order, a row lifts out of the rack on its skirt and slides past the others, from the keyboard or by its grip.
Key
Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
Commit key
A key for work that takes time and must not run twice. It latches below the plate while the work runs, an LED matrix in its face scanning amber, and says how it ended.
Alert
A message let into the surface, with an annunciator: a small lit legend (Note, Done, Check, Fault) beside the words that say what happened.
Empty state
What a view shows before it has anything: an empty tray with the outline of what goes in it printed on its floor, one sentence and one key.
Skeleton
The shape of a page before its data arrives, drawn as the unprinted plate: blank engraved bars where the words will print. Nothing on it moves. One amber lamp beside “Loading” is the only sign of work.
Toast
A confirmation after an action.
Usage notes
Bar with the project and a sample tag · a side rail of saved funnels · a head with the name, who keeps it, a saved lamp and a commit key · period and window selectors and a breakdown select · the bench: a sortable rack of steps with an add combo, beside an LCD conversion, three readouts, LED bars a step and a table of each step · under the rack, where the leavers went as a list; under the funnel, a sortable breakdown · a key at the foot that shows the other states (?state=).