Input Lab

The lead candidate. Canvas fill, quiet default rim, and the soft inner shadow the top-bar search already uses — the field reads as a slot cut into the card while the button beside it stands proud.

The same recess with the rim removed. Proves how much of the silhouette the shadow alone can carry — clean on dark, nearly invisible on light.

Full recess. Unmistakably editable, and heavy enough that a form of eight fields starts to look pitted.

The deepest fill under the deepest shadow. The strongest "type here" signal available; check the light panel before believing it.

Fill and shadow agree: a top-dark gradient under a soft inner shadow. The literal inverse of the button face, and the most physically coherent option on the page.

The recess gradient with no outline at all. Softest of the wells — a good default if the form is long.

A single inset line under the top edge. The lightest recess that still survives the light theme, where deeper wells turn to mud.

An even inner shadow all the way round — glass set into a bezel. Too much for a form; right for one hero field (a command bar, a big search).

The shipped rim over a soft well. Shows exactly how much the loud neutral-600 rim fights the recess it now sits on.

A soft well with a machined highlight on the top edge. The extra hairline is what stops a dark well from looking like a printing error.

The quietest bordered field. Eight of these stacked read as a list, not as eight objects.

What ships as of 2026-08-23, live in `.field-paint`. The rim every card and divider already uses, so fields became part of the page rather than things sitting on it, and the FILL step does the separating. Paint only — heights were deliberately left alone, so no screen shifted density. Two documented exceptions: selection controls keep the louder rim, and the disclosure stayed a bare glyph (see G6).

One step up from default. The most rim you can spend before the field starts to outrank its own value.

The before-picture. Canvas fill, neutral-600 rim, no depth: the rim was the loudest thing in the panel while the fill did nothing, so a closed control read as an empty outline floating on the card. Superseded by B11.

Drop the fill a step instead of raising the rim. Same separation, far less line noise.

The gentlest step down from the card. On light this is the classic off-white field.

Field and card share a fill; only the rim separates them. Correct inside an already-dark panel, ambiguous everywhere else.

The field sits ABOVE the card. Reads as a control to press, not a slot to fill — useful for selects, wrong for text.

The neutral chip fill. Note it flips direction between themes — a lift on dark, a recess on light — which is either a feature or a bug depending on the screen.

The default rim pulled a quarter toward brand. Warms a cold form without spending the focus colour.

A translucent lift instead of a fixed step, so the same recipe works on a card, in a popover, and over a map. The most portable field on the page.

The portable wash with one inset line to stop it reading as a hover state that got stuck.

Pure depth by fill. Beautiful on dark, and the single riskiest option on light, where sunken is a mid grey.

Only works when the field sits on surface or higher. Inside a canvas-coloured panel it disappears completely — worth seeing.

Fill plus recess with no outline anywhere. The quietest field here that still reads as a field.

A lifted fill with a highlight along the top edge and no rim. Reads as an object, not a hole.

The production Secondary button, wholesale: its gradient, its rim, its shadow. Maximum cohesion with the button row — and now the select and the Reset button are indistinguishable, which is the real cost.

The chip with the operable rim. Keeps the field distinguishable from the buttons beside it while sharing the surface.

Gradient and shadow only. The softest chip; good for a read-mostly filter bar.

A flat lifted fill with a small cast shadow. Floats over busy backgrounds — the map overlays are the case for this.

A full card shadow on a field. Almost always too much; here so the ceiling is visible.

Deliberately inconsistent: the button paint on a select, so only the OPENABLE controls look raised and typed fields stay recessed. Compare the two rows below carefully.

Bottom rule only, no fill. The cheapest way to fit an editable value into running text or a tight table.

The same, dropped to the quiet rim so a column of them does not read as ruled paper.

The Material pattern: a muted fill with a rule under it, square on top, rounded at the top corners.

A near-invisible rule at rest that becomes a 2px brand rule on focus. Highest signal-to-ink ratio here.

No rim, no fill, no shadow — the value alone until you hover it. For inline editing inside a table cell, where a visible box per cell would be unreadable.

A recessed strip with a rule. Half underline, half well — reads as a slot without drawing a box.

