Forms
Input sizing, labels, focus, error, and disabled states.
Sizing#
| Size | Height |
|---|---|
| sm | 32px |
| md | 40px — the default |
| lg | 48px |
All inputs are set in Source Sans 3 at 14px.
Sizes — sm 32 · md 40 · lg 48
Small
Medium
Large
States#
| State | Treatment |
|---|---|
| Default | 1.5px --border on --surface |
| Focus | Accent border + 3px --tint-accent-active halo |
| Error | Danger border, danger tint, and matching danger foreground |
| Disabled | --surface-2, muted text, semantic border, cursor: not-allowed |
Every state
Default
Focus
ErrorDescribe the problem in words.
Disabled
Labels#
Labels use the overline style and sit above the field. Floating labels are not used anywhere in the system — they hide the label at exactly the moment the user is filling the field, and they break at long label lengths.
.field__label {
font-size: 12px;
font-weight: 600;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-secondary);
}Validation#
- Error text sits below the field in the appearance’s danger foreground.
- Never rely on border colour alone to signal an error — pair it with text.
- Validate on blur, not on every keystroke; re-validate on submit.
Do
Keep labels visible at all times. Give every field an associated <label> and
describe errors in words.
Don't
Use placeholder text as a label, signal errors with colour alone, or disable the submit button without explaining what is missing.