01Summary
Add three things to santosdioses.com and lift the overall look:
- Design uplift, dual-track — (a) a shippable systematized polish pass on the existing site, and (b) 2–3 homepage redesign concepts built as real, clickable routes on staging for you to review and pick from.
- Cocktail recipe section — a proper hub/index page plus an expanded, canonical library from the 12 documented signature serves, fixing the pre-existing per-recipe soft-404 bug.
- Education section + tequila quiz — an education hub that adopts the orphan additive-free page, anchored by an interactive "how to sip / serve / taste" quiz that captures anonymous takers into the newsletter list and is featured in the Welcome email.
The first unit is an analysis + content-map + design-audit artifact you sign off on before any build proceeds. Brand lock (logo / slogan / color) is fixed throughout. Every new public page goes through the mandatory prerender-registration checklist or it won't rank. All new UI ships to staging first for your QA.
02Problem Frame
- Design — the visual system grew organically: arbitrary type sizes with inline letter-spacing, headings with hardcoded hex that bypass tokens, and a
brand-gold accent used on 3 pages that resolves to no color (no brand token is defined). The fix is a consistent warm-neutral system — black / cream / warm-gray. Separately, you want to see homepage redesign options, not just polish.
- Cocktails — only 3 recipes exist (paloma, margarita, ranch-water), reachable only by direct URL with no hub page, and the prerender step registers a bogus route that matches nothing — so every recipe URL soft-404s. Meanwhile 12 signature serves are already documented; the content exists, the surface doesn't.
- Education — a single orphan page at
/learn/additive-free with no section around it and nothing linking to it. No quiz anywhere.
- Newsletter tie-in — the signup + email pipeline already exists and should be reused, not rebuilt.
03Scope Boundaries
In scope
- Sign-off analysis / mapping artifact
- Design-system cleanup + polish pass (staging)
- 2–3 homepage concept routes
- Cocktail hub + library + prerender fix
- Education hub + interactive quiz
- Quiz → newsletter capture + Welcome-email feature
Deferred
- Moving content into DB tables + admin editing
- Dedicated drip step (needs the dormant drip runner activated — your call)
- Cocktail glassware/garnish photography
- More quizzes / leaderboard / GA4 dashboards
- Building the winning homepage redesign
Out of scope
- Brand lock: logo, slogan, palette (blue used sparingly, never a site accent)
- E-commerce / cart / checkout
- Admin, sales, or auth surfaces
- Bottle / product renders (locked skills)
04Key Technical Decisions
D1 · Homepage conceptsShip as real staging routes, not static mockups
Reuse the existing /home-2 precedent — concepts are noindex routes you click through on staging. Higher fidelity than flat images and uses the real design system.
D2 · Design systemWarm-neutral accent system; brand blue stays reserved
Consolidate onto the existing ink / cream / warm-gray tokens and add a real type scale. Replace the dead brand-gold usages with intentional neutral tokens. Brand blue is used only sparingly — never the site's accent color.
D3 · Content modelHardcoded TS data modules for v1
Follow the current pattern rather than new DB tables — fastest path, 12 recipes is small, no admin editing was requested. DB + admin is the documented upgrade path (deferred).
D4 · Quiz captureReuse submit-newsletter; feature in the Welcome email
Add a 'quiz' capture source (no migration). Promote the quiz via the Welcome email — the earliest email that actually sends today — decoupling the "first email" ask from the dormant drip.
D5 · IndexingEvery new page completes the 6-step prerender checklist
Route + SEO head + prerender body + page_seo row + OG JPG (synced in both maps) + robots. Skipping any step reproduces the soft-404 failure this site already hit.
D6 · Design toolingRoute design work through the taste skills
Use design-taste-frontend + soft-skill (and brandkit/imagegen for imagery). Site brand tokens win conflicts; imagegen never touches bottle renders.
05System-Wide Impact
| Surface | Impact |
index.css + tailwind.config.ts | Neutral accent-token consolidation + type scale (brand blue stays reserved, not an accent); touched by every page — validate broadly. |
prerender.mjs | New static routes + body cases + OG entries; fixes the existing cocktail soft-404. |
page_seo table (shared) | New rows per page → also changes the generated sitemap. Visible in both prod + staging. |
| newsletter edge functions | New 'quiz' source; Welcome-email CTA (approval-gated copy change). |
App.tsx routing | New routes for hub, education hub, quiz, and concepts. |
| Google Search Console | New indexable URLs; monitor for soft-404 regressions after deploy. |
PHASE A
Analyze & Map
The sign-off gate — one artifact you approve before any build.
U1
Site content map, design audit, and in-flight reconciliation
Produce one review artifact that maps the new IA (nav placement for the cocktail hub + education section), audits the current design system, and reconciles what design work is already merged/staged vs. still to do — so nothing gets redone.
Approach
Diff main vs staging and each in-flight design branch to establish what polish is already done; curl prod HTML to confirm live state. Map proposed nav/IA changes, inventory design-system defects, enumerate the exact polish page set. Output is a markdown artifact (optionally on an internal URL).
Note
staging is ~92 commits ahead of prod with several design branches already staged — this unit is what stops us redoing merged work.
Verify
You review the artifact and confirm IA + polish scope + which in-flight branches to land. The "done vs. to do" split is explicit.
PHASE B
Design Uplift
Fix the token layer, polish the key pages, then explore homepage redesigns.
U2
Design-system foundation: neutral token system, type scale, kill the dead gold token
Fix the token layer so polish has a consistent warm-neutral system to build on — no blue accent.
Approach
Consolidate the accent system onto the existing warm-neutral tokens (ink / cream / warm-gray). Replace every brand-gold usage (5× additive-free, 4× cocktail, 3× where-to-find-us) with an intentional neutral token — not brand blue. Introduce a small semantic type scale to start retiring the arbitrary size sprawl; migrate hardcoded heading hex. Tokens only — no restyling yet.
Tests
Previously-invisible brand-gold accents now render as intentional neutral tokens; dark theme resolves without contrast regressions; no blue introduced as a page accent; no existing page changes color unintentionally.
Verify
No undefined brand-gold class remains; the accent system is neutral (blue not spread); type-scale utilities exist; site builds clean.
U3
Systematized polish pass on key public pages
Apply the design system consistently to the highest-traffic pages so the site reads "good," not "just okay."
Approach
Convert arbitrary type sizes to the U2 scale, normalize spacing, tighten hero/imagery, apply consistent motion. Land any already-good in-flight branch work from U1 rather than redoing it. Ship to staging. Brand lock untouched.
Tests
Each page renders correctly mobile/tablet/desktop; age-gate still fires first; slogan lockups + logo unchanged; no gold reintroduced; no em dashes.
Verify
You review on staging and approve; visual consistency across the set; CLS not regressed.
U4
Homepage redesign concepts (2–3 clickable staging routes)
Give you real, clickable homepage redesign options to choose from.
Approach
Build 2–3 visually distinct directions (e.g. bold-editorial, cinematic-hero, product-forward), each a full noindex route on staging, all inside the brand palette (black / white / warm-cream; brand blue sparing only, never dominant). Concept imagery via imagegen (never bottle renders).
Tests
Each concept renders end-to-end and responsive; concepts carry noindex and are absent from the sitemap; they don't alter the live homepage or shared components.
Verify
You click through all concepts on staging and pick a direction. Building the winner is deferred follow-up.
PHASE C
Cocktail Section
A real hub, the full canonical library, and fixed indexing.
U5
Cocktail hub + expanded library + per-recipe prerender fix
An index/hub page linking every recipe, the full canonical library, and fixed indexing so recipes stop soft-404ing.
Depends
U1, U2 · sources the 12 canonical serves
Approach
Extract recipe data into a data module keyed by slug, seeded from the documented serves. Build a hub grid grouped by expression (Blanco / Reposado / Añejo). Complete the D5 checklist for the hub and every recipe — replace the broken prerender entry with a loop so each recipe ships a non-empty body.
Gate
Only publish recipes with approved names — hold the 2 unnamed Blanco serves + Extra Añejo (no signature serve) behind a content gate until you name them.
Tests
Hub lists all published recipes; curl of each recipe shows a populated body (not the empty shell); sitemap includes hub + published recipes; OG resolves; existing 3 recipes still render with Recipe schema.
Verify
All published recipe URLs prerender non-empty bodies; hub linked from nav; no soft-404; you approve the hub on staging.
PHASE D
Education Section + Quiz
A real education hub, the interactive quiz, and the newsletter tie-in.
U6
Education hub (adopts additive-free)
Turn the orphan additive-free page into a real education section with a hub that houses it and the quiz.
Approach
Build a /learn hub with cards for each topic — the additive-free explainer, the quiz, and stubs for future topics (how to taste, agave/NOM basics). Complete the D5 checklist. Internal-link from homepage + footer to build the education entity cluster (helps sitelinks).
Tests
/learn renders topic cards; prerenders a non-empty body; appears in sitemap; additive-free still works and links back.
Verify
/learn is indexable and linked from nav + footer; you approve on staging.
U7
Interactive tequila knowledge quiz
A shareable, client-side quiz ("how to sip / serve / taste") that scores the taker and offers newsletter signup on the result.
Approach
Net-new multi-step flow (useState + shadcn radio-group + progress + button). ~6–8 questions, a scored result screen with a shareable summary, and an email-capture CTA on the result. The prerendered body carries a crawlable summary so it ranks + unfurls. Question copy drafted by Martin, approved by you before publish.
Tests
All-answered → correct score + result tier; no-answer disables next; back preserves answers; already-subscribed / invalid email handled; route prerenders + OG unfurls; capture records source: 'quiz'.
Verify
Quiz completes end-to-end on staging; score logic correct; capture reaches the subscriber table; you approve copy + UX.
U8
Newsletter integration: quiz capture source + Welcome-email feature
Attribute quiz signups and promote the quiz to subscribers via the email that actually sends today.
Approach
Add 'quiz' to the valid capture sources (no migration). Add a quiz CTA block into the Welcome email builder. Because this edits approved-verbatim subscriber copy, the new CTA is approval-gated — you see the rendered email on the internal email surface before deploy. Follow the email-rendering gotchas; a dedicated drip step waits for drip activation.
Tests
A quiz signup writes source='quiz' + triggers the Welcome email; CTA renders in Gmail light + dark (readable link, no inverted-logo seam); existing sources unaffected; GA4 receives a capture event.
Verify
Test capture shows source='quiz'; Welcome email QA'd on real Gmail + internal surface and approved by you; GA4 DebugView shows the event.
06Risks & Mitigations
R1
Redoing in-flight design work. Staging is 92 commits ahead with staged design branches. Mitigation: U1 reconciles merged-vs-todo before any new CSS.
R2
Soft-404 regressions. Pages that skip the prerender checklist ship empty bodies. Mitigation: D5 checklist mandatory; verification curls the static body + checks sitemap.
R3
Publishing unnamed cocktails. 2 Blanco serves unnamed, Extra Añejo has no serve. Mitigation: content gate in U5; a naming to-do filed to your Todoist.
R4
Quiz-in-drip depends on a dormant runner. The drip runner is built but not deployed/scheduled; activating it is your separate call. Mitigation: v1 features the quiz in the Welcome email, which sends today.
R5
Brand-lock drift during redesign. Mitigation: concepts + polish bounded to black/white/warm-cream neutrals, brand blue reserved for sparing use only (never a page accent); locked logo/slogan; no gold; routed through the taste skills.
R6
Email copy is approval-gated. Editing Welcome-email copy touches verbatim-approved content. Mitigation: U8 shows you the rendered email before deploy.
R7
Prod merge gate. main requires the cloud codex-review check. Mitigation: all new UI to staging first; promote on your explicit "ship it" with a clean review.
07Success Metrics
- New cocktail, education, and quiz URLs are indexed (not soft-404) in Search Console within the crawl window.
- Cocktail recipe URLs stop soft-404ing (pre-existing bug closed).
- Quiz completion rate + email-capture rate tracked via a GA4 event.
- You select a homepage redesign direction from the concepts.
- Site reads "good" — your sign-off on the polish pass.
08Sequencing
U1 gates everything. U2 unblocks all styling. U5 and U6 run in parallel with U3/U4 once U2 lands. U7 needs U6; U8 needs U7.
U1 audit / map — SIGN-OFF GATE
├─ U2 design tokens
│ ├─ U3 polish pages
│ └─ U4 homepage concepts
├─ U5 cocktail hub + prerender fix [needs U2 for styling]
└─ U6 education hub [needs U2 for styling]
└─ U7 quiz ──► U8 newsletter wiring