BrightKids

1. COLORS — Set the page background to #FFFFFF (pure white canvas) and soft off-white card surfaces to #F6F8FF (cool-tinted surface). Primary text is near-navy #1E2438; muted/secondary text is #6B7185. The primary brand color is blue #3E7BFA (main CTA, h2 italic emphasis, stats band fill). Accent/highlight is sunny yellow #FFC93C used for sticker badges and the "Best for families" pill. Playful pop colors are pink #FF6BA9 (Math cards, hero "homework" word, For Parents em accents), green #3DD68C (Science card, progress fills, checkmarks), and border/divider hairlines are #E8ECF7. The overall palette mood is: crayon-bright classroom bursting with confetti energy. 2. TYPOGRAPHY — Load "Baloo 2" from Google Fonts (weights 500, 600, 700, 800) for all headings, nav links, eyebrows, and buttons; load "Inter" (weights 400, 500, 600) for body and captions. Type scale: H1 74px / weight 800 / line-height 1.0 / letter-spacing -0.01em; H2 50px / weight 800 / line-height 1.04 / letter-spacing 0; H3 38px / weight 800 / line-height 1.1 / letter-spacing 0; H4 22–24px / weight 700 / line-height 1.25; Body-L 19px / weight 400 / line-height 1.6; Body 16px / weight 400 / line-height 1.65; Eyebrow/label 14px Baloo 2 weight 700 / line-height 1.4 / letter-spacing 0.02em (normal case, not all-caps); Caption 12–13px Inter weight 400. Special treatments: inside H1, wrap key words in <em> (font-style: normal) and color the first em #3E7BFA and the second em #FF6BA9 — no gradient needed, just per-word color swap. Section H2s also use a single <em> in blue #3E7BFA for the payoff word. 3. PAGE SECTIONS — Build the page in this exact order: sticky nav → hero (eyebrow sticker + H1 + desc + dual CTA + game-card visual with confetti) → trust band (4 icon+text trust signals on #F6F8FF strip) → subjects grid (3 full-color cards: Reading blue, Math pink, Science green, each with emoji, H3, body, age-tag pill) → how it works (3 numbered icon-circle steps on #F6F8FF bg) → for parents / for teachers (2 alternating text-left / text-right rows, each with 4 bullet checkmarks and a colored illustration panel) → stats band (4 big numbers on solid #3E7BFA background: 2M+, 4.9★, 12K, 94%) → testimonials (3 cards: parent, teacher, parent, each with 5 stars + quote + avatar) → pricing (3 plan cards: Free, Family featured, Schools, on #F6F8FF bg) → FAQ (4 accordion items, chunky 2px border, 18px radius) → final CTA (blue gradient box with confetti emoji corners + 2 buttons) → footer (4-column: brand blurb + Learn + For grown-ups + Company). Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The game card in the hero is the single most visually distinctive element: a white panel with border: 3px solid #1E2438, border-radius: 28px, padding: 24px, box-shadow: 8px 8px 0 #1E2438, width: 300px, position: relative, z-index: 1. Inside it sits a 4:3 aspect-ratio screen area with background: linear-gradient(160deg, #cfe0ff, #a8c4ff), border-radius: 18px, displaying a large 64px emoji mascot, then a Baloo 2 700 20px game title, then a progress row with a 10px-tall pill bar (#E8ECF7 track, #3DD68C fill at 72% width, border-radius 999px) and star emoji. This chunky offset shadow — not a blurred drop-shadow but a flat ink-block offset — is the visual signature that defines the sticker aesthetic. Apply the same 8px 8px 0 #1E2438 box-shadow pattern to parent-section illustration panels and the final CTA box. Buttons use the smaller variant: box-shadow: 0 5px 0 #2c5fd0 and on hover transform: translateY(2px) + box-shadow: 0 3px 0 #2c5fd0, transition: 0.12s ease. 5. COMPONENT SPECS — Primary button (.btn-blue): background #3E7BFA, color #fff, font-family Baloo 2, font-size 15px, font-weight 700, padding 11px 22px (hero override: 15px 30px), border-radius 16px, border none, box-shadow: 0 5px 0 #2c5fd0; hover: transform translateY(2px) + box-shadow 0 3px 0 #2c5fd0, transition 0.12s. Secondary/outline button (.btn-out): background #fff, color #1E2438, border: 2px solid #E8ECF7, padding 13px 26px, border-radius 16px, font-family Baloo 2 700; hover: border-color #3E7BFA, transition 0.2s. White CTA button (.btn-white): background #fff, color #3E7BFA, padding 16px 36px, border-radius 16px, box-shadow: 0 6px 0 rgba(0,0,0,0.15); hover: transform translateY(2px). Sticker badge: background #FFC93C, color #1E2438, font-family Baloo 2 700, font-size 14px, padding 7px 16px, border-radius 14px, box-shadow: 4px 4px 0 #e0a92c, transform: rotate(-2deg). Cards: border-radius 28px, padding 32px, 2px solid color border, box-shadow 6px 6px 0 rgba(26,26,46,0.12) for subject cards (or 8px 8px 0 #1E2438 for hero/parent cards). Nav: height 66px, sticky top 0, background rgba(255,255,255,0.94), backdrop-filter blur(12px), border-bottom 1px solid #E8ECF7. 6. COPY VOICE — Write for parents of children aged 4–11 whose core pain point is guilt-laden screen time: they want proof that digital time is genuinely educational, safe, and won't result in meltdowns at bedtime. Four example lines: headline "Learning that feels like play, not homework" (H1); subline "BrightKids turns reading, math, and curiosity into games kids ages 4–11 actually want to play"; stats-section label "94% of parents see improvement in the first month"; CTA headline "Learning they'll beg to keep doing." Banned phrases specific to this industry: "Fun for the whole family", "Gamified learning", "Educational platform", "Unlock your child's potential", "Award-winning curriculum". The voice is warm and honest — it names the problem (homework dread, screen guilt) and proves the solution with specifics (ages 4–11, 14-day trial, COPPA compliant, no ads ever). 7. BACKGROUND ZONES — There are three distinct background levels. Level 1 (primary canvas): #FFFFFF — used in hero, subjects, for-parents, testimonials, FAQ, and final CTA wrapper. Level 2 (soft surface): #F6F8FF — used in trust band, how-it-works, pricing section; set via border-top/bottom: 1px solid #E8ECF7 to frame it. Level 3 (bold fill): #1E2438 dark navy — footer only (background: #1E2438, color #fff). One gradient band: the stats section uses background: #3E7BFA (solid, no gradient), full viewport width, padding 90px 0, white text. The final CTA box uses background: linear-gradient(160deg, #3E7BFA, #5b8fff), border-radius 36px, max-width 780px, centered — it does NOT bleed edge-to-edge, it is a contained card. No repeating texture or pattern; visual interest comes from confetti shape SVGs and emoji scattered as absolutely positioned elements within the hero and CTA sections. 8. SCROLL ANIMATIONS — Attach class .reveal (opacity: 0; transform: translateY(24px); transition: opacity 0.55s cubic-bezier(0.34, 1.4, 0.64, 1), transform 0.55s cubic-bezier(0.34, 1.4, 0.64, 1)) to every heading, paragraph, card, and sticker. Use IntersectionObserver at threshold 0.12; on intersection add .in-view (opacity: 1; transform: none) and unobserve. Stagger sibling cards using data-delay="1/2/3" attributes that add transition-delay: 0.1s / 0.2s / 0.3s respectively. Headings animate first (no delay), then body copy (data-delay="1"), then CTA buttons (data-delay="2"). Card stagger within a 3-column grid: 0ms, 100ms, 200ms. Floating confetti shapes in the hero bob on a 6s CSS animation loop (transform: translateY alternating ±8px) and rotate ±5deg slowly — gate this loop behind a motion check. Honor prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } 9. RESPONSIVE — Desktop breakpoint: 1024px and above. Tablet: 768px–1023px. Mobile: 767px and below. At tablet (max-width: 1023px): hero grid collapses to 1 column and .hero-visual is hidden (display: none); subjects and how-it-works grids go from 3-col to 1-col; parent rows stack to 1-col with 40px gap; stats grid goes 4-col to 2-col; testimonials and pricing go 3-col to 1-col; footer goes 4-col to 2-col; H1 scales from 74px to 54px. At mobile (max-width: 767px): H1 42px, H2 34px; nav links list (.nl) display: none (hamburger not required — just hide links, keep logo + CTA button); trust items gap shrinks to 18px; stats grid goes to 1-col; CTA box H2 shrinks to 32px, padding 48px 24px; footer collapses to 1 col. All primary and secondary buttons go to width: 100% on mobile. Container .wrap padding shrinks from 80px sides to 24px 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. Also declare all CSS custom properties in :root at the top of your main stylesheet: --bg:#FFFFFF; --surface:#F6F8FF; --dark:#1E2438; --text:#1E2438; --muted:#6B7185; --blue:#3E7BFA; --yellow:#FFC93C; --pink:#FF6BA9; --green:#3DD68C; --border:#E8ECF7; --font-h:'Baloo 2',cursive; --font-b:'Inter',sans-serif. Set *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 } and body { background: var(--bg); color: var(--text); font-family: var(--font-b); -webkit-font-smoothing: antialiased; font-size: 16px; line-height: 1.6 }. 11. SEMANTIC HTML — Document structure: one <header> element wrapping <nav> (sticky, z-index 100). Then <main> containing one <section> per page block, each with a unique id: id="hero", id="trust", id="subjects", id="how-it-works", id="for-parents", id="stats", id="testimonials", id="pricing", id="faq", id="cta". Use <article> for each testimonial card and each pricing card. One <footer> element. There must be exactly one <h1> in the document (inside the hero section). Section headings are <h2>; card titles are <h3>; feature list labels are <h4>. SEO: <title> must be 60 characters or fewer — use "BrightKids — Learning That Feels Like Play". <meta name="description"> max 155 chars: "BrightKids turns reading, math, and curiosity into games kids ages 4–11 actually want to play — aligned to the curriculum, loved at home." og:image should be 1200×630px featuring the mascot on a blue #3E7BFA background with the BrightKids wordmark in white Baloo 2 800. Every <img> and emoji-as-illustration gets a descriptive alt attribute, e.g. alt="Owl mascot character on the Word Quest game screen". 12. FOOTER STRUCTURE — The footer uses background: #1E2438, color: #fff, padding: 64px 0 40px. Inside .wrap, a 4-column grid (grid-template-columns: 2fr 1fr 1fr 1fr, gap: 40px, margin-bottom: 48px): Column 1 (brand, 2fr): logo in Baloo 2 800 22px colored #FFC93C with 🌟 emoji prefix, followed by a 14px / rgba(255,255,255,0.5) brand blurb of 2–3 sentences ("Learning that feels like play for kids 4–11. Reading, math, and curiosity through games parents and teachers trust."). Column 2: heading "Learn" in 14px Baloo 2 700 rgba(255,255,255,0.5); links: Reading, Math, Science, All subjects. Column 3: heading "For grown-ups"; links: For parents, For schools, Pricing, Safety. Column 4: heading "Company"; links: About, Our team, Careers, Contact. All links: color rgba(255,255,255,0.7), font-size 14px; hover: color #FFC93C, transition 0.2s. Fine print row (border-top: 1px solid rgba(255,255,255,0.12), padding-top: 24px, flex space-between): left side "© 2025 BrightKids Learning · COPPA & GDPR-K compliant" in 12px rgba(255,255,255,0.35); right side "Privacy · Terms · Safety" same style. No social icons. No newsletter input. 13. UNIQUE INTERACTIVE — The FAQ section uses a plain-JS accordion (no library): each .faq-item has border: 2px solid #E8ECF7, border-radius: 18px, margin-bottom: 14px, overflow: hidden. The trigger is a <button class="faq-q"> (full width, text-align left, padding 20px 24px, Baloo 2 700 17px #1E2438, background none, border none, cursor pointer, display flex, justify-content space-between, align-items center, gap 16px). The button uses a CSS ::after pseudo-element: content '+', font-size 24px, color #3E7BFA. When the button receives a click event, toggle class .open on both the button and its next sibling .faq-a: button.open::after changes content to '−'. The answer panel .faq-a is display: none by default; .faq-a.open changes to display: block, padding 0 24px 20px, font-size 15px, color #6B7185, line-height 1.7. This accordion does NOT close other open items when one is opened — each item toggles independently. No CSS transition on the height (display toggle only, keeping the JS minimal). ARIA: each <button> needs aria-expanded="false" toggled to "true" on open, and aria-controls pointing to the id of the answer div; the answer div needs role="region" and aria-labelledby pointing back to the button id. — Prompt set generated with Claude Sonnet 4.6 —