# 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.

Template · With the Kit · https://tactileui.dev/templates/folio

> The code and styling for this template come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

- [Bar](https://tactileui.dev/parts/bar): The top of a page: a wordmark with a lamp, printed links, and one contrast key at most.
- [Lamp](https://tactileui.dev/parts/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](https://tactileui.dev/parts/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](https://tactileui.dev/parts/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](https://tactileui.dev/parts/tray): A recess cut into the plate that holds other parts: keys, a selector, an empty state waiting for its first thing.
- [Panel](https://tactileui.dev/parts/panel): A face plate that groups what belongs together: a head, a rule, then the parts. Screws only on device-like panels.
- [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
- [LCD](https://tactileui.dev/parts/lcd): A value that changes, on grey-green liquid crystal, with a ghost of the unlit segments behind it: clocks, battery, counters.
- [VFD](https://tactileui.dev/parts/vfd): A vacuum-fluorescent display: cyan-white light on near-black glass, with a glow and a ghost. Frequencies, levels, status screens.
- [Knob](https://tactileui.dev/parts/knob): A rotary control for continuous or stepped values where space is square. Its knurl and pointer turn; its light does not.
- [Needle gauge](https://tactileui.dev/parts/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](https://tactileui.dev/parts/ring): 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](https://tactileui.dev/parts/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](https://tactileui.dev/parts/ledbars): 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](https://tactileui.dev/parts/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](https://tactileui.dev/parts/rocker): A heavier on/off for power, mains and arming: a cap that pivots in a black bezel, printed | and O.
- [Fader](https://tactileui.dev/parts/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](https://tactileui.dev/parts/progress): Progress through a task: ink filling a groove, never a coloured bar.
- [Status](https://tactileui.dev/parts/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](https://tactileui.dev/parts/readout): A printed label over a value: key figures, with the unit small and the change in words.
- [Table](https://tactileui.dev/parts/table): Rows of data with printed column labels, figures right-aligned in columns, and status in lamps with words.
- [Empty state](https://tactileui.dev/parts/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](https://tactileui.dev/parts/spec): Key and value facts, printed like the plate on the back of a device.
- [List](https://tactileui.dev/parts/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](https://tactileui.dev/parts/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](https://tactileui.dev/parts/field): Text entry in a recess, the label printed above it, and a hint that says how to fix an error.
- [Select](https://tactileui.dev/parts/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](https://tactileui.dev/parts/textarea): Longer text in a deeper recess: notes, messages, descriptions. It grows by its corner handle.
- [Toast](https://tactileui.dev/parts/toast): A confirmation after an action.
- [Skeleton](https://tactileui.dev/parts/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](https://tactileui.dev/parts/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=).