Bar
The top of a page: a wordmark with a lamp, printed links, and one contrast key at most.
Templates
Portfolio · Maas & Veld
A design studio’s portfolio as a museum case: eight things the studio made, each built from kit parts, standing on two shelves with printed labels, a register below, and a case study for each with the object live on a stage. Loading, empty-case, error and commissions-closed states included.
On this page
Anatomy
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.
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.
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.
Tray
A recess cut into the plate that holds other parts: keys, a selector, an empty state waiting for its first thing.
Panel
A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.
Key
Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
LCD
A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.
VFD
A vacuum-fluorescent display: cyan-white light on near-black glass, with a glow and a ghost. Frequencies, levels, status screens.
Knob
A rotary control for continuous or stepped values where space is square. Its knurl and pointer turn; its light does not.
Needle gauge
A moving-coil panel meter: a printed scale under glass, a thin needle that swings past the mark and settles, a lamp for the bands and a small LCD for the exact reading.
Ring meter
The kit’s donut chart as an instrument: a ring of lamps behind dark glass in a spun bezel, lit clockwise from twelve like a studio clock’s seconds, with the value in lit digits in the middle.
LED matrix
A dot-matrix display of round LEDs behind smoked acrylic, each with its own bloom and a short warm-up and fade.
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.
Lamp heatmap
A heatmap as a matrix of small panel lamps set into the plate: each lamp’s brightness is the value, off to full in four steps, with a printed legend. Deploys per day over a year, incidents by hour of the week, energy by the hour.
Rocker
A heavier on/off for power, mains and arming: a cap that pivots in a black bezel, printed | and O.
Fader
A continuous value along a line: a native range whose cap rides in a slot cut into the plate, with a printed scale.
Progress
Progress through a task: ink filling a groove, never a coloured bar.
Status
A lamp with words: the state line in tables, panel heads and lists. The words carry the meaning; the lamp is the glance.
Readout
A printed label over a value: key figures, with the unit small and the change in words.
Table
Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.
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.
Spec list
Key and value facts, printed like the plate on the back of a device.
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.
Radio
One choice from a short list in a form: small round keys in a fieldset, the chosen one pressed with a printed dot.
Field
Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
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.
Text area
Longer text in a deeper recess: notes, messages, descriptions. It grows by its corner handle.
Toast
A confirmation after an action.
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.
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.
Usage notes
Bar · a title page with a display thesis and the studio as a coin stack · one deep tray as a museum case: two shelves of objects built from parts, each with a printed label · the register as a sortable table with a discipline selector and a year knob with named detents · a work: display name beside a label plate, the object live on a stage, four states in trays, three readouts, credits, previous and next · a commission panel · a key at the foot that shows the other states (?state=).