Sonata

1. COLORS — Use the following exact color tokens: --bg #0A0710 (page background, near-black violet), --surface #13101D (showcase section and footer background), --layer #1C1828 (elevated panels), --text #F0EDF7 (primary text), --muted #8B85A0 (secondary text and nav links), --magenta #E6336B (primary brand action, eyebrow labels, scrubber fill), --violet #8B5CF6 (accent, quality chip text, pricing checkmarks), --grad linear-gradient(135deg, #E6336B 0%, #8B5CF6 100%) (hero glow, play button, logo, now-playing scrubber, CTA heading em), --border rgba(139,92,246,0.16) (hairline dividers throughout). The palette mood is: neon-lit after-dark club where the signal is magenta and the silence is violet. 2. TYPOGRAPHY — Use Space Grotesk (Google Fonts: "Space Grotesk:wght@400;500;600;700") for all headings and the logo; use Inter (Google Fonts: "Inter:wght@400;500") for body, nav links, buttons, and captions. Type scale: H1 76px / weight 700 / line-height 1.0 / letter-spacing -0.03em; H2 52px (section headers) or 44px (showcase) / weight 600 / line-height 1.06 / letter-spacing -0.02em; H3 32px / weight 600 / line-height 1.2 / letter-spacing -0.01em; H4 19px (bento card titles) / weight 600; Body-L 19px / weight 400 / line-height 1.6; Body 16–17px / weight 400 / line-height 1.6–1.7; Eyebrow 12px / weight 600 / letter-spacing 0.10em / UPPERCASE / color #E6336B; Caption/track-meta 11–13px / weight 400 / letter-spacing 0.02–0.04em. Apply gradient text (--grad, -webkit-background-clip: text, -webkit-text-fill-color: transparent) to the logo, to any <em> inside h1 and h2 headings, and to the large stat numbers and bento metric. The hero H1 wraps across three lines: "Lossless / streaming with / soul" where "soul" is the gradient em word. 3. PAGE SECTIONS — Build every section in this exact order: sticky nav → hero (eyebrow + H1 + subline + dual CTA + 3×3 album mosaic grid) → now-playing bar (glass frosted bar with cover art, track info, scrubber, quality chip, play button) → features bento (eyebrow + H2 + 5-cell bento grid: one wide 2-column cell for lossless intro, one cell with "90M" gradient metric, and three standard cells for curated discovery, artist payout, offline hi-fi) → discovery showcase (eyebrow + H2 with gradient em + body paragraph + bullet list with ♪ prefix + 2×2 playlist card grid, laid out 1fr 1fr) → stats band (4 gradient numbers: 90M lossless tracks, 24-bit on every song, 2× artist payout rate, 1.2M subscribers) → pricing (eyebrow + H2 + 3-tier grid: Free $0, Premium $11 featured, Family $18) → final CTA section (centered eyebrow + H2 with gradient em + subline + dual buttons) → footer. Never ship just hero + one feature section + pricing — the full section sequence is mandatory. 4. SIGNATURE ELEMENT — The glass now-playing bar is the single most visually distinctive element. Its exact CSS: background rgba(255,255,255,0.04), border 1px solid rgba(139,92,246,0.16), border-radius 18px, backdrop-filter blur(12px), padding 16px 22px, display flex, align-items center, gap 20px, max-width 920px, margin 0 auto, position relative, overflow hidden. A top-edge highlight is applied via ::before: content '', position absolute, top 0, left 0, right 0, height 1px, background linear-gradient(90deg, transparent, rgba(230,51,107,0.5), transparent). The scrubber track is height 4px, background rgba(255,255,255,0.10), border-radius 999px; the fill is width 42%, background linear-gradient(135deg,#E6336B,#8B5CF6). The quality chip reads "24-BIT · 96kHz", styled background rgba(139,92,246,0.15), border 1px solid rgba(139,92,246,0.16), color #8B5CF6, font-size 10px, font-weight 700, letter-spacing 0.04em, padding 5px 10px, border-radius 6px. This element defines the aesthetic because it makes an abstract technical claim (lossless audio) tangible and tactile at the exact moment the user considers signing up. 5. COMPONENT SPECS — Primary button (.btn-p): background linear-gradient(135deg,#E6336B,#8B5CF6), color #fff, padding 10px 22px (nav variant) or 14px 30px (hero) or 16px 36px (CTA), border-radius 999px, border none, font-family Inter, font-size 14–16px, font-weight 600; hover: opacity 0.92, transform translateY(-1px), transition opacity 0.2s and transform 0.15s. Secondary button (.btn-s): background rgba(255,255,255,0.04), border 1px solid rgba(139,92,246,0.16), color #F0EDF7, font-size 15px, font-weight 500, padding 14px 28px, border-radius 999px; hover: background rgba(255,255,255,0.08), transition 0.2s. Ghost button: background none, border none, color #8B85A0, font-size 14px; hover: color #F0EDF7. Cards (.b-cell, .p-card): background rgba(255,255,255,0.03), border 1px solid rgba(139,92,246,0.16), border-radius 18px, padding 32px (bento) or 38px 30px (pricing); bento hover: border-color rgba(230,51,107,0.4), transition border-color 0.2s. Featured pricing card: border-color rgba(230,51,107,0.5), box-shadow 0 0 50px rgba(230,51,107,0.10). Nav: height 64px, position sticky, top 0, z-index 100, background rgba(10,7,16,0.85), backdrop-filter blur(16px), border-bottom 1px solid rgba(139,92,246,0.16). 6. COPY VOICE — The audience is music obsessives, audiophiles, and playlist curators aged 22–38 who feel patronized by mainstream streaming platforms and want to hear the music the way the artist intended. Core pain point: their streaming service compresses audio to 320kbps and algorithmically feeds them the same 40 songs. Use exactly these four headline/subline pairs: (a) "Lossless streaming with soul" / "Sonata streams every track in 24-bit lossless audio — no compression, no shortcuts"; (b) "Built for people who can hear the difference" / "Most streaming services compress audio to 320kbps and call it high quality. Sonata doesn't compress at all"; (c) "Recommendations from ears, not engagement" / "Weekly discovery mixes seeded by a rotating panel of musicians and refined by what you actually replay"; (d) "The first time you hear it lossless, you'll know" / "30 days free, full resolution, no ads. Bring your good headphones." Banned generic phrases for this industry: "Music for everyone", "Listen now" (as the only CTA message), "Millions of songs" (as the only selling point), "Stream anything, anywhere", "Your music, your way". 7. BACKGROUND ZONES — There are three distinct background levels. Zone 1: #0A0710 (near-black violet) used for the page body, nav (with 0.85 opacity overlay), hero, features bento section, now-playing bar area, pricing section, and final CTA section. Zone 2: #13101D used for the discovery showcase section and the footer (background var(--surface)). Zone 3: the stats band uses a gradient overlay on #0A0710 — exact CSS background: linear-gradient(135deg, rgba(230,51,107,0.10), rgba(139,92,246,0.06)) — this bleeds edge-to-edge and is bounded by a 1px rgba(139,92,246,0.16) border on top and bottom. The hero has an atmospheric right-side glow: position absolute, top -10%, right -5%, width 700px, height 700px, background radial-gradient(circle, rgba(139,92,246,0.18), transparent 65%), pointer-events none. The final CTA has a centered ellipse glow: width 600px, height 400px, background radial-gradient(ellipse, rgba(139,92,246,0.20), transparent 70%). No texture or pattern is used — texture comes from album art tiles only. 8. SCROLL ANIMATIONS — Every section element with class .reveal starts at opacity 0 and transform translateY(24px). On IntersectionObserver entry (threshold 0.12), add class .in-view which sets opacity 1 and transform none. Transition: opacity 0.55s cubic-bezier(0.16,1,0.3,1), transform 0.55s cubic-bezier(0.16,1,0.3,1). Stagger is applied via data-delay attributes: data-delay="1" → transition-delay 0.1s, data-delay="2" → 0.2s, data-delay="3" → 0.3s. Elements that animate: eyebrow labels, h1, hero description paragraph, hero CTA row, hero note, mosaic grid, section H2s, bento cells (staggered), showcase content and vis grid, stats numbers (staggered 0–0.3s), pricing cards (staggered), CTA box. The IntersectionObserver unobserves each element after it fires so the animation runs only once. 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. Container: max-width effectively 100%, padding 0 80px on desktop (implied by .wrap). Grid collapse: hero two-column (1.1fr 0.9fr) → single column on tablet/mobile; bento 3-column with wide cell → single column on tablet (wide cell loses span); showcase 1fr 1fr → single column; stats 4-column → 2-column on tablet → 1-column on mobile; pricing 3-column → 1-column on tablet; footer 2fr 1fr 1fr 1fr → 1fr 1fr on tablet → 1-column on mobile. H1 resizes: 76px desktop → 46px mobile (set with @media max-width 767px). H2 resizes: 52px desktop → 34px mobile (.sec-hd h2). CTA H2: 56px desktop → 36px mobile. Nav links (.nl): display none on mobile (hamburger implied but not implemented in base HTML). Now-playing scrubber (.nb-scrub): display none on mobile, collapsing bar to compact form showing only art, info, quality chip, and play button. All primary and secondary buttons remain their defined sizes; no explicit full-width rule on mobile buttons but the hero CTA flex-wrap wraps them naturally. 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 include all :root CSS custom properties in the first <style> tag: --bg:#0A0710; --surface:#13101D; --layer:#1C1828; --text:#F0EDF7; --muted:#8B85A0; --magenta:#E6336B; --violet:#8B5CF6; --grad:linear-gradient(135deg,#E6336B,#8B5CF6); --border:rgba(139,92,246,.16); --font-h:'Space Grotesk',sans-serif; --font-b:'Inter',sans-serif. The .reveal animation class and its @media prefers-reduced-motion override must also live in this same <style> block before </head>. 11. SEMANTIC HTML — Document structure: one <header> element wrapping the <nav>; <main> containing one <section> per content block with id attributes matching section names (id="hero", id="now-playing", id="features", id="discovery", id="stats", id="pricing", id="cta"); <footer> for the bottom block. Use <article> for each bento cell (.b-cell) and each pricing card (.p-card) since they are self-contained content units. There is exactly one <h1> in the document, located in the hero section. Section headings use h2; card titles use a div with heading font styling (not h3/h4 to avoid hierarchy confusion within article elements). SEO: <title> is "Sonata — Lossless Streaming With Soul" (39 characters, within 60-char limit). <meta name="description"> is "Sonata streams every track in 24-bit lossless audio with a discovery engine built by musicians, not algorithms. 90 million songs, zero compression." (151 characters). OG image should show the magenta-violet gradient with the album mosaic grid at 1200×630px. Every album tile <div> must carry an aria-label describing its content (e.g., aria-label="Album cover: rock guitar"); every artist photo <img> gets descriptive alt text (e.g., alt="Artist Ezra Cole performing live in low stage lighting"). 12. FOOTER STRUCTURE — The footer uses a 4-column grid: grid-template-columns 2fr 1fr 1fr 1fr, gap 40px, margin-bottom 56px. Column 1 (brand column, 2fr): gradient logo "Sonata" at 19px Space Grotesk weight 700, followed by a 14px Inter paragraph in color #8B85A0 — "24-bit lossless streaming with a discovery engine built by musicians. 90 million tracks, zero compression, artists paid fairly." Columns 2–4 each have an uppercase section label (font-size 11px, font-weight 600, letter-spacing 0.10em, color #8B85A0, margin-bottom 18px) and a link list (font-size 14px, color #8B85A0, no underline, hover to #F0EDF7, margin-bottom 10px per item): Listen (Discover, Genres, New releases, Spatial audio), Sonata (Sound quality, For artists, Pricing, Apps), Company (About, Blog, Careers, Press). Footer bottom row: border-top 1px solid rgba(139,92,246,0.16), padding-top 28px, display flex, justify-content space-between, flex-wrap wrap, gap 12px. Left fine print: "© 2025 Sonata Audio Inc. · Lossless, always." Right fine print: "Privacy · Terms · Artist payouts" — both at font-size 12px, color #8B85A0. No newsletter input and no social icons in this template. 13. UNIQUE INTERACTIVE — The bento feature cells have a hover border animation: on :hover, border-color transitions from rgba(139,92,246,0.16) to rgba(230,51,107,0.40) over 0.2s linear, giving the impression the magenta signal lights up the card edge. No cell state closes when another opens — they are independent. The now-playing bar scrubber fill (width 42%) is a static representation; on hover over the .nb-bar element, cursor changes to pointer and the fill color brightens (opacity 1.0 from 0.85) suggesting interactivity. The album mosaic tiles each have an implicit hover state via transition transform 0.2s — apply transform: scale(1.04) and box-shadow 0 0 24px rgba(230,51,107,0.30) on .tile:hover. The play button (.nb-play) is a 44×44px circle with gradient background; on :hover apply opacity 0.88 and transform scale(1.06), transition 0.15s ease. For the FAQ accordion (listed in the design system but omitted from the HTML): when a row is clicked its answer panel expands from height 0 to auto using max-height 0 → 400px transition 0.35s cubic-bezier(0.16,1,0.3,1); clicking an open row collapses it; opening one row does NOT close others (each is independent). Required ARIA: each FAQ trigger is a <button aria-expanded="true|false" aria-controls="faq-answer-N">; each answer panel has id="faq-answer-N" and role="region". — Prompt set generated with Claude Sonnet 4.6 —