Foundations

Surfaces

Three depths only. Sunken carries the canvas and the device dock; raised is surface plus elevation, never a different colour.

Ink

Measured against app background #F5F7F8 — the worst case in the product. Every ink that carries a word clears WCAG AA at 12px; ink-disabled is deliberately below it and is never allowed to hold text.

Lines

Primary accent

Electric blue is the agent's colour: actions it offers, tools it registers, targets it points at.

Secondary accent

Teal always means expected — the correct pin, the reference view, the position the servo should reach.

Status

Each status is always paired with an icon and a word. Colour never carries the meaning alone.

Surface stack in context

The whole product is built from these four layers. Anything that looks like a fifth layer is elevation, not a new colour.

Roles

A cable is always solid, however badly it is connected — a dash means there is nothing physically there. So a mismatch is never told by the stroke: the wire keeps its colour while every other one drains to grey, and the callout and pin marks say the rest.

Desaturated check

The same specimens with all colour removed. Cables stay separable from annotations — solid with a plug on each end against a bare dashed line — and power stays separable from ground by weight. Which cable is wrong is not a stroke property and never was: it is carried by the callout, the two pin marks, and the grey every other wire falls to.

Geist — interface

Headings stop at 30px. This is a working tool: a headline that fills the viewport would push the actual product below the fold.

IBM Plex Mono — technical values

Anything the board reports or the sketch defines renders in mono with tabular figures, so a changing distance readout never shifts its neighbours.

Mixed in context

The pairing exists so a pin reference is recognisable mid-sentence without bold, colour or quotes.

4px scale

Everything in the product snaps to this scale. Values above 48px only appear as page-level separation, never inside a panel.

Fixed frames

The workbench is a four-zone instrument panel, so its regions are fixed rather than fluid. Only the canvas absorbs the remaining width.

Workbench frame at 1440×900

Scaled proxy of Batch 7's four-zone layout, drawn from the same tokens. The canvas keeps 764px at 1440 and 604px at 1280 — enough for the board, breadboard and servo without scrolling.

Breakpoints

Radius

Surfaces sit at 10–14px. Interactive controls — buttons, badges, chips, segments — are full capsules, so shape alone separates “something to press” from “something to read”.

Elevation

Three levels, all cool-grey and low-opacity. No glow, no coloured shadow except under the primary button.

Inner layers

Active states add a second layer inside the surface instead of changing its colour wholesale. This keeps a selected row readable when it sits next to a coloured wire.

Raised primary

The primary action lifts off the surface with a tinted shadow rather than a gradient — the one place the product allows a coloured shadow. Buttons are capsules (direction A).

Preference

Every animated component reads this. When reduced motion is on, states still change — they just change immediately.

Durations

150–350ms. Nothing in the product animates longer than the time it takes to read the label that changed.

Easing

Motion vocabulary

Five behaviours, defined once as keyframes. Components compose them; they never invent new ones.

Stroke weight

Lucide ships at stroke-width 2. Against Geist at 13–14px that reads heavy and slightly toy-like, so the product standardises on 1.75.

Sizes

Icons sit on the text baseline with a 6px gap and never shrink below 14px. Icon-only controls always carry an aria-label.

Working set

A deliberately small vocabulary. New icons get added only when an existing one would mislead.

One ring

Press Tab through this row. Every interactive element in the product uses the same 2px accent ring at 2px offset — no per-component variation, no ring suppressed for aesthetics.

On coloured ground

The ring keeps a white inner halo when it lands on an accent or status surface, so it never disappears into its own background.

Hit area

Minimum 40px for dense panel controls, 44px for anything primary. Small glyphs get padding, not a smaller target.

Brand record

Rename the product by editing one object. Nothing downstream hardcodes the name.

Copy namespaces

Screens import one namespace each. Strings that appear in more than one place — status labels, agent actions — live in a shared group so they can never drift.

Voice

Short, factual, second person. The product states what it observed and what it expects; it never congratulates the user for existing, and never claims a capability it does not have.