K04 Layout & Surfaces

04.1

Grid

1 2 3 4 5 6 7 8 9 10 11 12

HEADLINE · 7 COL

MEDIA · 5 COL

Asymmetric default: 7 + 5 on desktop, 5 + 3 on tablet, stacked on mobile

04.2

--space-14pxIcon to label

--space-28pxChip padding, tight stacks

--space-312pxInline groups

--space-416pxForm field gap

--space-520pxCard padding (mobile)

--space-624pxCard padding, gutters

--space-832pxBlock groups

--space-1040pxHeading to content

--space-1248pxSub-section gap

--space-1664pxSection · tight

--space-2080pxHero padding

--space-2496pxSection · default

--space-30120pxEditorial breaks

--space-40160pxSection · loose

--section-tight

64

Between related blocks, such as stats and their CTA.

--section

96

Default gap between page sections.

--section-loose

160

Editorial pauses before signature moments.

04.3

--radius-s4px Citation chips, badges, code

--radius-m8px Inputs, popovers, list rows

--radius-l16px Cards, panels, media

--radius-pill999px Buttons, status pills, toggles

0 · HAIRLINE Default. Surfaces separate by 1 px lines, not shadows.

1 · RESTING Sticky bars, selected cards.

2 · RAISED Popovers, dropdowns, toasts.

3 · OVERLAY · STERILE GLASS Mega menu, modals, drawers only.

04.4

SECTION TYPE	1440 · 12 COL	1024 · 8 COL	390 · 4 COL
Header	Utility bar + nav + mega menu	Utility bar collapses into menu	Logo + Menu, full-screen nav
Hero	7 + 5 split, ring right	5 + 3, ring scales to 360	Stacked, ring below headline
Audience router	4 across	2 × 2	1 column, 72 px rows
Stats band	4 across with dividers	2 × 2	1 column, hairline between
Card grid	3 across	2 across	1 across, full-bleed media
Media + text	Alternating 6 + 6	4 + 4	Media first, then text
Comparison table	Full table	Sticky first column	Horizontal scroll + sticky col
Sticky exploded view	Pinned stage, scrolling steps	Pinned stage, steps below	Static frames per step
CTA band	Headline + 2 CTAs + trust row	Same, trust row wraps	Stacked; sticky CTA bar appears
Footer	5 columns + regulatory block	3 columns	Accordion groups