Serene

1. COLORS — Set the page background to #F4F1EA (warm beige), card/panel surfaces to #FBFAF6, the soft sage alt-band to #E4ECE2, primary text to #2A2620 (deep sage-charcoal), muted/secondary text to #776F62, the primary action color to #7FA38A (sage green) with a hover/pressed state of #5E8268, and the dusty-rose accent to #D7A6A0. The hairline border token is #E5DFD3 (1px solid). The CTA gradient is linear-gradient(135deg, #9CC0A8 0%, #7FA38A 100%). The overall palette mood is: "a warm exhale in a sunlit room." 2. TYPOGRAPHY — Import both fonts from Google Fonts: Fraunces (optical-size axis, weights 400/500/600, italic variant included) and Inter (weights 400/500/600). Type scale: H1 68px / weight 500 / line-height 1.06 / tracking -0.01em; H2 52px / weight 500 / line-height 1.08 / tracking -0.01em; H3 28px / weight 500 / line-height 1.25 / tracking 0; H4 20px / weight 500 / line-height 1.4 / tracking 0; Body-L 19px / weight 400 / line-height 1.7 / tracking 0; Body 17px / weight 400 / line-height 1.7 / tracking 0; Eyebrow/label 12px / weight 600 / line-height 1.5 / letter-spacing 0.10em / text-transform uppercase; Caption 13px / weight 400 / line-height 1.6 / tracking 0. All headings use Fraunces; all body and UI text uses Inter. Key special treatment: any italic <em> inside an H1 or H2 receives color #5E8268 (sage-deep) — this is the signature gradient-word effect achieved with font-style italic + color override, not a CSS gradient. 3. PAGE SECTIONS — Full mandatory section order from top to bottom: sticky nav → hero (eyebrow + H1 + subline + dual CTAs + floating cards + blob background) → how-it-works (3-step grid with blob icons: "Tell us what you need / Get matched in 48 hours / Start your way") → therapist grid (3 cards: Dr. Amara Osei PhD, James Okafor LMFT, Sofia Marchetti LCSW — each with photo zone, credentials line, specialty tags) → manifesto blockquote (centered italic serif quote + attribution) → reassurance bar (4-column sage-green band: Fully confidential / Insurance accepted / Switch anytime / No commitment) → testimonials (centered featured quote from Hannah B. with large opening curly-quote in dusty rose) → FAQ accordion (5 items) → final CTA panel (eyebrow + H2 + subline + dual CTAs, radial rose blob) → footer. Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The organic blob shape is the single most visually distinctive element. Blobs are defined by the CSS border-radius shorthand: border-radius: 62% 38% 46% 54% / 54% 48% 52% 46% — four independent radii per axis creating asymmetric organic curves. Hero blob 1 (top-right): 480×480px, background linear-gradient(160deg, rgba(127,163,138,0.30), rgba(127,163,138,0.08)), position absolute top -8% right -6%, z-index 0. Hero blob 2 (bottom-left): 360×360px, background linear-gradient(160deg, rgba(215,166,160,0.25), rgba(215,166,160,0.06)). Manifesto and CTA sections use a centered radial glow instead: radial-gradient(circle, rgba(127,163,138,0.12), transparent 65%) at 600×600px. Therapist photo zones are not clipped SVG masks in the HTML — they are colored gradient rectangles at aspect-ratio 4/3 standing in for blob-masked photos. Cards do not use backdrop-filter. Blobs define the aesthetic because they replace all hard geometric framing with breathing, asymmetric softness that signals safety. 5. COMPONENT SPECS — Primary button (.btn-sage): background #7FA38A, color #ffffff, font-size 14px nav / 16px hero and CTA, font-weight 600, padding 10px 22px nav / 14px 28px hero / 16px 34px final CTA, border-radius 999px (full pill), border none; hover: filter brightness(0.95) + transform translateY(-1px), transition 0.2s. Secondary button (.btn-out): background transparent, color #2A2620, border 1.5px solid #E5DFD3, border-radius 999px, padding 14px 28px, font-size 15px, font-weight 500; hover: background #E5DFD3, transition 0.2s. Cards (.ther-card): background #F4F1EA, border 1px solid #E5DFD3, border-radius 20px, overflow hidden; hover: box-shadow 0 12px 40px rgba(42,38,32,0.08) + transform translateY(-4px), transition 0.2s. Floating cards (.float-card): background #FBFAF6, border 1px solid #E5DFD3, border-radius 18px, padding 16px 20px, box-shadow 0 16px 48px rgba(42,38,32,0.12). Nav: height 64px, background rgba(244,241,234,0.92), backdrop-filter blur(12px), border-bottom 1px solid #E5DFD3, position sticky top 0. 6. COPY VOICE — Audience: adults considering therapy for the first time, or those who have delayed getting help due to friction — busy, skeptical of cost, uncertain if they're "bad enough" to need it. Core pain point: they want help but the process of finding a therapist feels overwhelming and defeating. Example headlines: "Therapy that meets you where you are" / "Getting started is the hardest part. We made it easy." / "You don't have to be in crisis to deserve support." / "The first step is the only hard one." Supporting copy example: "Serene matches you with a licensed therapist in 48 hours. Video, phone, or message-based sessions that fit around your life — not the other way around. Start when you're ready." Banned generic phrases specific to this industry: "Take the first step to a better you", "Mental health made simple", "Talk to someone today", "Affordable therapy for everyone", "Everything you need to feel better." 7. BACKGROUND ZONES — Four distinct background levels. Zone 1: #F4F1EA (warm beige) — page base, hero, how-it-works, testimonials, CTA, footer. Zone 2: #FBFAF6 (near-white surface) — therapist grid section background, FAQ section background, floating cards. Zone 3: #7FA38A (sage solid) — reassurance bar, full-bleed edge-to-edge, color #ffffff text. Zone 4: transparent blob overlays — hero has two absolutely-positioned blob divs (sage and rose), manifesto has a centered radial sage glow (radial-gradient(circle, rgba(127,163,138,0.12), transparent 65%)), CTA section has a centered radial rose glow (radial-gradient(circle, rgba(215,166,160,0.16), transparent 65%)). Section borders are separated by 1px solid #E5DFD3 hairlines, not heavy dividers. No texture or repeating pattern is used — separation comes from background color zones and blob fields only. 8. SCROLL ANIMATIONS — All animating elements carry class .reveal with initial state: opacity 0, transform translateY(24px), transition opacity 650ms cubic-bezier(0.16, 1, 0.30, 1), transform 650ms cubic-bezier(0.16, 1, 0.30, 1). IntersectionObserver fires at threshold 0.12; once in view, class .in-view is added (opacity 1, transform none) and element is unobserved. Stagger via data-delay attributes: data-delay="1" → transition-delay 120ms, data-delay="2" → transition-delay 220ms, data-delay="3" → transition-delay 320ms. Animated elements: eyebrow labels, h1, hero description, hero CTAs, hero note, hero visual, section headings, how-it-works cards (staggered), therapist cards (staggered), manifesto blockquote + cite, reassurance grid items, testimonial quote + meta, FAQ items, final CTA box. Slide distance is 24px. Honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 9. RESPONSIVE — Breakpoints: Desktop ≥1024px, Tablet/Mobile ≤1023px, Mobile ≤767px. At ≤1023px: hero collapses to single column (hero-visual hidden, display:none), how-it-works grid 3-col → 1-col, therapist grid 3-col → 1-col, reassurance grid 4-col → 2-col, footer grid (2fr 1fr 1fr 1fr) → 2-col (1fr 1fr). At ≤767px: H1 scales 68px → 42px, H2 scales 52px → 34px, manifesto blockquote scales 42px → 28px, CTA H2 scales 54px → 36px; nav links (.nl) hidden (display:none — hamburger not implemented in this template); reassurance grid 2-col → 1-col; footer grid → 1-col. Body text stays 17px at all breakpoints. Buttons do not go full-width in the HTML reference — they remain inline flex with flex-wrap on the CTA row. 10. CRITICAL CSS — Always include these exact overrides: Add a <style> tag before </head> containing: body { flex-direction: column !important; align-items: stretch !important; } .wrap { width: 100%; margin: 0 auto; padding: 0 80px; } — these are required because Framer Embed wraps the iframe document body in display:flex which otherwise stacks all top-level elements (nav, main, footer) horizontally. The nav inner container uses max-width 1140px with margin 0 auto. Section content uses .wrap (padding 0 80px) as the width-constraining wrapper, not section itself, so background colors bleed full-width while content is centered. 11. SEMANTIC HTML — Document structure: <header> is not used — nav sits directly in body before <main>. <main> contains one <section> per content block with class-based IDs: .hero, .how-sec, .ther-sec, .manifesto, .reassure, .testi-sec, .faq-sec, .cta-sec. Therapist and quote cards use <article> tags. <footer> closes the document. Exactly one <h1> in the hero section. H2 used for all section headings. H3/H4 not used at section level — therapist names use .ther-name (styled as 20px Fraunces). SEO: <title> = "Serene — Therapy That Meets You Where You Are" (49 chars). <meta name="description"> = "Serene matches you with a licensed therapist in 48 hours. Video, phone, or message-based therapy that fits your life — not the other way around." (144 chars). og:image: 1200×630px calm blob scene with sage and beige tones. Every therapist photo zone and illustration emoji requires a descriptive alt attribute describing the person and their role. 12. FOOTER STRUCTURE — Four-column grid: column 1 (2fr) — brand wordmark in Fraunces 22px weight 500, tagline paragraph in Inter 14px color #776F62; column 2 (1fr) — heading "SERENE" in 11px uppercase Inter weight 600 tracking 0.10em color #776F62, links: How it works / Our therapists / Approaches / Pricing; column 3 (1fr) — heading "SUPPORT", links: Help center / Insurance / Crisis resources / Contact; column 4 (1fr) — heading "COMPANY", links: About / For therapists / Careers / Privacy. All link text 14px color #776F62, hover color #2A2620, transition 0.2s. Footer bottom bar: border-top 1px solid #E5DFD3, padding-top 28px, flex row space-between. Left: "© 2025 Serene Health Inc. · If you are in crisis, call 988 (US)." — 12px color #776F62. Right: "HIPAA-compliant · Privacy · Terms" — 12px color #776F62. No social icons. No newsletter input. Footer background is #F4F1EA (same as page base), padding 72px top 48px bottom. 13. UNIQUE INTERACTIVE — The FAQ accordion (section .faq-sec) is the primary custom interaction. There are 5 items; each is a .faq-item div containing a <button class="faq-q"> and a sibling <div class="faq-a">. Default state: .faq-a has display:none. The question button renders a + indicator via CSS ::after { content: '+'; font-size: 22px; color: #776F62 }. On click, JavaScript toggles class .open on both the button and the answer div: button.open::after changes content to '−' and color to #5E8268; .faq-a.open changes display to block (no animated height transition — it is a hard show/hide). Multiple items can be open simultaneously — there is no "close others when one opens" behavior in this implementation. Clicking the same button again removes .open from both elements, hiding the answer. ARIA attributes required for accessibility: each <button> needs aria-expanded="false" (toggled to "true" when open) and aria-controls pointing to the answer div's id; each answer div needs role="region" and aria-labelledby pointing to the button's id. The question text uses Fraunces 18px weight 500; answer text uses Inter 16px color #776F62 line-height 1.75, padding-bottom 24px. — Prompt set generated with Claude Sonnet 4.6 —