Components
Primitives from src/components/ui. They know nothing about Delia’s domain; the Product page builds on them.
Form controls
Controls sit on the raised cream with a strong outline. Labels are always visible; errors appear next to the field.
Text fields
Delia matches incoming mail against this address.
Search field
Select
Checkbox
Radio group
An approval level, per tier.
Switch
Overlays
Floating surfaces are the only place a shadow appears.
Dialog
Sheet
Record previews, and navigation on mobile.
Menu
Popover
Tooltip
Toast
Confirms an action by name and offers Undo.
Command palette
Global search and commands, opened with ⌘K.
Data display
Dense data lives in tables with hairline rows, not cards.
Table
13 px cells, tabular figures, numbers right-aligned.
| Person | Role | Days | Day rate | Total |
|---|---|---|---|---|
| Jonah Whitfield | Director of photography | 2 | $950 | $1,900 |
| Sam Okafor | Drone pilot | 1 | $1,200 | $1,200 |
| Lena Brandt | Sound mixer | 2 | $700 | $1,400 |
The second row is selected: selection uses the raised cream, hover uses the tint.
Badge
Generic labels. Stages and statuses have their own components.
Avatar
Progress
Separator
Feedback
Every data view has four states: loading, empty, error and populated.
Banner
An offer or a notice at the top of a view.
Error
Says what went wrong and what to do next.
Loading
A skeleton shaped like the content.
Loading…
Empty
An invitation to act.