layout + grid· chapter 07 · 12 cols · 4 breakpoints
12 cols · seven canonical spans · one grid
every fold uses the same 12-column grid. spans are restricted to a canonical set so layouts are predictable and grayscale- thumbnail readable. mobile collapses to 4 cols; tablet to 8.
as of
01 · breakpointsfour · monotonicphone · tablet · desktop · wide
four breakpoints. mobile is 4-col; tablet is 8-col; desktop is 12-col. wide adds breath but never new columns.
| name | range | cols | density |
|---|---|---|---|
phone | 0px – 640px | 4 | tight |
tablet | 641px – 1024px | 8 | standard |
desktop | 1025px – 1440px | 12 | standard |
wide | 1441px – ∞ | 12 | loose |
as of
02 · spanscanonical · sevenevery column span is one of seven values
3, 4, 5, 6, 7, 9, 12. anything else is a violation. this discipline keeps composition grayscale-readable across every fold.
--c-33/12--c-44/12--c-55/12--c-66/12--c-77/12--c-99/12--c-1212/12as of
03 · archetypessix · foldssix fold archetypes · all folds inherit one
hero · proof · journal · strip · system · covenant. plus four ceremonial archetypes (ceremony · skins · drops · tiers). nothing else.
| archetype | columns | use |
|---|---|---|
hero | 7+5 | type-led claim · paired evidence card |
proof | 3+9 / 12 | marked claim · supporting table or chart |
journal | 3+9 | data-bleed · live tape · always bloomberg skin |
strip | 12 · 4 cells | stat-card row · live engine state |
system | 3+9 / 12 | topology · code · longform diagrams |
covenant | 12 | closing rule · breaches · final links |
as of
04 · densitythree tiersdensity · tight · standard · loose
| density | spacing rung | line-height | use |
|---|---|---|---|
| tight | --s-2 (8px) | 1.25 | phone · cockpit · journal |
| standard | --s-4 (16px) | 1.45 | tablet + desktop default |
| loose | --s-6 (24px) | 1.6 | wide · editorial · ceremony |
optical
density is selected per surface, not per element. every primitive inherits the parent density via the data-densityattribute on the shell.as of
05 · responsive doctrinesix named breakpoints · container queries firstsix breakpoints · one shell
container queries first. components adapt to their container, not the viewport. viewport breakpoints govern shell only—header, rail, and bottom-tab choreography.
as of
06 · transformation matrixevery multi-column component declares its breakpoint behaviourfour canonical matrices
every multi-column component must declare how it transforms across the six breakpoints. enforced via container queries on the wrapper.
| component | xs | sm | md | lg | xl | xxl |
|---|---|---|---|---|---|---|
card-grid | 1 col | 1 col | 2 col | 3 col | 4 col | 4 col |
data-strip | horizontal scroll | horizontal scroll | 2 col grid | 4 col grid | 6 col grid | 8 col grid |
rubric-row | stack · num + title above bar | stack · num + title above bar | row · num | title | bar | score | source | row · num | title | bar | score | source | row · num | title | bar | score | source | row · num | title | bar | score | source |
fold | 1 col · num above title | 1 col · num above title | 12-col · 3 num | 9 title | 12-col · 3 num | 9 title | 12-col · 3 num | 9 title | 12-col · 3 num | 9 title |
as of
07 · shell primitivesShellLayout · BottomTabBar · IconRailthree primitives · all chrome
the shell is the only legitimate carrier of cross-page chrome. mobile gets BottomTabBar; LG+ gets IconRail. each is server-rendered; expanded state is a prop, not client state.
as of
08 · touch · safe-area · contrast44 px touch · safe-area aware · no chrome under the notchtouch is a covenant
| rule | value | source |
|---|---|---|
| touch min | 44px | Every interactive element must meet 44 px on touch viewports (XS, SM, MD). |
| touch preferred | 48px | spacing rung 44–48 px |
| safe-area | env(safe-area-inset-*) | All shell chrome must respect env(safe-area-inset-*) on iOS/Android. Bottom-tab bar adds env(safe-area-inset-bottom) to its height. |
| content measure | 45ch – 75ch | Long-form text columns must respect 45–75 ch. Code blocks may exceed via horizontal scroll. |
hide-on-scroll
the header translates -100% on scroll-down beyond 64 px and restores on scroll-up. the rail is sticky on LG+ and never translates. scroll position 0 always shows the header.ShellLayoutBottomTabBarIconRail