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 13px.
Sizes — sm 32 · md 40 · lg 48
Small
Medium
Large
States
| State | Treatment |
|---|---|
| Default | slate-7 border |
| Focus | midnight-9 border + 2px focus ring, midnight at 15% alpha, 2px offset |
| Error | orange-9 border + orange-1 background |
| Disabled | slate-4 background, slate-8 text, 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: 11px;
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
orange-11on light surfaces. - 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.