Foundations
Spacing & layout
A 4px base unit and a 12-column grid keep every screen's rhythm consistent, from dense data tables to marketing pages.
Spacing scale
All padding, margin, and gap values reference this scale. Never use an arbitrary pixel value.
Application guidance
| Context | Token |
|---|---|
| Icon-to-text gap, tight inline groups | space-8 |
| Form field internal padding | space-12 |
| Default gap between related elements | space-16 |
| Card padding | space-24 |
| Gap between unrelated sections | space-48–space-64 |
| Page top/bottom padding | space-64–space-96 |
Grid
12 columns, 24px gutter, fluid within a max content width of 1180px for data-dense screens (920px for reading-focused documentation, as on this site).
1
2
3
4
5
6
7
8
9
10
11
12
Breakpoints
| Token | Min width | Typical device |
|---|---|---|
bp-sm | 480px | Large phone |
bp-md | 768px | Tablet |
bp-lg | 1024px | Small laptop |
bp-xl | 1280px | Desktop |
bp-2xl | 1536px | Large desktop |
Internal tools default to desktop-first
Most Woodruff Sawyer applications are used on desktop by staff. Design desktop-first, then verify graceful degradation down to bp-lg; full mobile optimization is only required for client-facing screens.