Main Character

Input

A single-line field: a --bg-muted well with a --border-default hairline that turns --border-accent on focus. There is no focus ring and no glow; the border is the whole signal. The app's inputs take the type around them (the 17px body serif); settings and the first-run wizard set their own.

App inputs

One shape in four heights: the default (padding-led, about 2.9rem at body size), .input-sm 2.4rem for filters, .input-xs 2.2rem for edit rows and .input-2xs 2rem for the batch bar and group forms. The two smallest drop to --radius-base.

Form fields

field is the settings control: a 2.5rem serif field at 1rem with the 4px literal radius settings keeps, up to 22rem wide, and a disabled state at 55%. wizard is the first-run card's: the UI face at --font-base, --radius-sm, spacing from the scale.

Anatomy

input[type=text | password | search | number]
  [.input-sm | .input-xs | .input-2xs]
.set-control input       settings field
#wizard-body input       first-run field

well

--bg-muted fill, --border-default hairline, --radius-lg (sm and md) or --radius-base (xs, 2xs). Full width of its column.

value

--text-default, line-height 1.6. The type is inherited, so an input reads like the prose around it.

placeholder

--text-muted at 70%, ending in an ellipsis when it invites typing.

focus

The border turns --border-accent. No outline: inputs are the one control that never gets the focus ring.

disabled

The settings field only: 55% with a not-allowed cursor. Elsewhere a field that can't be used is hidden.

Tokens

Fill --bg-muted; rule --border-default, focus --border-accent; value --text-default; placeholder --text-muted; radius --radius-lg, --radius-base, --radius-sm. In Figma: one Input set, size × state, with a value text property (the placeholder in the empty state).