Forms
Square inputs, Verdana labels, Georgia for help text. Inputs sit on warm-grey surface — never on pure white.
Anatomy
- Square — border-radius: 0 on all controls. No pill inputs, no soft corners.
- Surface fill — background: var(--surface) (#e5e3e3). Inputs read as embossed against the white card.
- Labels — Verdana 11px, 700, tracked 0.12em, uppercase. Always above the control, never floating inside.
- Help text — Georgia italic, var(--fg-muted). Below the control.
- Focus — inherits the 2px var(--link) outline from the global rule. No custom focus per field.
- Error state — border becomes var(--accent), help text turns red. The .red utility is reserved for this and similar in-line emphasis.
DON'T
- Don't use placeholder text as the label. Placeholder is a hint, not a name.
- Don't introduce a multi-step wizard. The form is one short screen — a school director shouldn't have to click "next."
- Don't add real-time validation. Validate on submit only; this is a consultative form, not e-commerce.