04 · Space & Grid

Hairlines, not borders. The grid is the chrome.

Spacing scale (powers of two)
--space-1
4 px
--space-2
8 px
--space-3
12 px
--space-4
16 px
--space-5
24 px
--space-6
32 px
--space-7
48 px
--space-8
64 px
--space-9
96 px
--space-10
128 px

Use named tokens; don't invent intermediates. If a layout needs 20px, ask whether it should be 16 or 24 — the answer is almost always one of those.

Marketing · 12-column grid

Institutional-grade reasoning. Fully auditable trails.

Perspectives shifts the paradigm from generative text to rigorous foresight. Designed for researchers, traders, and superforecasters.

12 columns, 16px gutters, max-width 1200px, side padding 24–48px. Headlines occupy 5–7 columns; body and rail 4–5 columns. Empty columns earn the layout its breath.

Layout shells
PRODUCT — three-pane shell
history sidebar · 280
controls · 300
chat · fluid
MARKETING — nav + 12-col

Predict the future.

copy column · 5/12

The Signal uses a single 720px column of measure, centered on Paper. Don't apply the 12-col grid there.

Hairlines, not shadows
✓ DO · HAIRLINE

Cards on Paper sit by hairline alone.

1px solid --subtle. The card joins the grid; it doesn't float above it.

✗ DON'T · DROP SHADOW

Floating shadows muddy the page.

Save shadows for elevation that means something — modals, popovers — not for static cards.

Radius — geometry
0
XS · 2
SM · 4
MD · 8
PILL

The brand is square. Default to 0 or 2px. 4px for in-app inputs and chat bubbles. 8px for the few cards that warrant it. Pill only on tag chips.