Bar
The top of a page: a wordmark with a lamp, printed links, and one contrast key at most.
Templates
Checkout · Calder
A one-page checkout for a cycle parts shop, as a docket and a till: three numbered parts whose lamps light as each is complete, and a till with the total on its display, the bag, a discount code and a receipt that prints a line for each part. Loading, empty, failed and declined states included.
On this page
Anatomy
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.
Field
Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
Check
An option in a form: a small square key that presses below the plate when chosen, with a tick printed on it.
Radio
One choice from a short list in a form: small round keys in a fieldset, the chosen one pressed with a printed dot.
Combo
One field with its one action in a shared well: subscribe, search, add.
Stepper
A small integer with − and + keys either side, in one well.
Status
A lamp with words: the state line in tables, panel heads and lists. The words carry the meaning; the lamp is the glance.
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.
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.
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.
Tag
A small printed plate: a type, a count, a badge. Solid for the one tag that must stand out.
Spec list
Key and value facts, printed like the plate on the back of a device.
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.
Timeline
An event log like the roll of a chart recorder. The rail is engraved down the plate and each event is a tick stamped across it, with its time in tabular figures and its words beside it. A lamp on the rail is the only colour, and a marker for the present separates what has happened from what is still to come.
Toast
A confirmation after an action.
Usage notes
Bar with a way back · the docket: a display heading, then contact, delivery (methods in a ruled list, the address, collection) and payment, each numbered with a lamp · the till, the one plate on a Quiet page: an LCD total, the bag as a list with steppers, a discount code in a combo, the sums, the receipt as a spec list that prints as you go, the terms and a commit key that pays · paid: the order number and what happens next on a timeline · a key at the foot that shows the other states (?state=).