U · 21 / 26
U — Utilitarian
Labels, specs and parts that do the job.
Made to do a job, and marked so.
In 1942 Britain rationed furniture. The Utility scheme allowed a short list of plain designs, built to a standard and stamped CC41. Nothing on them was there for show, and they lasted.
Workwear and military kit took the same line further: every part carries its number, every case its contents, every switch its position. In 1981 Code 128 put that number in a barcode a scanner could read in one pass. Online, McMaster-Carr’s catalogue is the famous case: dense tables, line drawings, and hardly a photograph.
On a screen it means grey stock and black ink, condensed type for headings and monospaced type for figures, boxed fields, keys with travel, and one safety orange for what needs doing. Every figure has a unit and every state has a word.
A parts store on one screen.
Depot runs the stores at Kestrel Works. Scan parts in pick, receive or count mode, watch stock cross its minimum, filter and sort the table, and post an adjustment with a reason. The clock moves with every scan.
- 01Every number has a unit412 pcs, 74 m, 9 box. A figure without its unit is a question, and a store floor has no time for questions.
- 02Colour is a signalGrey and black carry the page. Orange marks the thing to act on, yellow is low, red is out. Nothing is coloured for looks.
- 03Dense, and still calmFourteen parts on one screen, in mono, in fixed columns. The eye runs down a column instead of hunting.
- Parts
- 14
- Below min
- 3
- Out
- 1
- Moves
- 41
No moves yet this shift. Scan a label to start.
| Description | Level | Status | |||
|---|---|---|---|---|---|
| 8.8 · zinc | A-01-3 | 412 / 200 pcs | In stock | ||
| Class 8 · zinc | A-01-4 | 860 / 300 pcs | In stock | ||
| A2 stainless | A-01-5 | 95 / 250 pcs | Low | ||
| 12.9 · black | A-02-1 | 300 / 150 pcs | In stock | ||
| 2RS · sealed | B-02-1 | 18 / 12 pcs | In stock | ||
| ZZ · shielded | B-02-2 | 0 / 8 pcs | Out | ||
| NBR 70 | B-03-6 | 140 / 100 pcs | In stock | ||
| Ceramic · 5 × 20 | C-01-2 | 36 / 50 pcs | Low | ||
| Rubber · per metre | C-04-1 | 74 / 50 m | In stock | ||
| Box of 100 | D-01-1 | 9 / 6 box | In stock | ||
| 12 mm × 12 m | D-02-3 | 22 / 10 pcs | In stock | ||
| 10 µm · spin-on | E-01-1 | 4 / 6 pcs | Low | ||
| 13 × 1092 mm | E-02-4 | 7 / 4 pcs | In stock | ||
| 400 g cartridge | E-03-2 | 31 / 12 pcs | In stock |
Every part, every state.
The parts Depot is built from: square keys that go down, boxed fields with their units, a rocker switch, a ruler slider, a ticket for a toast. Each tile holds its states still above a part that works.
KIT-01Button
KIT-02Text field
KIT-03Select
KIT-04Switch, checkbox, radio
KIT-05Slider
KIT-06Progress
KIT-07Segments and tabs
M8 × 1.25 · 30 mm · grade 8.8 · zinc clear · ISO 4017.
412 pcs in A-01-3. Minimum 200. Next count 17 Oct.
14:31 picked 6 · 13:02 received 100 · 09:40 counted 312.
KIT-08List rows
KIT-09Card and loading
KIT-10Toast
KIT-11Modal
KIT-12Steps
- Tell the operator
- 02Switch off at the panel
- 03Lock and tag the isolator
- 04Try to start: nothing
KIT-13Badges and avatars
Print a part label.
Fill in the job and the printer feeds out a label with a real Code 128 barcode, drawn bar by bar with its check symbol and quiet zones. Save it as SVG, or, where the browser can, scan it back to prove it reads.
- Symbology
- Code 128 B
- Symbols
- 11
- Check
- 7
- Modules
- 123
Narrowest bar 0.64 mm. Both quiet zones are ten bars wide. Shown to scale: the small stock is half the width.
The system, in numbers.
Ten colours with their contrast, three typefaces, a 4px grid, three line weights and three speeds. Copy them as custom properties, with the key, the tag and the field.
- --ground #e6e5e0Ground: the page
- --panel #f4f3efPanel: plates, tables, labels
- --well #d9d8d2Well: tracks, empty, off
- --rule #8d8c85Rules and ticks, never type
- --ink #121212Ink: type, keys, bars, 14.9:1
- --ink-2 #4f4f4aSecond ink: units, notes, 6.5:1
- --signal #ff5f1fSignal orange: fills only, ink on it 6.2:1
- --caution #f5c400Caution: low stock, hazard bands, ink on it 11.4:1
- --ok #2c6e35In stock, done, 4.9:1
- --stop #b3261eOut, errors, 5.2:1
- BR-6204 · 18 pcsBarlow Condensed 800 · headings, part numbers
- BR-6204 · 18 pcsBarlow 400 · text
- BR-6204 · 18 pcsJetBrains Mono 500 · figures, codes
- BR-6204 · 18 pcsJetBrains Mono 600 · labels, capitals
- 4
- 8
- 12
- 16
- 24
- 32
- 48
- 64
- Hair · 1pxTable rows, ticks
- Rule · 1pxPlates and fields, in ink
- Heavy · 3pxSection tops, the key edge
- Click80ms linearKeys go down 2px; nothing eases
- Feed1200ms steps(24)A label out of the printer
- Blink1s steps(2)The scan caret, while ready
:root {
/* Stock and ink */
--ground: #e6e5e0;
--panel: #f4f3ef;
--well: #d9d8d2;
--rule: #8d8c85;
--ink: #121212;
--ink-2: #4f4f4a;
/* Signals: fills, never words */
--signal: #ff5f1f;
--caution: #f5c400;
--ok: #2c6e35;
--stop: #b3261e;
/* Type */
--font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
--font-text: "Barlow", system-ui, sans-serif;
--font-data: "JetBrains Mono", ui-monospace, monospace;
/* Grid, lines, edges */
--u: 4px;
--line: 1px solid var(--ink);
--heavy: 3px solid var(--ink);
--radius: 2px;
/* Motion: mechanical, short, no easing */
--click: 80ms linear;
--feed: 1200ms steps(24);
}
/* The key: black, a heavy bottom edge, 2px of travel. */
.key {
min-height: 44px;
padding: 0 18px;
font: 600 12px/1 var(--font-data);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--panel);
background: var(--ink);
border: var(--line);
border-radius: var(--radius);
box-shadow: 0 3px 0 0 #000;
transition: transform var(--click), box-shadow var(--click);
}
.key:active {
transform: translateY(2px);
box-shadow: 0 1px 0 0 #000;
}
/* The tag: a spec value, boxed, in capitals. */
.tag {
padding: 2px 6px;
font: 600 11px/1.4 var(--font-data);
letter-spacing: 0.06em;
text-transform: uppercase;
border: var(--line);
}
/* The field: a box with its unit inside it. */
.field {
height: 40px;
padding: 0 10px;
font: 400 14px var(--font-data);
background: var(--panel);
border: var(--line);
border-radius: var(--radius);
}
.field:focus-visible {
outline: 2px solid var(--signal);
outline-offset: 0;
}05Do
- 01Label everything. Part numbers, bins, units and dates go on the surface, not behind a tooltip.
- 02Keep colour for state. If something is orange, someone should do something about it.
- 03Use fixed columns and a monospaced face for figures, so a 1 and a 7 line up.
- 04Make the controls physical: square keys with travel, boxed fields, switches that look thrown.
06Don’t
Don’t decorate the data
Gradient pills, an icon in every cell and rounded cards turn a parts list into a brochure.Don’t write in orange
Signal orange on grey is 2.4:1. It is a fill with black type on it, never the type itself.Don’t drop the units
Is “12” a box, a metre or a piece? On a store floor the wrong guess ships the wrong part.
07In the wild
Where the style shows up outside this page.
- REF 011970
NYC Transit Graphics Standards Manual
Unimark: Massimo Vignelli, Bob NoordaSigns reduced to what a rider needs: a coloured disc, a white line, a name. - REF 021987
ET66 calculator
Dieter Rams, Dietrich Lubs, BraunConvex keys, one accent colour for one key, nothing to work out. - REF 032006
Field Notes
Aaron Draplin, Coudal PartnersMemo books dressed like farm-supply stock: plain card, a spec list on the back. - REF 042011
OP-1
Teenage EngineeringA synthesiser in a bare aluminium slab, every control labelled and in sight.