Foundations
Spacing and density
Compose readable work areas with a 4px utility rhythm, clear group separation, and stable control heights.
On this page
Source spacing
| Value | Common use |
|---|---|
| 4–8px | Icon gaps, compact chip spacing, menu item padding |
| 12–16px | Card internals, mobile page gutters, menu groups |
| 20–24px | Message/card padding, dialog content and footer gutters |
| 28px | Desktop work-area gutters |
| 32–40px | Major header and section separation |
| 36px | Small actions and icon buttons |
| 44px | Standard actions, inputs, selects and queue triggers |
| 56px minimum | Email address rows |
Density contract
Use the existing primitive sizes rather than scaling their rendered image. List rows concentrate subject, snippet, person, product, work type, waiting time and assignee. Thread cards trade density for reading space. Dialogs separate a fixed header/footer from a scrollable body.
At phone widths the list and team rows reflow vertically. This is a responsive source layout, not a miniature desktop screenshot. Preserve larger touch targets and readable paragraph spacing.
Source references
| File | Responsibility |
|---|---|
| components/ui/primitives.tsx | Control sizes and spacing |
| components/inbox/conversation-list.tsx | Row and queue spacing |
| components/ui/dialog.tsx | Dialog padding and containment |
Examples from the app
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0