green

shipped

a case study that went live

amber

in development

a build still in progress

Every status string in the content is drawn from this column. Playground entries carry none: every piece there is live, so a light would say nothing.

two classes

.focus-ring for site chrome, .focus-ring-stage for anything painting on a prototype stage. Nothing else. There used to be three treatments chosen per component.

two-step ring

A ring of the ground color, then a ring of --ring outside it. The gap is drawn rather than offset, so it reads the same on a card, a page, and a colored stage.

never removed

outline: none only ever appears together with the replacement ring, so a keyboard user is never left without one.

baseline

Anything that opts out still gets the global :focus-visible outline. The floor is never nothing.

rest

The first word is home. It renders on the server, and every hover returns to it — the sentence never drifts from what it says at rest.

hover

In shows the next alternate in the set, out jumbles back. A word with several alternates reveals a new one every time.

no chrome

Nothing marks the word. No underline, no color shift, no cursor change — it is found by moving across it.

slot

Sized to the longest word in the set and held there, so a shorter word can never pull the copy behind it up a line.

touch

No hover to leave, so a tap steps through the whole set instead — the resting word included.

reduced motion

The word swaps in place with no churn. Same content, no animation.

assistive tech

The churning letters are aria-hidden; a stable copy of the settled word sits alongside them.

presets

Whole states as preview tiles, chosen by eye. They lead the panel, since one tap is the fastest way into a piece on a phone. None is selected once the state is tuned off every preset.

tabs

Pick one of two to five short options: a finish, a mode, a camera view, a panel page. The pill slides to the choice; arrow keys move it.

switch

A single on/off. The whole row is the target, label left, switch right.

slider

Label left, live readout right, the track filling with the accent up to a round thumb (20px, 28px on touch). Horizontal drags move it, vertical ones scroll the panel.

swatches

A color from a set. The selected one carries an inset ring.

select

Only for a list too long or too wordy for tabs, six options and up.

chip

An action, never a state: share, save, reset. Choosing is tabs; toggling is a switch.

group

A titled section behind a hairline.

Most visitors play on a phone, so every target grows to 44px on touch. A prototype that needs a new kind of control adds it here first.

one grid

Canvas, readout and panel are tracks of .stage-grid, so a canvas sizes to its own track and runs edge to edge. Nothing ever covers the canvas edge.

the rail

On a wide screen the divider is a rail down the panel's left edge: drag to resize (remembered per piece), click to collapse.

the sheet

Below sm the panel is a sheet that rests at collapsed, half (the default) or full. Drag the header and it snaps to the nearest, flick it up for full, tap to collapse. Full is the one height that covers the canvas.

readout

Under the canvas on a wide screen, above it as one line on a phone.

the bar

A prototype route has no intro page. The 44px bar carries back, number, title, info, versions, status, next and theme, so the stage keeps the viewport.