Home / Ops / Housekeeping and Process

Affirmology Web Flow: Handoff to the Webpage-Building Chat

Updated Jun 13, 2026 · Affirmology_WebFlow_Handoff_v1.md

Affirmology Web Flow: Handoff to the Webpage-Building Chat

Copy-paste this into the chat that is building and updating the web pages. It aligns the live site with the video/marketing assets so the whole flow feels like one piece. Read Affirmology_PROJECT_STATE.md first; this is a supplement focused on the consumer web flow.

The consumer flow (in order)

1. Intake page (demo-site-v1/index.html, live at demo.affirmology.ai): name + birth date/time/place + email. On submit, the real custom audio + PDF report begin rendering on the backend.
2. Loading film / primer plays while the audio renders: Affirmology_Primer_v5.html. A cinematic cosmic trailer (Lily VO) that primes the listener. It ends on a "ready" hand-off with two buttons (see below).
3. Results page (you already have this: CLAUDE OUTPUTS/Affirmology/demo-site-v2/result.html, per PROJECT_STATE section 5): the ~2 minute web-native teaser (Lily trailer VO + music bed), ritual cue, the personalized audio player, an educational outro, a partial report reveal, and the two download buttons (MP3 + PDF). This handoff is to ALIGN that page with the trailer/upsell assets and the locked look, not to rebuild it. It must always reflect the exact person and chart entered, never a stock example.
4. Optional upsell / what's-in-store concept piece: Affirmology_WhatsInStore_v2.html (Lily VO, hammers the use cases). A marketing concept reel, not the results page. It now ends on the same two download boxes so the language matches.

What the two end-buttons must be (everywhere)

Not membership. The two actions are: - Download your audio (the rendered mp3 the user just heard) - Download your report (PDF) (the Sacred Audio Report)

In the primer and the upsell these are inert placeholders (commented /* wire to ... */). On the real results page, wire them to the rendered files returned by the backend (the /api/status/{job_id} response should carry the audio URL and the PDF URL). Status copy should read "ready," not "preparing," once the render is done.

Locked design system (match this exactly so it all feels like one brand)

• Palette: deep emerald #082c18 (page base), darker #061b10, gold #c89b3c, soft gold #d9b15a, bright gold #ecd9a8, cream #faf6ee, muted cream #cdbfa3, line #1e5238.
• Fonts: Cormorant Garamond (600, italic for emphasis) for headlines; Inter (300 to 400, light) for body; JetBrains Mono (uppercase, wide letter-spacing) for eyebrows, labels, and status.
• Aesthetic: spacey and cinematic, like a film trailer. Living starfield, soft aura-drift gradients, faint film grain, a vignette, a single gold point that breathes, golden constellation linework. Cold-to-warm arc on long experiences.
• Buttons are ceremonies: gold gradient surface, hover lift, gold glow. Emphasis words in serif headlines are italic gold.
• Technical: single-file HTML, NO external animation CDNs (they get blocked in preview; use built-in Web Animations API + CSS only). Test at 380px and 1440px.

Brand and copy rules (enforce on every page)

• Never use em dashes anywhere. Use periods, commas, or rewrite.
• "Subconscious Operating System" is the core brand frame.
• Sol, never "Soul," for Soledad Gabriela Ballard.
• Joe Dispenza may appear only as an external reference point (what is already out there), never as our own method.
• The live demo always renders the real custom audio for the exact person and chart. Never load a bundled or stock example. Do not use the Alex Carper render anywhere (it has a mid-track dropout).

Voices (three different assets, on purpose)

• Consumer trailer + upsell VO: ElevenLabs Lily (velvety British, voice id pFZP5JQG7iQjIQuC4Bku).
• The demo audio itself: ElevenLabs Charlotte (locked baseline).
• Investor video narrator: a deep male voice (per the investor brief).

Assets you can pull from (this chat built them)

• Affirmology_Primer_v5.html: the loading film. Single self-contained file, Lily VO embedded, dependency-free. Reuse its visual kit (starfield, aura, grain, vignette, breathing point, natal chart, Gene Keys wheel, Human Design bodygraph with lit centers/channels, audio-wave bridge) for the results page so they match.
• Affirmology_WhatsInStore_v2.html: the upsell concept (Lily VO Affirmology_WhatsInStore_VO_Lily_v1.mp3).
• Affirmology_TrailerVO_Lily_synced_v1.mp3 and Affirmology_TrailerVO_Sol_v1_script.md: the trailer VO and script.

Alignment checklist for the existing result.html

Since result.html already exists, the work is to make it match the trailer assets: - Same palette, fonts, and texture stack as above (so the teaser, audio player, and report reveal feel like one piece with the primer). - The teaser uses the Lily trailer VO; confirm it is the synced version and that the music bed sits under it. - Status copy reads "ready," not "preparing," once the render completes. - The two download buttons stay exactly: "Download your audio" and "Download your report (PDF)," wired to the real rendered files from /api/status/{job_id}. - Optionally lift visual components from Affirmology_Primer_v5.html: the lit-up Human Design bodygraph (centers and channels light in sequence), the audio-wave bridge (concentric sound rings + stacked waveforms), and the non-overlapping word-slot system, for the teaser and the report-reveal moments. - Two animation variants of the "video while audio loads" slot now exist (this chat's Affirmology_Primer_v5.html and the web-native teaser in result.html). Pick one as canonical so the flow is consistent; they share the look and the Lily VO.