UI kit

Paper for work, navy for presence, night for the control room. One action colour (accent). LEDs are device truth: never re-tinted, never decoration.

Meaning is an attribute: data-tone="ok|warn|bad|info|idle" on any tone-aware component. The tones layer maps it to --tone-fg/bg/line/surface/dot/fill; each component sets the idle quintet on itself, so a child never inherits its parent's tone.

Jost for identity and big numbers, Inter for everything read, mono for identifiers. Display 44 (clamped), page 34, title 24, section 19, lead 17, body 15, data 14, small 13, caption 12.

A 4 px step. Radius by role: control r2 (6), card and inset r3 (8), sheet r4 (12), hero and station surface r5 (16).

One name set everywhere: xs sm md lg xl 2xl 3xl. Each scale is a token (--avatar-md, --icon-lg, --led-sm …), so [data-scale="station"] on a station frame steps type, controls, icons, avatars and LEDs up at once.

Durations and curves are named by purpose. Leaving is always faster than arriving. One authored moment per surface.

Pages compose with page, stack, row, grid, split and section. split children never overflow (min-width 0); the side column goes under the main one below 1180 px.

A small closed set allowed in page markup. No literal inline styles: style="" only carries data-driven custom properties set by a kit component.

State comes from ARIA and native state, defined once in the states layer: the sheet chip on a track (aria-current, aria-pressed, :checked), the selected ring on a chosen card, the pressed pill, disabled, busy and invalid.

Lucide outlines at 1.75 stroke from one sprite. Decorative next to words; named when it stands alone.

One primary per surface; footers put the secondary first, then exactly one primary or one danger. A link that looks like a button is still a link (href).

A control shown as an icon only. It always has a name; a badge is decorative and the name carries the count.

Square + word: the default way to state a state inline. Hollow means “not yet”; live breathes while a value updates.

Badge: a state on a ground (r2, 24). Chip: a count or filter value (pill). Tag: a code or language key (mono, r1).

Identifiers never break inside. Numbers are Jost with tabular figures; the unit is smaller and quieter.

The big-number pattern: label, value with unit, one line of provenance. Meters are rows of stats.

Initials in a circle; system actors are navy with an icon. A person is avatar + name (+ role), the one recipe wherever a person appears in a row.

Device truth: the colour a bay or tower lamp shows. Blink is 500 ms, slow is 1 s, both 1:1. Paused or reduced motion turns a blink into a dashed ring.

An icon on its tone ground: dialog icons, route lists, empty states. Square (r3) or round.

Rank is an ordinal, never a severity. Source says where a value came from. Freshness and as-of say how current it is.

Custody under a permit: who may work on what, until when. An accent ring, never a status tone (a permit is not good or bad).

