Layout
How pages are structured across the product.
Screen size
The application uses a single responsive breakpoint at 1300 px to switch between two layout modes.
| Viewport | Behaviour |
|---|---|
| ≥ 1301 px | Full layout. Navigation and content sit side by side with room to breathe |
| ≤ 1300 px | Compact layout. The content area shrinks to fit; navigation width is preserved |
A four-band scheme built on Tailwind's md, lg and xl breakpoints has been agreed and is not built yet. It replaces both the single switch above and the fixed navigation width — see Responsive navigation.
Anatomy
Every page shares the same vertical structure.
| Region | Size | Notes |
|---|---|---|
| Header | 45 px fixed height | Always visible. Logo, search, global actions |
| Page bar | 80 px fixed height | Page title and contextual actions |
| Navigation | 250 px fixed width, 12 px internal padding | Persistent sidebar. Width does not change between breakpoints |
| Content area | Fluid, 24 px internal padding | Fills the remaining horizontal space |
Because the fixed regions don't shrink, the content area is the only thing that gives. Density work inside a page therefore starts with not letting the fixed regions grow.
⚠️ These six constants are the most checkable prose in the corpus and have never been checked. They should be asserted against the compiled CSS rather than trusted here — the same treatment the token values get. Until that check exists, treat this page as the most likely place for the docs site to be quietly wrong.
Spacing
Spacing is a token scale on a 4 px base unit. Reference tokens by name, never by raw value.
The scale itself is derived, not authored — it is Tailwind's default scale, and the docs site's claim that it is "doubled at each step" is not true of the values it then lists. There is no house spacing decision to document; see inherited-from-tailwind.