Foundations
Layout
Two containers, one gutter, three breakpoints. Browse at 1180, read at 1080.
Containers
| Token | Value | Role | Status |
|---|---|---|---|
--wrap | 1180px | Home page container. | Shipped |
--wrap-read | 1080px | Case-study container - a reading measure. | Shipped |
--gutter | 44px | Page side padding; 22px at 640. | Shipped |
--case-pad | 84px | Vertical rhythm; 64px at 900. | Shipped |
--nav-h | 68px | The fixed bar: 44px target + 12px padding top and bottom. | Shipped |
--target | 44px | Minimum touch target, everywhere. | Shipped |
Every inner section uses the same container as its page - a sub-section never narrows itself independently. Prose keeps its own measure (max-width:62ch) inside the container instead.
Breakpoints
| Width | What changes |
|---|---|
1180 | Evidence reel narrows its caption column. |
900 | Type steps down one; two-column layouts stack; --case-pad 84 → 64. |
640 | Type steps again; gutter 44 → 22; card grids go single-column; figure padding halves. |
400 | The loader skips - the headline re-wraps and the drum cannot land on it. |
Custom properties cannot be used in media queries, so breakpoints are documented values, not tokens.
Columns
1fr
1fr · gap 56
Show code
<div class="cols">
<div class="d-box d-w-full">1fr</div>
<div class="d-box d-w-full">1fr · gap 56</div>
</div>.cols is the case-page split. The home page case row is 1fr 1.05fr with a 64px gap, flipping its visual to the left on alternate rows.
Stacking
| Token | Value | Role | Status |
|---|---|---|---|
--z-hero | 10 | Fixed hero copy. | Spec |
--z-sticky | 15 | Floating CTA. | Spec |
--z-pop | 20 | Popovers, glossary boxes, menus. | Spec |
--z-content | 25 | #content sliding over the hero. | Spec |
--z-nav | 30 | Fixed nav bar. | Spec |
--z-progress | 40 | Scroll comet. | Spec |
--z-overlay | 50 | Dialogs, drawers, lightbox. | Spec |
--z-veil | 60 | Loading veil. | Spec |
--z-toast | 70 | Toasts sit over everything. | Spec |