01  Describe    Type what you want in plain language. Vague or specific — agents adapt.
02  Build       Seven specialized agents run in parallel: intake, plan, write, QA, ship.
03  Preview     Live URL on real infra — ready before generation even finishes.
04  Iterate     Describe a change. Preview updates instantly. No redeployment needed.
05  Ship        Export to GitHub or share your live link. You're already done.

4xl display   →  -0.055em
3xl display   →  -0.042em
lg heading    →  -0.030em
md heading    →  -0.020em
.label class  →  +0.340em  UPPERCASE
nav links     →  +0.220em  UPPERCASE
buttons       →  +0.160em  UPPERCASE
body          →  default (0)

Hero display  →  0.90  (very tight)
CTA heading   →  1.00
UI headings   →  1.15 – 1.20
Tagline       →  1.17
Body text     →  1.65 – 1.72
Stat numbers  →  1.00
Labels        →  1.00

background    rgba(255,255,255, 0.04)   ← max 0.08, never exceed
border        rgba(255,255,255, 0.08)
blur          backdrop-filter: blur(24px)
highlight     rgba(255,255,255, 0.12)   ← top shimmer, dark only
radius        20px

Max width     1280px   centered, auto margins
Card gap      10px     between all bento cells
Card radius   20px     all cards  ·  12px small/FAQ
Page sides    32px     left + right padding
Section Y     96px     top + bottom per section
Figma grid    12 col   10px gutter  ·  32px margin  ·  8px nudge

R1  1fr + 300px          h: 440px   Hero + Logo
R2  192px + 1fr + 192px  h: 152px   Stat + Tagline + Stat
R3  repeat(4, 1fr)       h: 268px   Four pillars
R4  1fr + 352px          h: 320px   Colors + Glass recipe
R5  1fr + 1fr            h: 308px   Typography + Rules
R6  1fr                  h: 216px   CTA banner
R7  1fr + 240px + 240px  h: 172px   Marquee + Mini + Mini

01  Segmented      Built from repeating bar units. Never organic.
                   Structure from accumulation.

02  Systematic     Decisions are rules. Spacing, color, type —
                   strict scale, always.

03  Translucent    Glass layers over depth. Light passes through.
                   Surfaces breathe.

04  Negative Space The dolphin lives in the gap.
                   Silence is part of the language.

✓  Use 8pt spacing — all values multiples of 8
✗  Round cards beyond 20px — kills the engineered feel
✓  Echo bar motifs in dividers and data visualizations
✗  Mix accent colors — one per page context only
✓  Let negative space breathe — generously