Foundations
Spacing and sizing
A small utility scale supports generous daily navigation and compact forms.
On this page
Source scale
| Dimension | Source usage |
|---|---|
| 4 / 8 / 12px | Icon/text gaps, chip content, small controls |
| 16px | Grid cells, settings row padding, form field groups |
| 24px | Viewport gutters, bookmark grid gaps, inner settings panel padding |
| 32px | Editor padding and action separation |
| 40px | Settings shell padding and dashboard stack gaps |
| 64px | Bookmark and add-link tile square |
| 36 / 40 / 44px | Close control, search mode control, header settings action |
Composition rules
Preserve minimum whitespace around icon-and-label groups. Reserve room outside bookmark tile corners for move/edit/delete affordances; their negative offsets are part of the source anatomy. Component screenshots include the complete tile plus controls, not only the square icon.
Use viewport dimensions to distinguish expanded/full-content screenshots from normal mobile layouts. Never stretch a crop to make a specimen appear taller or to invent more pixels.
Source references
| Repository file | Responsibility |
|---|---|
| app/(home)/AppHome.tsx | Utility spacing and sizes |
| app/settings/boards/BoardsList.tsx | Board rows and edit controls |
Examples from the app
Actual Startboard source UI with isolated fictional records; both native themes at 2× resolution or higher. No live integrations or account writes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 08fa2595a668 · Documentation v1.0.0