Sizing and density
A restrained size system keeps controls predictable and gives the manuscript priority. Inline defaults to comfortable density, preserves 44px targets, and lets the draft own the workspace rather than its margin.
Control ladder
Three visible heights cover compact desktop tools, everyday controls, and full touch targets. The former 48px large control is reduced to 44px.
Hierarchy rule: color, label, and placement make an action primary. Height follows input mode and region density, not importance.
Density
Density is selected for a region, not toggled per component. Comfortable is the product default.
| Mode | Visible height | Use |
|---|---|---|
| Compact | 32px | Secondary desktop chrome and quiet utility tools |
| Comfortable | 40px | Default forms, editor actions, selects, and menus |
| Touch | 44px | Mobile, coarse pointers, and visible touch targets |
Control mapping
Map related controls to the same ladder. Smaller visual controls retain the 44px effective target shown above.
| Element | Sizes | Default | Internal icon |
|---|---|---|---|
| Button | 32 / 40 / 44px | 40px | 16px · 20px at lg |
| Input/select | 40 / 44px | 40px | 16px |
| Icon button | 32 / 40 / 44px square | 40px | 16 / 20 / 20px |
| Checkbox/radio | 20px visual | 44px target | — |
| Switch | 40×24px track | 44px target | — |
| Chip/tag | 24 / 32px | 24px | 12 / 16px |
| Navigation row | 44px minimum | 44px | 16px |
| Toolbar | 48 / 64px | 48px local · 64px shell | 16 / 20px |
Icons and avatars
Small supporting elements use short, complete ladders. The avatar preview uses the approved fixed-field Inline mark at each size.
Icon sizes
12162024Avatar sizes
1624324064Draft workspace
The desktop review canvas is sized from the available viewport and split in favor of the manuscript. Content length changes internal scroll position, not the workbench height.
Desktop height: max(460px, calc(100dvh - 304px)). Below lg, the full-width draft and questions return to one document flow.
Rules
Size supports reach, rhythm, and writing focus.
- Default to 40px. Comfortable density is the product baseline.
- Do not size by importance. Primary color and placement carry hierarchy.
- Keep targets reachable. Controls remain at least 44×44px effectively.
- Map icons to controls. Use 16px ordinarily and 20px for larger touch contexts.
- Keep density regional. Do not alternate density inside one toolbar or form.
- Keep the draft dominant. The question margin never receives more width than the manuscript.
- Bound the workbench, not the writing. Long content scrolls inside the viewport-sized region.
- Stack before shrinking. Mobile places questions after the full-width draft.