How Golden Hour was made.

the one-sentence vibe

“A Sunday-morning magazine profile of a healer: literary, luminous, warm.”

Golden Hour is one of three deliberately unrelated concepts for Dr. Wells’s personal brand. This one bets everything on editorial calm: magazine typography, ivory paper, golden-hour photography, and one recurring motif: a golden thread that draws itself through her story as you scroll. Every design decision serves the same goal: make her feel credible, warm, and effortless to book.

palette: six colors, no more

• Paper #F6F1E7 Dominant ground: warm ivory
• Paper 2 #EDE5D2 Alternate sections
• Ink #211C14 Text, footer, primary button
• Ink 2 #554D3C Secondary text
• Gold #B07818 Rules, the thread, graphic accents
• Gold deep #815708 Accent text (AA on paper)

Solid colors only, no gradient fills. Body contrast is ≥ 10:1; the deep gold used for accent text holds ≥ 4.5:1 on paper (WCAG AA).

typography

Fraunces: display & body

Archivo: labels, buttons, folios

Fraunces is a variable serif with real optical sizing: the same family renders the huge soft-spoken display headings and the readable body text, so the whole page speaks in one voice. Italic Fraunces in deep gold is the only flourish, used for kickers and for the single emphasized word in each headline. Archivo carries the quiet machinery: nav, folios, buttons, form labels. Both are self-hosted WOFF2 with font-display: swap.

motion system

One engine: GSAP ScrollTrigger + Lenis smooth scroll, the premium storytelling stack. The inventory, kept deliberately short:

• The golden thread: the signature. An SVG path spanning the story section, drawn by scroll (strokeDashoffset scrubbed to progress).
• Hero entrance: headline lines and portrait unveil once, on load.
• Scroll reveals: single translate/opacity pass on section entries.
• Pull-quote: words brighten from 55% to full ink as you read down.
• Slow parallax inside image frames (transform-only, GPU-composited).

prefers-reduced-motion disables all of it, including Lenis, and the CSS default state is fully readable. If JavaScript fails entirely, nothing is hidden.

imagery

All photographs are AI-generated placeholders (portraits by GPT Image 2, scene photography by Higgsfield Soul 2.0, all prompted for medium-format golden-hour editorial photography) and are clearly marked in the HTML for replacement with real photographs of Dr. Wells; the recurring woman is a generic stand-in, not a real person. Images are resized at build time into responsive WebP sets by Astro’s image pipeline; only the hero is eagerly loaded.

accessibility & performance

• Semantic landmarks, skip-link, visible focus rings, logical tab order.
• Keyboard-complete: mobile menu is a real button with aria-expanded; FAQ uses native <details>.
• Static HTML from Astro: zero framework JS shipped; the only bundle is the motion script.
• Animations on transform/opacity only; images lazy-loaded with explicit dimensions (no layout shift).
• Budgets: LCP ≤ 2.5s, CLS ≤ 0.1, Lighthouse ≥ 85, verified before deploy.

the seams: what to replace

• Her real biography, dates, and the turning-point story (marked <!-- PLACEHOLDER --> in source).
• Items marked “to be confirmed” on Grounding (DD details, certification dates).
• Real engagements list on Speaking; fees and logistics on every offer page.
• Real photography: every image slot is annotated for a drop-in swap.
• Real contact email/phone; the booking form posts via Netlify Forms once claimed on a permanent account.

stack

Astro 5 (static output) · hand-written CSS on custom-property design tokens (no framework) · GSAP 3 + Lenis · Astro asset pipeline (sharp) · deployed to Netlify. Build: npm run build → dist/. This page: /guide, written alongside the site itself.