Spotify Dark Immersive demo
Spotify Dark Immersive

A dark, immersive streaming-inspired design with bold gradients and media-focused layouts tailored for music, audio, and podcast platforms.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 18.1 KB · 2497 words
# BUILD SPECIFICATION — CODING AI PROMPT
## Landing Page: "Spotify Dark Immersive" (2024–2026 Music Streaming Aesthetic)

**Role.** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page described below **in a single attempt** — full code, no questions, no partial output, no follow-ups.

**Theme.** Spotify Dark Immersive — near-black immersive canvas, Spotify Green as the single functional accent, pill-and-circle geometry, uppercase wide-tracked buttons, heavy shadows, album art as the only ambient color source. Keywords: `spotify`, `dark immersive`, `Spotify Green`, `near-black`, `pill buttons`, `circle controls`, `uppercase buttons`, `wide tracking`, `heavy shadows`, `album art`, `SpotifyMixUI`.

**Visual Direction (authoritative, translated from source spec):** Near-black immersive canvas (`#121212`, `#181818`, `#1f1f1f`) where the UI recedes so the content can shine. Spotify Green (`#1ed760`) is the sole functional accent — reserved for play controls, active states, and primary CTAs. Pill buttons (radius `9999px`) and circular play controls (radius `50%`). Button labels are uppercase with wide letter-spacing (1.4px–2px). Heavy shadows (`rgba(0,0,0,0.5) 0px 8px 24px`) for elevated elements; card shadows (`rgba(0,0,0,0.3) 0px 8px 8px`). Inset border-shadow combo on inputs. Album art supplies the only ambient color. Compact typography (10px–24px UI range). White (`#ffffff`) primary text, Silver (`#b3b3b3`) secondary text, Border gray (`#4d4d4d`), Error red (`#f3727f`).

**Page Map (all mandatory):** Global sticky Header → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links. All user-facing copy must be written in **English**.

**Brand constraint:** Invent a fictional streaming brand (name, tagline, wordmark styled purely in CSS type). Do NOT reproduce Spotify's logo, wordmark, or any trademarked asset — the aesthetic is inspired-by only.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 — CSS-First Architecture & Zero Inline CSS**
* All styling must live in a dedicated `style.css`. **Forbidden:** the `style="..."` attribute anywhere in the HTML, inline `<style>` blocks, and inline event handlers (`onclick`, etc.).
* All design properties, layout rules, and states must be targeted exclusively via class or ID selectors.
* HTML must remain clean, semantic (`header`, `nav`, `main`, `section`, `footer`, single `h1`, logical `h2`–`h3` hierarchy), and visually agnostic — changing the look must never require touching the markup.

**1.2 — CSS Variables & Theme Tokens (mandatory token contract)**
Define all visual tokens in `:root` exactly as follows (names are fixed; do not rename):

| Token | Value | Token | Value |
|---|---|---|---|
| `--primary` | `#1ed760` | `--text-primary` | `#ffffff` |
| `--primary-hover` | `#1fdf64` | `--text-secondary` | `#b3b3b3` |
| `--on-primary` | `#000000` | `--text-success` | `#1ed760` |
| `--bg-primary` | `#121212` | `--text-error` | `#f3727f` |
| `--bg-secondary` | `#181818` | `--border-default` | `#4d4d4d` |
| `--bg-tertiary` | `#1f1f1f` | `--border-success` | `#1ed760` |
| — | — | `--border-error` | `#f3727f` |

Geometry & motion tokens: `--radius-sm: 4px`, `--radius-md: 8px` (cards), `--radius-lg: 16px`, `--radius-pill: 9999px`, `--radius-circle: 50%`, `--shadow-sm: 0 8px 8px rgba(0,0,0,0.3)` (cards), `--shadow-md: 0 8px 24px rgba(0,0,0,0.5)` (elevated/play controls), `--spacing-gap: 1rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`, `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`.
* **Contrast pairing (mandatory):** Dark backgrounds (`#121212/#181818/#1f1f1f`) pair exclusively with light text (`#ffffff/#b3b3b3`). The green accent surface pairs exclusively with near-black text (`--on-primary`) — never white-on-green. This pairing must hold in every theme variant.
* Define a focus-ring token (e.g., a `box-shadow` ring built from `--primary` with a `--bg-primary` gap) so focus is visible on near-black surfaces and bends around pill/circle geometry.

