Foundations
Shape, elevation and layering
Document Sonarist’s own rounded UI while keeping the surrounding portfolio documentation in its established square-cornered style.
On this page
Source geometry
| Family | Treatment |
|---|---|
| Buttons/fields | rounded-xl, commonly 12px |
| Menus/dialogs/composer | rounded-2xl, commonly 16px |
| Sender screening/new message group | rounded-3xl, commonly 24px |
| Message cards | 28px, 32px at sm |
| Avatars/badges | rounded-full |
| Sheets | Square outer shell; source cards inside retain their radii |
Elevation meaning
Low shadows group cards and composer surfaces. Menus use shadow-xl or shadow-2xl. Dialogs use a dark 45% backdrop with 2px blur. Earlier thread messages overlap by 62px on phones and 68px at sm to make a layered stack; expansion removes the overlap around the selected card.
The source intentionally uses rounded geometry. Preserve it in captures and token documentation. This does not authorize adding rounded navigation, tags, or buttons to the portfolio site.
Layer contract
- Header has z-40; its search/navigation overlays use z-50.
- Queue menus and filters layer over the scrolling queue.
- Message stack uses isolate and increasing z-index.
- Native dialog showModal places the dialog in the browser top layer.
- Capture the union of a trigger and popup when the popup falls outside the parent’s box.
Source references
| File | Responsibility |
|---|---|
| components/ui/primitives.tsx | Primitive radii |
| components/ui/dialog.tsx | Dialog backdrop/elevation |
| components/inbox/conversation-detail.tsx | Message geometry and overlap |
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