Input
Form inputs use a line-style, three-state outline. The default border is a thin line (--c-line-default); on hover it shifts to ink-deep full color, and on focus to primary. Border weight changes are handled via box-shadow: inset so there is no layout shift. All color values come from a single source: app/_v2/tokens.css.
Default
A label–input pair. Hover or click to see the hover and focus transitions live. Radius 12px (--r-md), font size 16px, padding 12 16.
States
All three states — default, hover, and focus — at a glance. Hover and focus change the 1px border color and layer an inset 1px shadow on top to add visual weight. The border itself stays 1px, so the input size never changes.
Field Types
The same line system applies consistently to text inputs, selects, and textareas. Selects (comboboxes) display a ⌄ chevron on the right to indicate a dropdown, and use --c-sky for the focus outline to distinguish them from text inputs. Helper text sits below the input at 13px / grey.
Keep it under 200 characters.
On Dark Surfaces
When placing inputs on a dark background — such as an ink-deep section band — use the inverted line tokens: default --c-line-default-inverted, hover --c-line-hover-inverted, focus --c-line-focus-inverted (sky). This example is always dark regardless of the light/dark mode toggle.
Spec
Border and shadow values per state. The border is fixed at 1px to prevent layout shift; visual weight is always added via box-shadow: inset only.
| State | Light background | Dark surface (inverted) |
|---|---|---|
| default | 1px var(--c-line-default) | 1px var(--c-line-default-inverted) |
| hover | 1px var(--c-line-hover) + inset 1px | 1px var(--c-line-hover-inverted) + inset 1px |
| focus | 1px var(--c-line-focus) + inset 1px | 1px var(--c-line-focus-inverted) + inset 1px |
| common | Radius 12 (--r-md) · Padding 12 16 · Font 16 | Background literal #0A1E33 (theme-locked) |