Layout
The grid system gives layouts the same structural discipline as the E-square gives the wordmark.
Base Unit and Spacing Scale
Base unit: 8 px. All spacing, margins, padding, and component gaps should be multiples of 8 px except hairline corrections.
| Token | Value | Usage |
|---|---|---|
| space-1 | 4 px | Hairlines, icon optical corrections |
| space-2 | 8 px | Micro gaps, tight UI padding |
| space-3 | 16 px | Default component padding, mobile margins |
| space-4 | 24 px | Desktop gutters, paragraph spacing |
| space-5 | 32 px | Section internal padding |
| space-6 | 48 px | Medium section gaps |
| space-7 | 64 px | Large section gaps |
| space-8 | 96 px | Hero separators |
| space-9 | 128 px | Major page breaks |
Grid
| Breakpoint | Columns | Gutter | Margins | Max width |
|---|---|---|---|---|
| Large desktop (>=1440 px) | 12 | 24 px | auto | 1280 px |
| Desktop (1024-1439 px) | 12 | 24 px | 32 px | fluid |
| Tablet (768-1023 px) | 8 | 20 px | 24 px | fluid |
| Mobile (<768 px) | 4 | 16 px | 16 px | fluid |
Common Layout Patterns
| Pattern | Column use | Use case |
|---|---|---|
| Hero | 12 | Full-width hero |
| Centered content | 10 centered | Long-form pages |
| Two-column | 6 + 6 | Comparisons, feature pairs |
| Three-column | 4 + 4 + 4 | Card groups |
| Sidebar | 3 + 9 | Documentation, dashboards |
PENDING Real-world product UI layout tests, print templates, and presentation templates are pending.