🧬 Design DNA First (the post-Codex build process)

Origin: Rio's Codex-built Uprise site out-designed recent Claude builds with zero SOPs transferred. Diagnosis: it committed to a design SYSTEM up front with opinionated, hand-tuned values, instead of assembling safe sections. This SOP makes that the standard for every build.

Step 0 of EVERY site build: write the DNA block (10 lines, before any HTML)

DNA — [project]
ink:        #___  (one base, not "dark gray-ish")
panel:      #___  (one elevated surface)
accent:     ___   (ONE signature move: gradient text / hot color / metallic — pick, commit)
display:    [font] at [weight 750-900], tracking [-.03 to -.06em], line-height [.92-1.0]
body:       [font], one size, one muted color
micro:      ≤11px, uppercase, .15-.3em letterspacing (kickers, chips, labels)
scale:      display ≥ 5x body size. Extreme contrast IS the luxury.
radius:     one value. border: one hairline style. Repeat everywhere.
motif:      the ONE repeated signature (window chrome / numbered sections / gradient text / serif italics)
mood:       3 words from RIO'S OWN BRIEF, used literally

The DNA block goes at the top of the CSS as a comment. Every component obeys it. No component invents its own values.

The rules that made the difference

Opinionated numbers beat defaults. Weight 790 + tight tracking + sub-1.0 line-height reads intentional; weight 700 + defaults reads template. Tune the display type by hand, always.
Extreme hierarchy. If the biggest text isn't at least 5x the smallest label, the page reads flat.
Detail pass is a real phase (last 25% of build time): hover states on everything interactive, hairline dividers, numbered markers, chips, status dots, transition curves. Intentionality lives in the small stuff.
Rio's brief words go in literally. He says "bold and dark" → the DNA mood line says bold and dark and the tokens prove it. Don't average his intent with priors or over-apply the anti-slop list as a mute button. Anti-slop bans FAKE and GENERIC, not BOLD (see the design-rules-overpolicing memory).
One signature motif per site, repeated 3+ times. Uprise = gradient text + window chrome. Mimi = serif overlap + gold hairlines. Every site needs its own.

House reference

Uprise family: ~/Documents/uprise website/app/globals.css IS the living style guide. New Uprise-family pages import its tokens, no re-invention.
Client sites: run Step 0 fresh from THEIR brand (extracted real colors + logo per the existing authenticity rules) + reference screenshots per the reference-first rule. DNA block first, then build.

Related: website-framework-menu, website-build-ledger