What ships in Neo R1 and what is parked (the owner's decision, 2026-09-28). later marks a parked surface: a solid ink pill with its clock, "Later · not in R1", in the rail's Later group, the Preview control's Later list, a Later note and the atlas. r1 is the quiet outline a list uses when it marks both. Metadata, never a tone: nothing about it is good or bad.

meta: a small icon + words in a row's meta line. cite: an Activity entry id with a copy-link button (shown when script runs). A toned icon takes the tone's foreground; the words still say it.

battery: a glyph filled to the level with the number (under 20 % bad, under 40 % warn). problemLink: status · id · why as one wrapping link. btn({ primaryOn: "phone" }): the primary look only under 560 px. chip({ wrap }): a chip whose words wrap. iconTile({ ping }): one radar pulse (stops with motion).

btn({ wrap }): a long label wraps and the button grows (a station bar at 320 px). iconBtn({ variant: "overlay", round }): a control over a picture (the camera). person(p, { size: "tile", as }): a big avatar over the name (the sign-in people grid; aria-current marks the chosen one). person(p, { as: "button", chip: true }): the person's menu button in a station head, a ringed pill with a chevron that folds to its avatar on a phone.

Label, control, then the error (server) and the hint. A client error shows only after the person has interacted (:user-invalid).

Sizes sm 36 · md 44 · lg 56 · xl 64 · code (one-time codes). Widths xs · sm · md · lg · full.

The search and scan field family: icon, input, unit, action. xl is the scan field on task pages.

Checkbox and radio rows with their words; the one switch (a checkbox with role=switch) for settings that apply at once; fieldsets group them, and can require at least one box.

One choice group of cards: radio or checkbox, with or without a drawn indicator, a tone (danger), meta, a why note, media, and a Then: line that shows only while chosen.

Words or a block that follow which radio is checked: a submit that says what the chosen answer does, a hint, or fields only one answer needs. Every case is rendered; the kit emits the :has() rules for this one choice set, so no script is involved and page CSS never lists values. A case key may name several values ('list|none').

One track, one current chip. nav: links (aria-current) · radio: native radios · submit: name/value buttons (aria-pressed) · toggle: buttons that act at once.

Short square toggles on a track: the days a rule runs on. Each is a real checkbox (a radio without multi), so the form posts its values as they are; checked wears the one selected chip. A gate asks for at least one.

Site and personal settings: the label in a 200 px column, the control (≤ 320 px, or the rest with wide) and its hint under it; ruled rows; one column under 700 px. Edited is a visible word, not a colour. The working rack as a form control is rackPick({ size: "field" }). Inputs and selects never grow past their column (max-width 100 %), so a long option cannot push a 320 px station sideways; the rack picker and the Preview button reach 44 px under a coarse pointer and on the station scale.

A GET form of pills: the URL holds the state (a link to it lands on the same results) and htmx swaps the results on change. The toolbar lines up search, chips, selects and what the list is.

The standard gates in a confirm: a reason (4–500, recorded with your name), a required acknowledgement, and a phrase typed by hand (paste blocked). The submit waits (data-gated) until they are met.

A single action that writes: a form that adds no box, posted by htmx. Without hx it swaps nothing (the answer is 204 and a toast); hx.target names the region the answer replaces.

suggest: a quick-insert word that submits ("Add to reason"). toggle: a phone Details / Less pill; its :checked reveals row parts by CSS. fileDrop: a labelled drop zone over a real file input. textarea({ count }): a stable n / max line. reasonField({ placeholder }), ackCheck({ clientError }), inputGroup({ width }), options({ layout: "line" }) with bayStrip, OptionItem.pending.

One dialog: a head (optional tone icon, h2 title, sub), a body that scrolls, a foot with the secondary first and one primary. A form dialog wraps head, body and foot in a display: contents form. open renders data-modal="open" (never the open attribute): app.js shows it modally on load and after a swap.

The same dialog from the right edge (560 or 760 px): alerts, a record beside the list, a long editor. It travels in and leaves faster.

A decision with a consequence: tone icon, what it does (consequences), then the gates it needs (reason, typed phrase, acknowledgement). No × button; the safe choice has focus; the submit waits until the gates are met.

A popover menu of links, dialog openers, menuitemcheckbox toggles that post, and plain buttons the page acts on (hold to exit). The account menu in the top bar is one. size: "station" is the glove-sized menu of a station head or thumb bar: items at the station control height, the sub line under the label, and it opens above its button when there is no room below. An item that runs a flow in place closes its menu (app.js).

A short hint (popover=hint) for a control that already has a name: icon-rail labels, what an LED means. Never the only place a meaning lives.

Confirms what happened, on navy, bottom right, at most 3. ok and info leave after 4 s, warn after 7 s, bad stays until dismissed. A toast never replaces a receipt or a Then: line.

The shell’s own overlays: the palette (⌘K, Ctrl K or “/”) finds records, actions and pages; a scanner burst anywhere opens the scan sheet with what the code is and the one next step.

The prototype's own tools, out of every page's layout: one floating button bottom-right opens one panel with what the page registers. Its Preview states (R1, then Later with each Neo source), Simulate (what the page registered with demoBar() or a station's plays, moved here by the script), View as (the people it is designed for, ?as=) and This page (purpose, release, first-viewport budget). A section with nothing in it is not drawn. The button stays fully visible above a bar the page docks at the bottom; inside a page's own dialog with a registered simulation it rides in that dialog. Never ported.

The white surface: a hairline, 12 px radius and a resting shadow. A head, body and foot when it holds a titled group; a tone tints surface and border.

The 8 px sunk panel inside a sheet or dialog: before/after boxes, a step-up, a range, a code well.

A titled band of a page. The head carries a title, a meta line and actions; bands are separated by a hairline. Level 3 for sub-bands.

Every entity row family: fleet, candidates, inbox, returns, queue, results, settings rows. One row recipe with lead, title + sub, meta, aside and actions; the grid template (cols) is the only per-page variation. Under 640 px of its own width the meta wraps under the title and actions go to the end.

Tabular data in a named, focusable scroll region. Numbers align right in head and cells; sortable heads carry aria-sort and a link. Group rows are one th across the columns. stack turns rows into cards under 640 px, using each cell's data-label.

Key/value: spec is the dt/dd list (cols: key column + value; rows: ruled rows with values at the end). facts is label-over-value in a grid, with an optional second line and provenance.

The hairline-ruled strip of readings, each a stat with its key and provenance. The only metric pattern: never a KPI card mosaic.

One bar/track recipe: a fill; stacked segments (with the pattern language: unknown = grey hatch, diff = amber hatch, draft = not final yet, outline = waiting, short = red outline); placed ranges on a scale; ticks for need, minimum, now or today.

One timeline for the audit trail, the ledger and the shift lane: mono time, a pip on a line, then the body. A square pip is a step Janus decided, a round pip one a sensor confirmed, a ring one still open.

One stepper: an ordered list with the current step aria-current="step" and a screen-reader word for done, needs attention and skipped. Horizontal bars, numbered, or a vertical path; horizontal steps keep only the current step's words when narrow.

Native details with one chevron. Plain rows, a compact line (technical details), a sheet card with an aside in the summary, or a ghost-button trigger. Versions: who changed a setting, and a way back that makes a new version.

Facets: one physical fact and the places it shows, dot-separated. thenLine: the consequence before commit. statusLine: the "safe line", a square, a bold lead and a sentence; a live line is in the page (empty) before it speaks.

Callout: an inline question or note with its actions (rack mismatch, ask for a right, locked until known, dispatch, supervisor deciding, draft note). Notice: a tinted surface with an icon, a 650 title and a body; spacing comes from the parent stack. Under 560 px its trailing actions drop under the words, aligned with them.

The compact context line in a page head's actions: what you are looking at, what stays as it is, and at most one action ("Viewing SR-02 · working rack stays SR-01 · Make working rack"). Quieter than a notice: no tone, one line, 44 px.

sideNav items can open a dialog (opens) or be listed but not pickable (disabled). actionbar({ attached }) sits flat on its sheet. codeBlock(text | Markup, { copied }) marks parts and says its own copy words. secret({ countdownLabel }) names its timer ("Hides in 28 s"). steps({ orientation: "v", collapse: "h" }) becomes a scrolling row on phones; steps({ keepLabels }) keeps every label in narrow containers. table({ stack }) cells take data-col="status|meta" roles on phones; tr[aria-current] wears the selected look.

POST /sap/orders 422
E_MATNR unknown: PN-0603-10K

A 72 px row that is one link or button: an icon tile, a title, a sub line that wraps, a chevron (station "More options", the handheld lists). Stack them.

A glove-scale start tile that is one link or button: an icon, a big title, a sub line and an aside chip (the LED colour the flow lights). The station home's "Put in" and "Take out". 80 px tall, 88 px on the station scale; the title follows the step-title token.

The one thing to do now, set above or beside the rest of a list: an accent ring, an optional eyebrow (status … act by), the title, a lead, a big figure (a number with its unit and label, or a figure of your own such as a bay address) with meta beside or under it, and one action on the right. Under 560 px of card the action drops under the words and fills the width. A tone rings it only when the card itself is the warning; the status word carries lateness.

bulletList: sentences, each led by an 8 px tone square (what needs attention, coverage gaps, what a decision closed). iconList: rules and guards, each led by an icon. One or two columns (one under 700 px); ruled adds hairlines above and below.

Empty: an honest empty state with one way forward (inline for "none in this view"). Skeleton: a shimmer that stops when motion is reduced or paused; the label is plain text and announce() says when loading ends.

A parked surface says so first: what it is, why Neo R1 leaves it out (the Neo source, cited) and what R1 does instead, with the way there. Parked means kept, not deleted (the owner's decision, 2026-09-28). The shell renders it under the head of every parked page and parked Preview state (park(id, later) in the page's routes, later on a Preview state); a page renders it compact where an R1 page keeps a parked part. A note on the quiet surface with the ink release rule down its edge: out of scope, not wrong, so never a warn tone, a hatch or a dash. Links inside it are the one sanctioned way from an R1 page into a parked one (tests/parking.spec.ts).

After a write: a stamp (square or icon + outcome word), an optional lead sentence, By / Confirmed by / Reference, everything it closed, actions and technical details. Nested in a sheet, inset or dialog it drops its shadow. With focus it takes focus after the write.

One key for racks, bars and diagrams. Swatch specs follow the pattern language: dashed = Unknown, amber hatch = a Difference; a lit bay is its LED colour with a ring.

The action bar is the one recipe for drafts, bulk actions and stop bars: pinned to the bottom (it floats, so it carries the float shadow) or in the flow. changeList is the one review-of-changes presentation: ruled rows or a table, grouped by area; change() is one inline was → now for a table cell or a sentence.

Data blocks: a mono well that scrolls (with Copy), an export file list with sizes and checksums, a value shown once with a visible time limit, a pairing code, and may/never lists.

{
  "event": "reel.stored",
  "reel": "R-2026-0042",
  "bay": "SR-01-T3-L14",
  "by": "marta.kovacs",
  "confirmedBy": "sensor:T3-L14",
  "at": "2026-09-24T14:31:07+02:00"
}

crumbs only on a page about one thing, above its h1. viewNav is level 1 (underlined page tabs, directly under the head). tabs is level 2 inside a page (the segmented track; links, or radios that switch panels in CSS). sideNav lists views of one thing; navList is a route list with icon tiles; pager moves through pages of a list.

The one page head: crumbs above the h1 on a page about one thing, the page's explanation beside the title (K6: an ⓘ that opens a popover, or with panel the page help panel, a drawer), a badge (a status, never a session fact: View only and Support session are the top bar's), one sub-line that states something true now (a count, a state, a scope), a meta row, and the page actions on the right. The h1 names the section or the thing and stays the same on every tab; page tabs follow it.

Every desk page: .page → the head → the body region. The head is always the frame's first child (the shell puts the section tabs and a Later note right after it), .page takes no stack classes, sections space themselves, and a write or a live update swaps the region below the head, never the frame.

A list of one kind of record: the head (a count or scope, and the one create or import primary, which opens a drawer), level-2 views, one row of filters (filterBar(): search, one row of chips, the rest behind More filters, the count), then the results, open rows before final ones. The filter bar is one GET form: a chip or a field swaps the results and keeps the URL. On a phone the chips and More filters fold behind one Filters button, so the bar stays one row.

Work that needs a person, ranked by what they act on next, then severity, then scope: the head (the queue in one line), the lenses, ranked groups of two-line rows (a row opens its drawer; its action is secondary unless the row is the focus), then the done list folded. A healthy group compresses to one counted line.

One thing: crumbs back to its index, an h1 of its id and name, .meta([state, place]) with ids in Technical details, one primary among the actions → one summary strip → its sections in working order → related (a pager, not a second queue) → "What happened" last, folded.

Titled groups of setting rows: a label, its control, one hint (an explanation goes behind the group's ⓘ, never a row's prose); edited rows are marked; one save for the whole draft (the draft bar). A person who may not change it sees the values as spec rows, not disabled controls. Policies is the reference.

Commissioning, recovery, the site transition, first start and imports: only the current step is expanded, later steps are one status line each in the stepper, done steps rest as receipts, and the step title takes focus when the step changes. At desk the stepper is a rail beside the step; on a phone a strip above it.

Main plus a side column (layout classes). The side is 300, 380 or 460 px; left puts it first. It stacks at 1180 px (right) or 900 px (left).

The station two-pane task surface (bench, stage, dock): a large stage and a sunk side pane in one r5 frame. 7fr/5fr, a 340 px side, or half and half; the side can come first or hide while choosing. It stacks at 1100 px.

A sticky master list beside the selected item (rule list, parts, access levels, stored data). 300 px list by default (240 or 340); it stacks at 900 px.

After a write: the sentence and the next steps beside the receipt, with one receipt width (360 px). It stacks at 900 px.

Denied: a missing right, who can give it, one request, technical details and places you can go (replaces the copied .denied/.dn-go). Lost: no page at this address, the address asked for, a search, the closest match and where you usually go.

One step of a guided flow (setup, provisioning, import): an eyebrow ("Step 2 of 6"), the title, a lead, the body and the step actions (primary next, ghost back). The title takes focus when the step changes.

The station step heading of a bench pane (brand type, fluid size). It takes focus after a swap (tabindex=-1; give data-focus). PageHeader: .sub(text, { phone: 'hide' }) drops the sub under 560 px; .focus('load') focuses the h1 on a page a write navigated to. workbench({ minHeight: false }) lets the main pane take its content's height; outcome() splits by its own width (container query).

Scan the reel label

Put it in SR-01-T3-L14

A rack drawn as tiers × bays wherever a location is named. Every former per-page --cell override, regex rewrite and JS fit is a prop: size presets, one container-query fit formula, elevation, ruler, labels, per-bay attributes, marked vs lit, caution and settle. Towers lie in a strip along the top edge, at their side (a lamp capsule, never a column above the rack), and scale with the cells; at thumb a tower folds to one dot, the lit lamp.