**1.3 — Mandatory Dark Mode & Theme Switching**
* Dark is the default and primary presentation: all `:root` tokens above ARE the dark theme. No HTML restructuring may ever be required to switch themes.
* Implement the mandatory theme-switching architecture with a `.theme-black` variant class that overrides only surfaces: `--bg-primary: #000000`, `--bg-secondary: #0a0a0a`, `--bg-tertiary: #121212` (all text, accent, border, shadow tokens unchanged).
* Provide a **visible toggle control** in the header (Material Symbols icon button, ≥44px) with correct `aria-pressed` and a dynamic `aria-label` (e.g., "Switch to Pure Black display" / "Switch to Default Dark display").
* **Persistence:** store the user's choice in `localStorage`; on first visit with no stored value, default to Default Dark regardless of `prefers-color-scheme`.
* **Exception (explicit):** Per the theme specification, a light mode is marked "Not Recommended" — therefore no light palette is shipped; the mandatory toggle switches between the two dark variants (Default Dark ↔ Pure Black/AMOLED) instead of light/dark, preserving all switching, persistence, and ARIA requirements.

**1.4 — Flexbox Layout & Mobile-First Alignment**
* Build every layout structure with Flexbox (`display: flex`; grids via flex-wrap or CSS Grid only where a grid is semantically required).
* **Every flex container must default to `align-items: center`** unless an exception is explicitly justified in CSS comments (the only pre-approved exceptions: multi-line text blocks inside testimonial/feature cards and the FAQ question rows, which may use `flex-start`/`space-between` for reading alignment).
* Mobile-first: single-column at small viewports, scaling to multi-column at ≥768px/≥1024px. No horizontal scrolling at any width from 320px up — use fluid `clamp()` sizing, `max-width: 100%`, and `min-width: 0` on flex children.

**1.5 — Styling Framework & Class Naming**
* Use clean custom CSS in `style.css`, organized with Tailwind's layered philosophy: `@layer` (or clearly commented sections) for **tokens → base → components → sections**. Do not use the Tailwind Play CDN or any build step; do not author utility-class soup in the markup.
* **One naming convention only: BEM** (e.g., `.btn`, `.btn--primary`, `.card`, `.hero__eyebrow`, `.pricing-card--featured`, `.faq-item__trigger`). Never mix conventions; IDs are reserved for JS hooks and anchor targets only.

**1.6 — Typography & Icons (Google Fonts Mandatory)**
* Load **Figtree** from Google Fonts (weights 400/700/800) via `<link>` with `preconnect`, and bind it to `--font-base` with a stack ending in `system-ui` as fallback only.
* **Exception (explicit):** Although the source spec lists `system-ui`, Google Fonts is mandatory — Figtree is the Circular-like substitute; `system-ui` may appear only as the last entry in the font stack.
* Icons: Google **Material Symbols (Rounded)** via the Google Fonts stylesheet. **Forbidden:** raw inline SVGs, local icon files, emoji-as-icons. Solid-fill icon buttons (e.g., play) use `font-variation-settings: 'FILL' 1`.
* **Type scale (compact):** micro-labels/eyebrows 10–12px uppercase 700 with 1.4px–2px letter-spacing in `--text-secondary`; body copy 14–16px/400, sentence case (uppercase+tracking is for buttons and micro-labels ONLY); card titles 16–18px/700; section `h2` up to 24px. The 10px floor applies only to decorative micro-labels — functional body copy must be ≥14px for legibility. The single allowed exception to the compact range: the hero `h1` may scale responsively via `clamp(32px, 6vw, 56px)` at weight 800.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 — Buttons (Pill & Circular Controls)**
* Base `.btn`: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — pill radius (`--radius-pill`), `text-transform: uppercase`, `letter-spacing: 1.6px`, `font-weight: 700`, font-size 12–14px, minimum interactive target **44×44px** (visual padding rhythm of 8px 16px is allowed only where total height still ≥44px; primary CTAs use 12px 24px).
* Variants: `.btn--primary` (background `--primary`, text `--on-primary`, hover background `--primary-hover` + `--shadow-md`); `.btn--secondary` (transparent, 1px `--border-default`... hover border/text to `#ffffff`); `.btn--icon` (circular icon buttons, `--radius-circle`).
* **Hover:** brightness/shadow shift + `cursor: pointer`. **Focus-visible:** the token-based ring from §1.2. **Active:** `transform: scale(0.97)`.
* **Loading (`is-loading` + `aria-busy="true"`):** disables pointer events to prevent double-clicks; swaps the label for a CSS spinner (border spinner in `currentColor`) or rotating Material icon; **button dimensions must not change** (fixed `min-width`).
* **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.
* **Success/Error:** temporary `.is-success` / `.is-error` feedback styles driven by `--text-success` / `--text-error`, announced via the global `aria-live` region.
* **Circular play controls (`.btn-play`):** 48–56px diameter, `--radius-circle`, green background, black `play_arrow` icon, `--shadow-md`; hover grows to `scale(1.06)`; click toggles `play_arrow` ↔ `pause` (Material icon text swap) and updates `aria-label` ("Play preview" / "Pause preview").

