Drawer form anatomy
Atlas event creation flows use compact fields promoted from the app drawer: label, control, hint, and validation with no invented tokens.
Anatomy
Always above the control. Use 11px Hanken Grotesk, medium weight, `var(--fg-3)`, and the existing caps tracking. Required fields append a Flush asterisk.
The control sits in the middle: 30px minimum height, `var(--at-white)` background, `var(--border-subtle)` border, `var(--radius-sm)` radius, and `var(--ring-accent)` on focus.
Hint text sits under the control at 11px using `var(--fg-4)`. Keep it one sentence and tied to the current field or section.
Use `var(--space-2xs)` between label → control and control → hint. FieldRow uses `var(--space-sm)` between columns.
Usage
Use `hint` for preventive guidance. Use Field `error` when one input is wrong; it replaces the hint and turns the border `var(--at-flush-700)`.
Use the required asterisk only for controls that block commit when empty. Do not mark optional decision helpers as required.
Use FieldRow for related pairs or short triples. Keep long textareas and complex allocation controls as single full-width Fields.
Validation feedback
Use Field error for a single input. Use ValidationMessage for section-level conditions such as allocation totals, cross-field dependencies, or generated previews. Prefer specific copy with the current value: "Allocations must total 100% — currently 80%" beats "invalid".
| Tone | Use | Token |
|---|---|---|
| success | Balanced or accepted section state | --at-success-bg / --at-success-fg |
| warning | Commit possible, but user should notice | --at-warning-bg / --at-warning-fg |
| info | Ambient guidance or non-blocking context | --at-info-bg / --at-info-fg |
| error | Blocking validation failure | --at-flush-50 / --at-flush-700 |