Foundations
Typography
Geist supports dense inbox metadata, large centered view titles, and readable message content.
On this page
Implemented scale
| Style | Size / line height | Typical placement |
|---|---|---|
| xs | 13px / 18px | Metadata, badges, uppercase labels |
| sm | 15px / 22px | Secondary information and compact actions |
| base | 17px / 26px | Standard product copy |
| lg | 19px / 28px | Emphasized copy |
| Fixed field/action text | 15px | Inputs, buttons and recipient fields |
| Reply body | 18px / 32px | Reply composer |
| Main view title | 36px, 48px at sm | Queue, People, Team, Settings |
| Thread title | 30px, 36px at sm | Conversation subject |
Hierarchy and weight
Geist is loaded with next/font/google in the source root layout and assigned through --font-geist-sans. Most interface labels use medium or semibold; unread conversation subjects use bold. Large titles have negative letter spacing; small categorical labels use uppercase and positive tracking.
The capture snapshot loads the original cached Geist font files locally to avoid an external font request. Material Symbols use their own font. Browser font readiness is a required capture checkpoint; Arial fallback is not an acceptable substitute for the finished evidence.
Content length
- Conversation subjects truncate in lists but wrap in the thread heading.
- Snippets remain brief previews; message bodies preserve paragraph boundaries.
- Use tabular numerals for waiting age, counts, totals, and message metadata where the source supplies them.
- Do not shrink text in screenshots to make more content fit.
Source references
| File | Responsibility |
|---|---|
| app/layout.tsx | Geist loading and variable |
| app/globals.css | Tailwind text-size overrides |
| components/inbox/conversation-detail.tsx | Thread and message hierarchy |
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