Lumara

1. COLORS — Set the page background to #FAF6F0 (warm cream), card/panel surfaces to #FFF9F2 (lifted cream), sage-light tint sections to #D4E9D8, primary text to #2B2620 (deep charcoal-brown), muted/secondary text to #8A7D72, primary action color to #7FAE8A (sage green), hover/deep sage to darken by 10% with filter:brightness(.9), soft coral accent to #F27F6B (used only on italic heading words and sparse highlights), borders and hairlines to #EDE3D8, and the dark manifesto/CTA band to #2B2620 (same as text). The hero blob fill uses linear-gradient(160deg, #D4E9D8 0%, #EDD9CE 100%) at 70% opacity. The palette mood is: "morning light through linen curtains — nature-grounded, never clinical." 2. TYPOGRAPHY — Load "DM Serif Display" (serif, supports italic) and "DM Sans" (sans-serif, weights 400/500/600) from Google Fonts via a single <link> tag. Type scale: H1 72px / DM Serif Display / weight 400 / line-height 1.05 / tracking 0 (italic em word in sage #7FAE8A); H2 52px / DM Serif Display / weight 400 / line-height 1.08 / tracking 0 (italic em phrase in sage); H3 36px / DM Serif Display / weight 400 / line-height 1.15 / tracking 0 (italic em word in coral #F27F6B); H4 20px / DM Sans / weight 500 / line-height 1.35 / tracking 0; Body-L 19px / DM Sans / weight 400 / line-height 1.65 / tracking 0; Body 17px / DM Sans / weight 400 / line-height 1.65 / tracking 0; Eyebrow/label 12px / DM Sans / weight 500 / line-height 1.4 / letter-spacing 0.10em / text-transform: uppercase / color #8A7D72; Caption 13px / DM Sans / weight 400 / line-height 1.5. The manifesto blockquote is DM Serif Display 48px italic, color #FAF6F0, max-width 860px centered. The logo uses DM Serif Display 22px italic in #2B2620. Never use General Sans or Inter — the HTML uses DM Serif Display + DM Sans. 3. PAGE SECTIONS — Render sections in this exact order: sticky nav → hero (eyebrow + H1 with italic sage word + 19px sub + dual CTA + hero-note micro-copy + right-side blob visual with floating app card) → stats band (3 numbers separated by 1px #EDE3D8 grid lines, italic DM Serif Display 64px sage figures) → feature showcase (section header + 3 alternating text/blob-visual rows: Sleep Meditations, Breathwork, Somatic Practices) → manifesto band (#2B2620 bg, centered italic serif blockquote + cite line) → testimonials (one large sage-filled card at 2fr + two stacked white cards at 1fr) → FAQ accordion (5 visible questions, collapse/expand) → final CTA band (#2B2620 bg, italic H2 + sage pill button + ghost outline button) → footer (4-column grid, brand blurb + 3 link columns). 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. Apply it via: border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% on any div with class "blob"; hero blob is 380px × 380px, filled with linear-gradient(160deg, #D4E9D8 0%, #EDD9CE 100%), opacity: 0.7, no border, no box-shadow, position: relative inside a flex centering container. Feature visual blobs use aspect-ratio: 4/3, border-radius: 24px (standard card radius, not the organic form), overflow: hidden. The floating app card overlays the hero blob: position: absolute, background: #FFF9F2, border: 1px solid #EDE3D8, border-radius: 20px, padding: 24px, box-shadow: 0 20px 60px rgba(43,38,32,0.12), width: 220px. Blobs define the aesthetic because they replace hard rectangles with body-like, breathing organic forms — every frame feels alive, not gridded. 5. COMPONENT SPECS — Primary button (.btn-sage): background #7FAE8A, color #ffffff, padding 10px 20px (nav size) or 14px 28px (hero size) or 16px 36px (CTA size), border-radius 999px (pill), font DM Sans 14–16px weight 500, hover: filter:brightness(0.9) + transform:translateY(-1px), transition: filter 0.2s, transform 0.15s. Secondary / outline button (.btn-out): background transparent, color #2B2620, border: 1.5px solid #EDE3D8, same radius and padding as primary at same size context, hover: background #EDE3D8, transition: background 0.2s. Ghost inverted (CTA section): background transparent, color #FAF6F0, border: 1.5px solid rgba(250,246,240,0.25), hover: background rgba(250,246,240,0.08). Cards: border-radius 20–24px, padding 28px, background #FFF9F2, border: 1px solid #EDE3D8, box-shadow: 0 12px 40px rgba(82,103,74,0.08). Nav: height 64px, background rgba(250,246,240,0.92), backdrop-filter: blur(12px), border-bottom: 1px solid #EDE3D8, position: sticky, top: 0, z-index: 100. 6. COPY VOICE — Target audience: busy professionals, new parents, and people rebuilding rest routines after burnout — their core pain point is a mind that won't stop running at bedtime. Four example headlines: "Rest as a practice, not a reward" (H1); "Guided to sleep, not just relaxed" (H3); "Your nervous system knows what to do" (H3); "You are not a productivity engine that needs to be recharged" (manifesto blockquote). Five banned phrases for this vertical: "Find your zen", "Unlock your best self", "Start your wellness journey", "Transform your life", "Everything you need to feel better". Copy must cite specific numbers ("Average time to sleep: 8 minutes", "640K people sleeping better", "3 weeks avg to better sleep") and name real techniques (somatic scan, TRE, 4-7-8 breathing, physiological sigh, polyvagal theory). Tone is warm, specific, never aspirational-generic — write as a quietly confident practitioner, not a startup marketing team. 7. BACKGROUND ZONES — Three distinct background levels: Zone 1 (page base) #FAF6F0 — used in hero, stats band, testimonials, footer; Zone 2 (lifted surface) #FFF9F2 — used in feature showcase section and FAQ section as section background (also used for all card fills); Zone 3 (dark band) #2B2620 — used in manifesto section (padding 160px 0) and final CTA section (padding 160px 0), both full viewport-width, no max-width container clipping the background. The hero blob gradient linear-gradient(160deg, #D4E9D8 0%, #EDD9CE 100%) is contained within the 380px blob shape, not a full-section band. Stats band uses #FAF6F0 background with a 1px #EDE3D8 grid between cells (background: #EDE3D8 on the grid container, 1px gaps). No repeating texture or pattern — white space and color alone create depth. 8. SCROLL ANIMATIONS — All elements with class "reveal" start at opacity: 0 and transform: translateY(24px). On IntersectionObserver entry (threshold 0.12), add class "in-view": opacity: 1, transform: none. Transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1). Stagger delays via data-delay attribute: data-delay="1" → transition-delay: 0.1s; data-delay="2" → 0.2s; data-delay="3" → 0.3s. Animated elements: eyebrow labels, H1, hero paragraph, hero CTA row, hero-note, hero visual, stat items, section headings, feature rows, manifesto blockquote, testimonial cards, FAQ items, CTA block. Each IntersectionObserver entry calls o.unobserve(el) so animation fires once only. Honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 9. RESPONSIVE — Breakpoints: desktop ≥1024px, tablet 768–1023px, mobile ≤767px. Hero grid: desktop 2-col (1fr 1fr, gap 64px) → tablet 1-col (hero-visual display:none) → mobile 1-col (hero-visual display:none). Feature rows: desktop 2-col (1fr 1fr, gap 64px) → tablet 1-col (gap 40px, reversed rows reset order:unset) → mobile 1-col. Stats grid: desktop 3-col (repeat(3,1fr)) → tablet 1-col (gap:0, each item full width). Testimonials: desktop 2fr/1fr grid → tablet 1-col. Footer: desktop 4-col (2fr 1fr 1fr 1fr) → tablet 2-col → mobile 1-col. Nav links (.nl): visible desktop/tablet → display:none mobile. H1: 72px desktop → 44px mobile. H2 (section heads): 52px desktop → 36px mobile. Manifesto blockquote: 48px desktop → 28px mobile. CTA H2: 56px desktop → 38px mobile. Body text stays 17px at all breakpoints. Container .wrap: padding 0 80px desktop; allow natural collapse on mobile. 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. Additionally ensure: *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: #FAF6F0; color: #2B2620; font-family: 'DM Sans', sans-serif; -webkit-font-smoothing: antialiased; font-size: 17px; line-height: 1.65; } All sections must be direct children of <main> or structural containers — never nest sections inside divs that carry display:flex without an explicit flex-direction:column reset. 11. SEMANTIC HTML — Document structure: <header> contains only <nav>; <main> contains one <section> per content block with descriptive IDs (id="hero", id="stats", id="features", id="manifesto", id="testimonials", id="faq", id="cta"); <footer> is a sibling of <main>. Testimonial and pricing items use <article>. Exactly one <h1> in the hero section. Heading hierarchy: h1 (hero) → h2 (each section title) → h3 (feature sub-heads). SEO: <title> format "Lumara — Rest as a Practice, Not a Reward" (51 chars); <meta name="description" content="Lumara is a guided wellness app with sleep meditations, breathwork, and somatic practices designed for people who can't turn their mind off." (148 chars); og:image should depict the organic blob with floating app card at 1200×630px. Every <img> gets descriptive alt text (e.g., alt="Soft lifestyle photo of morning light through a window with a cup of tea on a wooden table"). 12. FOOTER STRUCTURE — Four-column grid: column 1 (2fr) is the brand column — italic DM Serif Display 22px logo "Lumara" + 14px DM Sans muted paragraph "Guided sleep meditations, breathwork, and somatic practices for people who can't turn their mind off. Available on iOS and Android."; column 2 (1fr) headed "PRACTICE" (11px / weight 600 / letter-spacing 0.10em / uppercase / color #8A7D72) with links: Sleep, Breathwork, Somatic, Programs; column 3 (1fr) headed "SCIENCE" with links: Research, Methodology, Blog, Podcast; column 4 (1fr) headed "COMPANY" with links: About, Pricing, Careers, Contact. Column headings: font-size 11px, font-weight 600, letter-spacing 0.10em, text-transform uppercase, color #8A7D72, margin-bottom 18px. Links: color #8A7D72, font-size 15px, hover color #2B2620, transition: color 0.2s, list-style none, margin-bottom 10px each. Bottom bar: border-top 1px solid #EDE3D8, padding-top 28px, flex row space-between, two 12px muted paragraphs: left "© 2025 Lumara Health Inc. · Wellness practices, not medical advice." and right "Privacy · Terms · Accessibility". No social icons. No newsletter input. 13. UNIQUE INTERACTIVE — The FAQ accordion uses a plain <button class="faq-q"> per question inside a .faq-item div, with a sibling <div class="faq-a"> for the answer. Default state: .faq-a { display: none; } and button::after { content: '+'; font-size: 22px; color: #8A7D72; }. On click, toggle both .open classes: .faq-q.open::after { content: '−'; color: #7FAE8A; } and .faq-a.open { display: block; }. This accordion does NOT auto-close other items — multiple can be open simultaneously. The JS is a single forEach loop: document.querySelectorAll('.faq-q').forEach(btn => { btn.addEventListener('click', () => { btn.classList.toggle('open'); btn.nextElementSibling.classList.toggle('open'); }); }). No transition on height — display:none/block only, keeping implementation minimal. ARIA requirements: each <button> needs aria-expanded="false" (toggled to "true" on 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. Five questions are rendered in the HTML; question text must be specific and candid, not generic ("Is Lumara just another meditation app?" not "How does it work?"). — Prompt set generated with Claude Sonnet 4.6 —