Input types — text, select, textarea
The three input controls forms actually need. All share the same chrome (rounded corners, hairline border, anchor-ink text), so a stacked form reads as one rhythm rather than three different fields.
Form states — default, focus, error, disabled
Each state of a single text input, side by side. Focus rings inset to keep the input's footprint stable; error swaps the ring to danger red and surfaces a specific message beneath.
Form rules — label, never placeholder
Three constraints behind form layout. The label-above-helper-below rhythm and the inset focus ring are what stop forms from drifting into a different visual family across the site.
- Label above field, helper below; never placeholder-as-label.
- Focus state is inset 2px peak - not the universal outer ring (forms beat the default).
- Error copy stays specific. "Invalid" is not an error message.