Skip to content
Sheet 13

Web foundations

The digital ground: cream pages, white cards, black ink, green proof. One 12-column container, a 4px spacing base, and radii rounded like the mark's own caps — every screen inherits the same physics.

The rule

Cream pages, white cards, black ink — green only where something is proven.

Fig. 13.A — Grid, spacing, radius, surfaces
THE GRID — 1200 CONTAINER · 12 COL · 24 GUTTER margins 40 · columns 52 · gutters 18 (shown to scale) BREAKPOINTS 1440+ · wide 12 col 1024 · desktop 12 col 768 · tablet 8 col 360 · mobile 4 col SPACING — BASE 4 · 4 8 12 16 24 32 48 64 96 4 8 12 16 24 32 48 64 96 RADIUS — 8 · 12 · 16 · PILL 8 inputs · chips 12 tiles 16 cards pill CTAs · pill SURFACES — THE PAGE SANDWICH White card radius 16 · shadow sm ✓ VERIFIED ROW · UI SUBTLE Warm Beige alt section alternation Footer — Vault Black, cream ink, green links ELEVATION — CREAM-TINTED, NEVER GREY sm · cards md · popovers lg · modals shadow colour is ink at 10–18% — cream pages, warm shadows. section rhythm: 96px between blocks, 64px on mobile. rule cream page · white card · black ink · green proof tokens public/tokens/rv-tokens.json · sizes = sheet 08
Shift-click anywhere on the figure to pin a comment to that spot.

Layout

Container
1200 px · 24 px gutters
Columns
12 / 8 / 4
Breakpoints
360 · 768 · 1024 · 1440
Section rhythm
96 px desktop · 64 px mobile

Space & shape

Spacing base
4 px · scale ×2
Radius
8 · 12 · 16 · pill
Cards
16 px radius · shadow sm
CTAs
pill · like the terminal caps

Surfaces

Page
Foundation Cream
Cards · forms
White
Alt sections
Warm Beige
Footer
Vault Black
Verified rows
UI Subtle

Never

  • × Pure #000 / #FFF page grounds — use the palette
  • × Arbitrary spacing — snap to the scale
  • × Mixed radii in one component
  • × Green sections as decoration