Sounds of Earth — The Golden Record demo
Sounds of Earth — The Golden Record

A neumorphic soft-UI design inspired by NASA's 1977 Voyager Golden Record, featuring extruded monochrome surfaces, vinyl-record motifs, and smooth keyframe animations and transitions.
Category: Glass & Soft UI
Era: 1970s Space Age
Prompt: 12.0 KB · 1676 words
# CODING PROMPT — Landing Page: "SOUNDS OF EARTH — The Golden Record"

**Your Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page in a single attempt. Theme: **"SOUNDS OF EARTH — The Golden Record"**, a tribute to the Voyager Golden Record. Style: **Neumorphism, 2020s Digital era**, with golden gradients, keyframe animation, transforms, and rich hover/motion design. Output the final code immediately — no questions, no partial deliverables.

**Required sections (in page order):** Sticky Header (hosts nav + mandatory theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ (accordion), Final CTA (email capture), Footer with secondary links.

---

## 1. THEME & CREATIVE DIRECTION

**1.1 Concept & Mood**
* Evoke the physical Golden Record artifact: gold-plated copper disc, concentric grooves, warm cosmic ambience — part museum piece, part invitation to the stars.
* Write all user-facing copy in polished **English**, original and on-theme (115 images, greetings in 55 languages, ~90 minutes of music, the sounds of Earth, launched 1977, now in interstellar space). **No lorem ipsum anywhere.**

**1.2 Color System (exact palette)**
* **Light mode tokens:** `--bg-primary: #e0d4bc` (page + neumorphic base surface), `--bg-secondary` slightly lighter warm cream for raised surfaces, `--text-primary: #16120c`, `--text-secondary: #8a7a5e` (darken, e.g. `#6f6049`, wherever it fails 4.5:1 contrast), `--primary: #d4b46a`, `--secondary: #1a1408`. Do not default to pure white; any near-white surface must use `#fefefe`, never `#ffffff`.
* **Dark mode tokens:** `--bg-primary: #0a0806`, `--bg-secondary: #16120c`, `--text-primary: #e0d4bc`, `--text-secondary` lightened warm tone (e.g. `#a89778`) passing 4.5:1, gold accents retained.
* **Gold usage rule:** `#d4b46a` is an accent for icons, borders, gradient fills, and text on dark backgrounds only — never gold body text on the cream background.

**1.3 Neumorphism Treatment**
* Define dual-shadow elevation tokens per theme: `--neu-raised` (extruded) and `--neu-pressed` (inset). Light mode: warm dark shadow bottom-right + light highlight top-left. Dark mode: deep shadow + subtle gold-tinted highlight.
* Every neumorphic interactive element must **also** carry a visible `1px` border (`--border-default`) and a distinct focus ring — never rely on shadows alone to communicate boundaries or state.

**1.4 Signature Hero Element — The Spinning Record (pure CSS)**
* A circular disc: `border-radius: 50%`, `aspect-ratio: 1/1`, fluid size via `clamp()`.
* Grooves via `repeating-radial-gradient`; gold surface via layered `radial-gradient`/`conic-gradient` (`#d4b46a → #8a7a5e → #1a1408`); center label circle containing real text "SOUNDS OF EARTH".
* Continuous slow spin via `@keyframes` `rotate` (e.g., 24s linear infinite) plus ambient pulsing orbit rings (scale + opacity keyframes). All motion replaced with static styling under `prefers-reduced-motion`.
* **No images and no inline SVG for this element** — gradients, borders, and text only.

**1.5 Motion & Effects**
* Required keyframes: record spin, orbit pulse, hero gradient drift/shimmer, skeleton shimmer, button spinner, icon hover micro-rotation.
* Transitions on color/shadow/transform use `var(--transition-normal)`; hover lift `translateY(-2px)`; press `scale(0.97)`.
* Gold gradients (`linear-gradient(135deg, #d4b46a, #8a7a5e)`) on primary buttons, the featured pricing tier, and badges.

**1.6 Typography & Icons (Google only)**
* Google Fonts: **Space Grotesk** (600/700) for headings, **Inter** (400/500/600) for body. Bind via `--font-heading` / `--font-base`, loaded with `<link>` + preconnect.
* Icons: **Google Material Symbols (Outlined)** via the icon font. **Explicitly forbidden: raw inline SVGs and local icon files.**

---

## 2. STRICT RULES & ARCHITECTURE

**2.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in `style.css`. **The `style="..."` attribute is forbidden in HTML.**
* All design properties, layout, and states are targeted exclusively via class/ID selectors.
* HTML remains clean, semantic, and style-agnostic — reskinning must only require editing the CSS file.

**2.2 CSS Variables & Theme Tokens**
* Store every token in `:root` (theme overrides in `[data-theme="dark"]` and/or `.dark`): the full color set from §1.2 plus `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
* Geometry & motion: `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`.
* Stacking: `--z-dropdown` (sticky header / mobile nav), `--z-modal`, `--z-toast` — no ad-hoc z-index values.
* **Contrast pairing is mandatory in every theme:** light background tokens pair with dark text tokens, dark background tokens pair with light text tokens.

**2.3 Mandatory Dark Mode Support**
* Dark mode must be fully implemented with seamless token switching (no HTML restructuring).
* **Exception clause (per style spec):** Light mode is the **default** presentation on first visit; dark mode remains a first-class, fully built, toggleable experience — do not drop it.
* Persistence via `localStorage`, falling back to `prefers-color-scheme` on first visit. Provide a visible toggle in the header using Material Symbols (light/dark icons) with correct `aria-pressed` and `aria-label`.

**2.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with Flexbox. Every flex container **defaults to `align-items: center`** unless a documented exception exists (e.g., FAQ answer text alignment).
* Mobile-first: multi-column rows collapse to `flex-direction: column` at breakpoints; `flex-wrap` where content can grow; **no horizontal scrolling at any viewport width**.

**2.5 Framework & Naming**
* Use clean, hand-written semantic CSS (BEM, e.g., `.hero__record`, `.card--featured`, `.btn--secondary`) in `style.css` — bespoke neumorphic shadows, gradients, and keyframes demand real CSS. Never mix BEM with utility-class conventions.

---

## 3. COMPONENT DESIGN SPECIFICATIONS

**3.1 Buttons — style every state via CSS classes**
* **Default:** flex layout (`align-items: center; justify-content: center; gap: 0.5rem`), minimum touch target 44×44px.
* **Hover:** brightness/shadow shift, `cursor: pointer`. **Focus:** distinct ring via CSS variables. **Active:** `scale(0.97)`.
* **Loading:** disables interaction, prevents double-clicks, shows a CSS-animated spinner (border-based ring or spinning Material Symbol `progress_activity`) **without changing button dimensions**.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** temporary states for form submission using `--text-success` / `--text-error` (icon + text, never color alone).

**3.2 Cards (Features, Testimonials, Pricing tiers)**
* **Default:** flexible flex layout, `--bg-secondary`, subtle border, neumorphic elevation.
* **Hover:** shadow shift + `translateY(-2px)`. **Focus-within:** border highlights when a child link/button gains focus.
* **Loading:** skeleton shimmer classes defined in CSS (no layout jumps). **Empty state:** structured fallback with a Google Icon and guidance text.

**3.3 Forms & Inputs (Final CTA email capture)**
* Structure: flex container wrapping `<label>`, `<input>`, and a dedicated error-feedback container.
* States: empty, focused (outline ring), filled, valid (success border + icon), invalid (error border + icon + red text message), disabled, read-only. Neumorphic inset styling is allowed but the visible border + focus ring are mandatory.
* Errors are announced via an `aria-live="polite"` region; never communicated by color alone.

**3.4 Accordion (FAQ) & Modal/Popup**
* FAQ must be an **accordion**, not a modal: `<button aria-expanded aria-controls>` headers, chevron Material Symbol rotating on open, animated height via CSS transition, full keyboard operability.
* No modals are required. If any overlay/popup is introduced, it must follow: open/close animations via CSS, centered flex overlay with backdrop, Material Symbol close button, focus trapping, `Esc` and backdrop-click dismissal, and `--z-modal` stacking.

---

## 4. PAGE STRUCTURE & SECTION REQUIREMENTS

**4.1 Sticky Header:** Wordmark ("SOUNDS OF EARTH"), anchor nav (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, "Get Access" CTA. On mobile, the nav collapses behind a Material Symbols hamburger button (`aria-expanded`, `Esc` closes).

**4.2 Hero:** Eyebrow ("A message from Earth, launched 1977"), single `<h1>`, subcopy, primary + secondary CTAs, the spinning golden record (§1.4), and a neumorphic stats row (115 images · 55 languages · 90 min of music · interstellar space).

**4.3 Features — 3 cards:** "90 Minutes of Music", "Greetings in 55 Languages", "115 Images of Earth" (or equivalent on-theme set), each with a Material Symbol icon, short copy, and full card-state behavior (§3.2).

**4.4 How It Works — 3 steps:** numbered neumorphic tiles ("01 Capture — curate the sounds of Earth", "02 Etch — press them into gold-plated copper", "03 Voyage — carry them beyond the heliosphere"), connected by a gold gradient line; row → column on mobile.

**4.5 Testimonials — 3 cards:** fictional homage quotes (e.g., a radio astronomer, a sound engineer, a science educator) with avatars built as gold-gradient circles containing the person's initials (no images/SVGs), name, role.

**4.6 Pricing — 3 tiers:** e.g., "Echo" (free listener), "Voyager" (featured — gold gradient border, elevated shadow, "MOST POPULAR" badge), "Golden Record" (premium). Feature lists use Material Symbols check icons. Include a Monthly/Yearly toggle that updates prices with an `aria-live` announcement and visible pressed state.

**4.7 FAQ:** 4–5 themed questions (What is the Golden Record? Why gold? How long will it last? Can I listen? How far has it traveled?) using the accordion spec (§3.4).

**4.8 Final CTA:** full-width neumorphic panel with gradient accents, `<h2>`, supporting copy, and the email capture form implementing all states in §3.3, ending in a visible success confirmation.

**4.9 Footer:** brand + tagline, secondary link groups (Explore: Features, Pricing, FAQ · About: Story, Contact · Legal: Privacy, Terms), social icons via Material Symbols, copyright line, back-to-top link.

---

## 5. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid `clamp()` typography, breakpoint-driven column collapses, zero horizontal overflow.
* **Smooth animations:** CSS transitions on all state changes; every keyframe animation respects `prefers-reduced-motion` with a static fallback.
* **Accessibility:** semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`), one `<h1>` with logical heading order, skip-to-content link, visible `:focus` rings, full keyboard operability for nav, accordion, toggle, and form, ARIA roles/labels on all custom widgets, `aria-live` regions for dynamic feedback (form results, pricing toggle), WCAG-AA contrast in **both** light and dark modes.
* **Mandatory visual feedback:** every hover, click, focus, and submission produces a visible state change.
* **Destructive/distinct actions:** any danger-style action uses a `.btn--danger` class that is distinct in both themes.

---

## 6. DELIVERABLE & OUTPUT FORMAT

* **Files:** separate `index.html`, `style.css`, `script.js`. The only inline `<script>` allowed is the single deferred entry-point reference to `script.js`.
* **script.js scope:** theme toggle + persistence, mobile nav toggle, FAQ accordion, pricing billing toggle, email form validation with loading/success/error states, optional scroll-reveal via IntersectionObserver (disabled under reduced-motion).
* **Naming:** one convention (BEM) across the entire deliverable — never mix conventions.
* **Copy:** all user-facing text in English, thematically written per §1.1; no lorem ipsum, no placeholder components beyond those specified.
* **Definition of done:** zero inline styles, zero inline SVGs, zero local icon files, dark mode toggleable and persisted, all component states present, both themes pass contrast checks, no horizontal scroll from 320px upward.