Layout
Palette is designed on a 390 px phone first and enhanced for larger screens. Controls live where a thumb can reach them, content stays at a readable measure, and every size follows a 4 px grid.
Mobile first
Start every screen at 390 px wide, held in one hand. Add columns as the screen grows; never remove features to make a phone fit.
| Width | Layout |
|---|---|
| Under 640 px | One column. Top bar and dock. Sheets rise from the bottom. |
| 640 px and up | Wider gutters. Grids gain columns. |
| 1024 px and up | A sidebar holds navigation. Sheets become centred panels or slide in from the side. |
| 1280 px and up | A table of contents follows the page. |
The thumb zone
On a phone, the bottom third of the screen is the easiest to reach. Put what people do there, and what they read above it.
- The dock holds the three global actions (index, ask, X-ray) at the bottom, and tucks away while you read down.
- Sheets open from the bottom and close with a downward swipe.
- The Ring keyboard’s button appears where your thumb last touched, not in a fixed corner.
- Murmurs appear just above the dock, where your thumb already is.
Spacing
Every space is a step on a 4 px grid, from --s-1 (4 px) to --s-11 (96 px). Gutters grow with the screen: 20 px on phones, 28 px from 640 px, 40 px from 1024 px.
| Token | Value | Typical use |
|---|---|---|
--s-2 | 8 px | Between a mark and its label |
--s-3 | 12 px | Between chips and between cards |
--s-4 | 16 px | Inside cards and fields |
--s-6 | 24 px | Between paragraphs and blocks |
--s-9 | 56 px | Between sections |
Touch targets
- Make every target at least 44 by 44 px. Primary actions get 48 px or more.
- Leave 8 px between neighbouring targets, so a thumb can’t press two.
- Keep hold-to-confirm targets large: a sealed action should be a full-width row or a big ring.
Safe areas
Palette fills the whole screen when installed, under the status bar and the home indicator. The top bar, dock, sheets and Ring keyboard all respect the safe-area insets, so nothing sits under a notch or a gesture bar.
Measure
Reading text stops at 44 rem, about 70 characters. Specimens, tables and grids may run wider; prose doesn’t. On large screens the sidebar and table of contents take the extra width instead of the lines.