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.cssIS 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