Desktop
The office: a project manager at 1440px or wider, comparing forty rows at once, mostly from the keyboard.
Data density
1440pxDesign width for dense views
32pxEvery form control, one height
28pxRow actions, with the 44px boundary
Desktop earns density by width, not by smaller type: cells stay 12px and body 13px. Extra width goes to more columns and a docked inspection drawer, never to bigger controls.
Keyboard navigation
Everything a pointer can reach, a keyboard can too, with a visible focus ring.
- Ctrl K opens search, as it does in these docs (Cmd K on a Mac). Any new global search takes the same shortcut.
- Esc closes the top menu, popover or drawer, one layer at a time.
- Arrow keys move through menus and grids; Enter opens the selected row.
More in Foundations and concepts
Design principlesFour human commitments for software on a shop floor, and the engineering rule that keeps each one.Token architecture and tiersPrimitive, semantic and component tokens, and how one value cascades to a control.Color and the monotonic ladderSix charcoal rungs measured in L*, text contrast, and status hues that name conditions.Typography and data formatsSix sizes, the one 10px tier, and when a number takes the data face.Data visualization and charts20 chart archetypes at three sizes, timeline rules, the series colour contract, and accessible charts.Layout patterns and shell slotsThe five shell slots, drawer anatomy, and density that steps inward.