A deliberate heavyweight outline on a transparent fill. Reads at a distance — the tablet and in-vehicle case — and is far too loud in a dense panel.

The operable rim at full weight over a canvas fill. Where a field must survive a photo or map behind it.

A warm heavy rim. Good for a single primary field (the query name) when everything else stays quiet.

An outer rim plus an inner hairline in the fill colour. Machined, precise, and only affordable once per screen.

The brand rim at rest, not just on focus. Shows why a resting brand outline destroys the focus signal — every field looks focused.

A heavy rim over a recess. The two treatments fight; included because the combination looks reasonable in a spec and wrong on screen.

The shipped disclosure: a bare glyph inside the field at fg-subtle. Shown here on the well base so only the disclosure varies across this family. The open question it leaves is real — the glyph is quieter than the placeholder beside it — but every louder answer below costs more than it returns.

One step brighter, matching the value text. The smallest possible fix to the screenshot.

The glyph at full foreground. Strongest affordance, and a lot of contrast to spend on a marker.

Brand disclosure. Instantly openable, and it competes with the real brand action ("Save query") on the same panel.

A full-height divider before the glyph — the native select silhouette. The end of the field becomes unmistakably a button.

Shipped 2026-08-23 and pulled back the same day. On paper it is the clearest statement of "typed value here, trigger there"; in the product it reads as a SPLIT BUTTON, so the eye hunts for two separate actions on a control that has one target. Giving the arrow its own rim and its own raised surface promotes a marker into a button. Kept as the record of why the glyph stays bare.

A small centred tile behind the glyph instead of a full-height cap. Marks the trigger while leaving the silhouette clean.

Body-small, medium weight, sentence case. Scans fastest in a one-column form.

The house eyebrow role: tiny bold caps, wide tracking. Compresses the label into chrome so the VALUE is the loudest thing in the row.

A fixed left column, so every control starts on the same x — the alignment DESIGN.md Rule 6 asks for. Costs horizontal room, which a two-up criteria row cannot always spare.

Label tucked into the top of the field. Halves the vertical rhythm of a dense panel; needs a 56px field and cannot coexist with a placeholder.

Placeholder one step brighter than the token. Easier to read — and an empty field now looks full, which is the trade.

The disabled foreground as a placeholder. Maximum "no value yet", real legibility risk on light.

Muted mixed into the fill, so the placeholder tracks whatever surface the field lands on instead of holding a fixed step.

Grid density, matching the sm Button so a filter row lands on one 32px baseline.

The in-between step. Comfortable in a panel without eating a form's vertical budget.

Shipped, and the height of the default Button. The safe default for a real form.

Same height, one radius step softer. 4px corners read friendlier and slightly less technical than the house 2px.

Dense but rounded — where a compact field must not look sharper than the chips beside it.

Touch scale, for the tablet and in-vehicle surfaces: body-size text and generous padding.

The focus ring that ships today: the focus border plus a 2px halo in the dedicated token. Quiet — on dark, amber-950 against neutral-950 is very nearly invisible, which is the bug worth confirming here.

The same ring mixed from brand. One obvious colour in both themes; an amber ring on light is the price.

Focus recolours the rim and nothing else. Zero layout noise; fails when the resting rim is already strong.

The brand glow shadow. Unmissable on dark; on light it reads as a smudge — the reason both panels exist.

A canvas gap then a solid ring — the exact focus-visible treatment the production Button ships. Pick this if fields and buttons must focus identically.

Focus paints a brand hairline INSIDE the rim, so the field never grows by a pixel. The only option that cannot disturb a tight grid.

Danger rim, fill untouched. The restrained version — pairs with a message below the field.

Danger rim over the danger-subtle fill. Impossible to miss in a long form; heavy if three fields fail at once.

The soft-fail rim — "this will match nothing", not "this is wrong". Distinct from danger at a glance.

A success rim after a check passes. Use sparingly — a form of green fields is as noisy as a form of red ones.

The whole control at the disabled opacity, hover suppressed. Confirm it still reads as a field and not as a rendering failure.

Not editable, but not broken: fill drops to the card, the rim goes subtle, the value stays at full contrast. The distinction from disabled is the point.