**2.2 — Cards**
* Base `.card`: Flexbox layout, background `--bg-secondary`, radius `--radius-md` (8px), padding 16–24px, `--shadow-sm`, no visible border by default.
* **Hover:** `transform: translateY(-2px)` + `--shadow-md` + background lift to `--bg-tertiary`; if the card contains a `.btn-play`, it scales in/reveals on hover (the classic Spotify card-play pattern) while remaining keyboard-focusable at all times.
* **Focus-within:** card border/ring highlights in `--primary` when any child link/button receives focus.
* **Loading (Skeleton):** define a shimmer keyframe gradient (`#282828 → #3a3a3a`) for `.skeleton`; apply to album art images until they load — dimensions must be reserved so nothing shifts. **Empty/Failure state:** a structured fallback with a Material icon (e.g., `music_note`) and short guidance text for any failed image.
* Never rely on hover alone — every hover affordance must have a visible focus/keyboard equivalent.

**2.3 — Forms & Inputs (Final CTA email capture)**
* Structure: `.input-group` — flex container wrapping a `<label>`, the input, and a dedicated error-feedback container.
* Input style: background `--bg-tertiary`, **inset border-shadow combo** (`box-shadow: inset 0 0 0 1px var(--border-default)`, no `border` property), pill radius to match the geometry system.
* **States, all required:** Empty; Focused (inset ring swaps to 2px `--primary`); Filled; Valid (success ring + trailing `check` icon in `--text-success`); Invalid (error ring `--border-error`, `error` icon, red message text in `--text-error` — never color alone, always icon + text); Disabled (`opacity: 0.5`, `cursor: not-allowed`); Read-only.
* Error messages live in the dedicated container, linked via `aria-describedby`; dynamic feedback announced through an `aria-live="polite"` region.

**2.4 — FAQ Accordion (Disclosure Component)**
* Each item: `h3 > button.faq-item__trigger` with `aria-expanded` and `aria-controls`, controlling a region panel.
* Trigger: flex, `align-items: center`, `justify-content: space-between`, background `--bg-secondary`, radius `--radius-md`, hover lifts to `--bg-tertiary`, focus-visible ring; trailing `expand_more` Material icon rotates 180° when open (`transition: var(--transition-normal)`).
* Panel: animated open/close via `grid-template-rows: 0fr → 1fr` (or equivalent height transition) using `--transition-normal`; under `prefers-reduced-motion`, state changes are instant.
* Fully keyboard-operable (native `button`); allow multiple-open behavior; no mouse-only interactions anywhere.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid type/spacing via `clamp()`; breakpoints at 640/768/1024px; zero horizontal overflow from 320px upward.
* **Smooth animations:** every state change transitions with `var(--transition-fast)`/`var(--transition-normal)` and `--ease-standard`; **all** transforms, shimmers, and smooth scrolling are disabled under `@media (prefers-reduced-motion: reduce)`.
* **Accessibility (a11y):** WCAG AA contrast in both dark variants (the `#b3b3b3`-on-`#121212` and black-on-green pairings pass — never white-on-green); never color alone to communicate state; semantic HTML5 landmarks; a visible skip-to-content link as the first focusable element; correct ARIA on the theme toggle, mobile menu, accordion, and icon-only buttons; logical focus order; full keyboard operability; one global `aria-live` region for form outcomes and toasts.
* **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change — nothing interactive may feel dead.
* **Destructive/secondary actions:** none exist on this page, but any "Cancel"-style link must remain visually distinct from primary CTAs in both dark variants.
* Polish details: `::selection` styled green with black text; anchor scrolling uses `scroll-behavior: smooth` with `scroll-margin-top` accounting for the sticky header.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** `index.html`, `style.css`, `script.js` — separate, complete, runnable with no build step and no libraries. The HTML contains exactly one script reference: `<script src="script.js" defer>`. No inline `<script>` blocks. `lang="en"`, viewport meta, descriptive `<title>` and meta description.
* **`script.js` behaviors (vanilla, `addEventListener` only):** (1) theme variant toggle with `localStorage` persistence and `aria-pressed` sync; (2) mobile menu open/close (`aria-expanded`, closes on Esc and link click, layered at `--z-dropdown`); (3) FAQ accordion state sync; (4) email form — validate, show loading ≥1s, then success state + toast announcement via `aria-live` (or inline error); (5) play-button icon/`aria-label` toggling; (6) smooth anchor scrolling + header shadow class on scroll; (7) skeleton removal on image load/failure; (8) auto-updating footer year. Nothing else.
* **Naming:** BEM everywhere, per §1.5 — never mix conventions.
* **Content:** No lorem ipsum anywhere — write real, specific English marketing copy for the fictional brand. Placeholder imagery is permitted only via `https://picsum.photos/seed/<unique-seed>/<w>/<h>.jpg` for album art and testimonial avatars, each with meaningful `alt` text.

