Elements

Forms

All form inputs are defined in wireframe.css and pick up the system tokens. Inputs are stacked with --space-form-row between them; focus shows a 2px accent ring. Click into anything below to see it live.

Field types
Text inputs
Optional helper text · 11px mono
Selection
Controls
Off
On
Slider, single handle65%
Range, dual handle$50 to $350
label: 13px 500 · input/select/textarea: 14px body, border --line, focus adds --accent border + box-shadow, --space-form-row bottom margin · select: custom chevron caret · checkbox/radio: 14×14, accent-color: --accent, zero margin · .check-row: flex row + --space-xs gap for inline checkbox/radio + label · .toggle / .toggle.on: 32×18 pill switch
Focus state

Focus = border-color: var(--accent) + box-shadow: 0 0 0 2px rgba(42,102,200,.1). Applied to every input, select, and textarea.

Buttons and links also get a separate :focus-visible outline ring. See Buttons. The two work together so every interactive element shows a clear keyboard focus state.