Bar
The top of a page: a wordmark with a lamp, printed links, and one contrast key at most.
Templates
Project board · Board
The project board of a small team, on a Quiet page: five columns of cards you drag between and within, with the mouse, a finger on the handle, or the keyboard (Space to pick up, arrows to move, Space to drop, Escape to put back, every step said aloud), a filter bar by owner, label, due this week and search whose counts match what is shown, and a limit on Doing that lights its lamp when it is passed. A card opens in a side panel with a checklist you can tick, owner, due date, label, comments and Archive behind a plain confirm; a List view sorts the same cards; a Week view counts what is done, open and overdue, by person. On a phone it is one column at a time with a switcher and a tab bar. Loading, empty, error and read-only states included.
On this page
Anatomy
Banner
A strip the width of the page, above everything, for one announcement: a lamp, one line, an optional key that goes somewhere and a dismiss key. It is a raised plate, not a recess, so it reads as part of the frame and not as a message in the page. It is a labelled region, there on load, and says its thing once. When it goes it closes like a drawer, so the page glides up by its height instead of jumping.
Panel
A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.
Side rail
App navigation in a panel: the current page is a recess with its lamp lit, links grouped under printed labels.
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.
Search field
A recess for a question. A glass is printed on its floor at the start, the words run on, an optional count is printed behind an engraved line, and a clear key sits in the far corner while there is something to clear. Escape empties it.
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.
Switch
On or off, applied the moment it moves. A native checkbox with a ridged thumb in a slot that lights green when on.
Tag
A small printed plate: a type, a count, a badge. Solid for the one tag that must stand out.
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.
Avatar
A person’s mark, struck like a coin: initials stamped into the field, or a photo set under the rim, with a status lamp mounted at five o’clock. Stacks into a group with a count.
Drawer
A panel that slides in from any edge of the window, on the native dialog. A face plate bolted to the frame, with a machined grip let into its inner edge to pull it shut by.
Date field
A date typed in three segments, day, month and year, in the field’s own well. Each segment is a small number you can step with the arrow keys or type over, and typing moves you on by itself once a number is complete. The order and the separator are the reader’s. A calendar key at the right of the well opens the kit’s calendar for anyone who would rather point. The form gets an ISO date, yyyy-mm-dd, or nothing while the date is not complete, and a wrong date says what is wrong in a sentence: February has 28 days in 2026.
Checklist
The kit’s check keys in nested groups. A group’s key is the sum of its items: all done, none, or some, and some is a key sunk halfway with a bar across it. The head counts the items, “3 of 7”, and its lamp lights when they are all done.
Form validation
A form that says what is wrong, on the browser’s own checks. Press submit with something missing and each field in error gets a line under it with a red lamp lit and words that say how to put it right, its well ringed red; at the top of the form an annunciator lights over a count and a list that links to each field, and takes the focus. From then on each field is checked again as it changes.
Alert dialog
The dialog plate for a question that must be answered before an act that matters. A caution strip is set across its head with one lamp in it, red when the act cannot be undone and amber when it can. The question is the title, one sentence says what will happen, and a grave act can ask for its name to be typed first.
Table
Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.
Stacked bars
Columns split by series on a display well. Stacked mode reads totals from zero, with each total printed above its column. The series are the lamps (blue, amber, green) and the display’s own light, and from the third on they have a pattern too, so no series is only a colour. Move the pointer across the columns, or use the arrow keys, and the readout says the series, its value, its share and the total. The legend keys turn a series off and on, and the scale follows.
Bars
Printed bars on the panel, one value each. The bars are ink laid flat on the plate, never a colour and never glass; the axis is engraved into it, a groove along the zero line with the light on its lower lip and a faint rule at each tick. Columns by default, rows when the labels are long, and on display glass the ink is the display’s light.
Readout
A printed label over a value: key figures, with the unit small and the change in words.
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.
Segmented control
A row of keys in a tray with one pressed down: pick a view, a range or a mode and it applies at once. It is the kit’s selector without the lamps, with sizes, a full-width row and icon segments.
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.
Key
Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
Toast
A confirmation after an action.
Usage notes
Bar with one contrast key (New card) and a SAMPLE DATA banner · a side rail with the team, or on a phone a tab bar (#board, #list, #week) · a filter bar on the search field, two selects and a switch, with a count of what is shown · Board: five columns, each a sunk tray with a count in its head, and on Doing a lamp that lights red past its limit; a card is a raised plate with a handle, a title, a neutral tag, a due date in words, a priority lamp with its word, checklist progress and an owner avatar · drag by pointer or by touch on the handle, or by keyboard on it, with a dashed slot where it will land · on a phone one column at a time behind a five-way switcher · Card: a drawer, or a bottom sheet on a phone, with title, description, column, priority, owner, label, the date field, a checklist, comments with their time, and Archive behind an alert dialog · List: the table, sortable by any heading, under the same filters · Week: readouts for done, still open, overdue and due by Sunday, stacked bars per person, bars for cards finished each day, the overdue cards · a new card on the validation part · a key at the foot that shows the other states (?state=).