---

## 5. SECTION-BY-SECTION BUILD SPECIFICATION

* **Global Header (sticky):** fictional wordmark (CSS-styled type, weight 800), inline nav links (Features, How It Works, Pricing, FAQ) in 12px uppercase tracked `--text-secondary` that lift to white on hover/focus, theme toggle (§1.3), primary green pill CTA "Start Free". Translucent `--bg-primary` with blur; gains a bottom shadow on scroll. Mobile: links collapse into a hamburger (`menu` icon) dropdown panel.
* **Hero:** uppercase micro-eyebrow; `h1` at the clamp scale (§1.6); 14–16px silver subcopy; two actions — primary green pill "Try Premium Free" and secondary bordered pill "Explore Plans" (scrolls to Pricing); a collage of 3–4 seeded album-art cards (radius 8px, `--shadow-md`) with an overlapping 56px circular green play button; a stats micro-row ("100M+ tracks · 600M+ listeners · New releases daily") in 12px uppercase tracked silver.
* **Features (3 cards):** `h2` + intro line; responsive grid (1 → 3 columns). Each `.card`: Material icon inside a 48px circle tinted `rgba(30,215,96,0.1)` with the glyph in `--primary`; 16–18px title; 14px silver body. Topics: personalized daily mixes, offline downloads, cross-device sync. Full card-state spec per §2.2.
* **How It Works (3 steps):** numbered flow (1 → 3 columns → stacked mobile): 48px circular badge with green border or green fill + black numeral, step title, 14px description; optional 1px `--border-default` connector on desktop only.
* **Testimonials (3 cards):** 48px circular seeded avatar, name (700, white), role (12px silver), 14–16px quote, five `star` Material icons in `--primary`; hover lift per §2.2.
* **Pricing (3 tiers):** Free ($0), Premium ($9.99/mo, **featured**), Family ($14.99/mo). Featured card: `--bg-tertiary`, 2px `--border-success`, `--shadow-md`, a "Most Popular" pill badge (green bg, black 10px uppercase tracked text), slight `scale(1.02)` on desktop. Each card: tier name, price (24px/700), feature list with green `check` icons, and a CTA — green primary pill on Premium, secondary outline pills elsewhere. State coverage per §2.1.
* **FAQ:** intro + 6 accordion items covering: free tier contents, cancellation, device limits, student discount, offline mode, family sharing. Built per §2.4.
* **Final CTA:** full-width elevated panel (`--bg-tertiary`, radius `--radius-lg`, `--shadow-md`, generous padding): `h2`, one silver line, and the email capture built per §2.3 — pill input + green pill submit "Get Started", with loading → success ("You're on the list" + `check`) or error flow announced via `aria-live`.
* **Footer:** brand column (wordmark, one-line tagline, social icon buttons — 40px circles, 1px `--border-default`, hover to green); three secondary-link columns (Company: About / Careers / Press; Support: Help Center / Contact / Device Setup; Legal: Privacy / Terms / Cookies) in 12–14px silver lifting to white on hover/focus; bottom bar with dynamic © year and brand name.

---

## 6. PRE-SUBMISSION QA CHECKLIST

* Zero `style="..."` attributes, inline `<script>` blocks, inline SVGs, local icon files, or lorem ipsum.
* Page loads dark by default; toggle switches dark variants; choice survives reload; `aria-pressed`/`aria-label` always accurate.
* Complete keyboard-only pass: skip link, nav, mobile menu, theme toggle, all buttons, accordion, form.
* Focus rings visible on near-black; every interactive element ≥44×44px; no color-only state communication.
* No horizontal scroll from 320px to 1920px; `prefers-reduced-motion` disables all movement.
* Every button implements default/hover/focus/active/loading/disabled/(success|error where applicable); every card implements default/hover/focus-within; every input implements all seven §2.3 states.
* Single `h1`, intact heading hierarchy, all landmarks present, `aria-live` announcements firing.
* Output the three complete files in one response — first attempt, production-ready.