Bar
The top of a page: a wordmark with a lamp, printed links, and one contrast key at most.
Templates
Case-study portfolio · Casebook
The portfolio of a small independent studio, as a site it could publish tomorrow, on a Quiet page: an index of case studies as plates with a flat drawing for a cover, filters by kind of work and by year with counts that agree with the list, and one line of outcome with a real figure for each. A case study is a long read with a fixed outline beside it that follows you down the page (a jump menu on a phone): the brief, the constraint, what was made, before and after figures drawn as bars, a quote from the client, the credits and the next case. An About and contact page has the two people, what they take on and an enquiry form that validates and sends nothing. Loading, empty, error and booked-up 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.
Breadcrumb
The trail of levels above this page, printed across the top like the path an instrument shows over its menu screen: SETTINGS › BILLING › INVOICES. The levels above are in the second ink, the one you are on in full ink, with small engraved chevrons between. When the line is too short, the middle folds into a … key that opens a menu.
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.
Chip group
Small plates you press on and off, laid in a tray that wraps: the filters over a table, the topics on a form, the sizes on a product. Each chip is a native checkbox, or a radio when only one may be down, drawn as a small cap that sinks below the tray with its lamp lit. A limit may be set on how many go down at once.
Tag
A small printed plate: a type, a count, a badge. Solid for the one tag that must stand out.
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.
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.
Spec list
Key and value facts, printed like the plate on the back of a device.
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.
Field
Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
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.
Text area
Longer text in a deeper recess: notes, messages, descriptions. It grows by its corner handle.
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.
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.
Key
Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
Link
Printed type that goes somewhere. The words stay in ink and the rule under them is engraved into the plate: cut darker when you hover, deeper when you press.
Toast
A confirmation after an action.
Usage notes
Banner that says SAMPLE DATA · Bar with the studio name and two places (Work, About and contact) · Work: one sentence about the studio, two chip groups (kind of work, year) whose counts are what you would see if you chose each, a status line that says how many are showing, and a list of plates: a flat drawing let into a well, the kind and year as a tag, client and project, and one outcome line with its figure · a case study: breadcrumb, headline and outcome, facts, then the side part as a fixed outline that lights the section being read (a select that jumps on a phone) beside sections for the brief, the constraint, what was made, the figures (row bars, before and after, the after hatched and said in words), a quote, the credits on the spec part and a plate for the next case · About and contact: two people on panels, three kinds of work with their usual length, and an enquiry form on the validation part (name, email, budget band, message) that ends in a sent state · Volume and finish at the foot · a key at the foot that shows the other states (?state=).