How The Open Door was made.

The one-sentence vibe

“A handwritten letter of hope: sunlight on clay and paper.”

The Open Door is the “start smaller” concept: one warm scroll that covers her story, the three ways to work with her, her grounding, and the booking form. Where the other two concepts are a morning magazine and a midnight sanctuary, this one is a kitchen table: tactile, friendly, hand-made. Chunky borders, offset shadows, tilted cards, torn-paper edges, and a visible paper grain do the “hand-feel”; the door and the rising sun carry the message: you can just come in.

The headline act: zero JavaScript

This site ships 0 KB of JavaScript. Every animation (the sun rising behind the door as you scroll, its rays slowly turning, the cards drifting in) is native CSS scroll-driven animation (animation-timeline: view() and scroll()), wrapped in @supports so browsers without support simply see the finished page, and in prefers-reduced-motion so people who opt out of motion get stillness. The form is a plain HTML form (Netlify Forms). The menu is anchor links. HTML and CSS, doing everything.

Palette: six earth colors

• Clay #B04A24 Primary accent: buttons, stamps, the sun
• Clay deep #9E401F Hovers, AA text accent
• Sand #F3EADD Dominant ground: warm paper
• Sand 2 #EADDC7 Alternate sections
• Sage #7A8B6F Secondary ground: the “ways” section
• Soil #2E2418 Text, borders, the booking section

Typography

Bricolage Grotesque: the voice

Source Serif 4: the letter

Bricolage Grotesque has a warm, slightly irregular character that suits the hand-made collage; Source Serif 4 keeps the body text bookish and kind. Both are variable fonts, self-hosted as WOFF2 with font-display: swap and preloaded. Nothing shared with the other two concepts.

Illustration

The door, the speaker, the tea circle, and the sprout are AI-generated true vector SVGs (Recraft V4.1 in vector mode via Higgsfield), palette-locked to the site colors: 20–80 KB each, infinitely sharp, no photography anywhere on the page. The people depicted are generic illustrations, not real likenesses. The sun, squiggle underline, torn edges, stamps, and favicon are hand-written SVG. Each illustration slot is marked in source if real photography is preferred later.

Accessibility & performance

• No JS means nothing to fail: the page is complete HTML at first paint.
• Skip-link, landmarks, labeled form fields, ≥48px touch targets, visible focus.
• Contrast: soil on sand ≈ 12:1; sand on sage ≥ 4.5:1; all pairs AA or better.
• Grain, tilts, and shadows are pure CSS: no images to load for texture.
• Budgets: LCP ≤ 2.5s, CLS ≤ 0.1, Lighthouse ≥ 85, verified before deploy.

The seams: what to replace

• Her real story beats, credentials, fees, and logistics: every <!-- PLACEHOLDER --> in the source.
• The testimonial is a clearly-marked fabricated example; swap in a real one, with permission.
• Contact email/phone; the form activates via Netlify Forms on a permanent account.

Stack

Astro 5 static · hand-written CSS design tokens · native CSS scroll-driven animation · zero JavaScript · Netlify. Build: npm run build → dist/.

← Back to the site