Vaporwave Aesthetic demo
Vaporwave Aesthetic

A dreamy, nostalgic style blending 90s internet culture with surreal glitch effects, Greek sculptures, palm trees, and neon pink-purple sunset gradients.
Category: Retro & Pop
Era: 1990s Retro
Prompt: 13.7 KB · 1785 words
# SYSTEM PROMPT — CODING AI BUILD SPECIFICATION

**Project:** Complete "Vaporwave Aesthetic" Landing Page — Full Build, First Attempt
**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Deliver a complete, production-ready, single-page landing page on the **first attempt** — no stubs, no TODOs, no placeholder-only sections.

**Theme Definition:**
- **Mood:** Dreamy, nostalgic, surreal, digital, ethereal, 1990s internet aesthetic.
- **Signature motifs:** Neon pink/purple/cyan gradients, sunset backdrops, retro perspective grid floors, VHS scanline artifacts, glitch typography, Greek-sculpture and palm-tree silhouettes (rendered as **pure CSS art** — gradients, `clip-path`, `box-shadow`; no external image files, no inline SVGs).
- **Palette:** Hot Pink `#FF71CE`, Deep Blue `#1C1C5E`, Magenta `#E63E85`, Gold `#E8AF3F`, Cyan `#01CDFE`, Purple `#B967FF`, Mint `#05FFA1`.
- **Light/Dark:** Full dual-theme support; **dark mode is the canonical, primary design** and must be pixel-perfect.
- **Required sections (in order):** Sticky Header (logo, nav, theme toggle, CTA), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ (accordion), Final CTA (email capture form), Footer with secondary link columns.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives exclusively in `style.css`. **Forbidden:** `style="..."` attributes, `<style>` blocks in HTML, and inline event handlers (`onclick`, etc.).
- Target all design properties, layout rules, and states via **class or ID selectors only**.
- HTML must remain clean, semantic, and style-agnostic — reskinning the site must require editing only `style.css`. `data-*` attributes (e.g., `data-text` for glitch layers) are permitted; they are markup, not styling.

**1.2 CSS Variables & Theme Tokens**
- Store all visual tokens in `:root` and theme override blocks. Mandatory base tokens: `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
- Vaporwave token mapping: `--primary: #FF71CE`, `--secondary: #01CDFE`, plus accents `--neon-purple: #B967FF`, `--magenta: #E63E85`, `--gold: #E8AF3F`, `--mint: #05FFA1`, `--deep-blue: #1C1C5E`, and effect tokens `--gradient-sunset: linear-gradient(180deg, #FF71CE, #01CDFE, #B967FF)`, `--glow-pink`, `--glow-cyan`, `--glow-purple` (neon `box-shadow`/`text-shadow` composites).
- **Dark theme (canonical):** `--bg-primary` in the deepened indigo range (`#0B0B24`–`#12122E`), `--bg-secondary: #1C1C5E`-family elevated panels, `--text-primary: #F2EEFF`, `--text-secondary` a muted lavender that still passes 4.5:1. `--text-success: #05FFA1`; `--text-error` must be a red/magenta **distinct from `--primary`** (e.g., `#FF4D6D`) passing contrast.
- **Light theme:** pastel background (pale pink/lavender, e.g., `#F6EFFF`-family) — never pure white; use `#fefefe` only if a near-white is genuinely required. Body text pairs with deep indigo (e.g., `#2A1E4F`). Neon accents on light backgrounds may only be used as decorative fills under dark text, or via darkened text-safe variants — never as light-mode body text color.
- **Contrast pairing is mandatory in every theme:** every light background token pairs with a dark text token and vice versa.
- Radii, shadows, spacing, motion, stacking: `--radius-sm`, `--radius-md`, `--radius-lg`, `--shadow-sm`, `--shadow-md`, `--spacing-gap`, `--transition-fast` (~150ms), `--transition-normal` (~300ms), `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`. The VHS scanline overlay must never visually sit above modal/toast layers.

**1.3 Mandatory Dark Mode Support**
- Define dark tokens under both a `.dark` class selector and `@media (prefers-color-scheme: dark)`. Theme switching must swap variables only — **zero HTML restructuring**.
- Provide a visible header toggle using Google Material Symbols (`dark_mode` / `light_mode`) with correct `aria-pressed` and dynamic `aria-label` ("Switch to light mode" / "Switch to dark mode").
- Persist choice via `localStorage`; on first visit fall back to `prefers-color-scheme`; **if the OS reports no preference, default to dark** (dark-focused theme exception).
- Both themes must pass WCAG AA; neon glow must never reduce text legibility.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with **Flexbox** (Tailwind flex utilities). Every flex container defaults to `align-items: center` (`items-center`) unless an exception is explicitly justified with a CSS comment (e.g., card body text blocks may use `flex-start`).
- Mobile-first: single-column stacking that promotes to multi-column at `min-width` breakpoints (640/768/1024px) using `flex-wrap`. **No horizontal scrolling at any viewport** — wrap the perspective grid and floating decorations in `overflow: hidden` containers.

**1.5 Framework Default & Tailwind CSS Integration**
- Use Tailwind CSS (CDN script in `<head>` is permitted as an external reference). Custom components live in `style.css` under `@layer components` using `@apply`, with all colors/fonts/spacings mapped back to the CSS variables above.
- Reusable component classes required: `.btn` (+ variants), `.card`, `.input-group`, `.faq-item`, etc. **BEM naming only** (e.g., `.hero__title`, `.pricing-card--featured`, `.faq-item__panel`) — never mix conventions.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Google Fonts via `<link>` (with `preconnect`): `Monoton` → `--font-display` (logo/hero accent), `Audiowide` → `--font-heading` (section headings, buttons), `VT323` → `--font-retro` (eyebrow labels, step numerals, badges), `Chakra Petch` → `--font-base` (body copy).
- Icons: **Google Material Symbols (Rounded)** only — `<span class="material-symbols-rounded">icon_name</span>`. **Forbidden:** raw inline SVGs, local icon files, emoji-as-icons. Verify every icon name exists in the Material Symbols set (e.g., `graphic_eq`, `blur_on`, `live_tv`, `auto_awesome`, `grid_4x4`, `star`, `check`, `close`, `menu`, `expand_more`).

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component**
- **Default:** `.btn` — `display: flex; align-items: center; justify-content: center; gap: 0.5rem;`, minimum 44×44px touch target, uppercase with retro letter-spacing, `border-radius: var(--radius-md)`. Variants: `.btn--primary` (sunset gradient fill + neon glow shadow), `.btn--ghost` (transparent, neon border), `.btn--danger` (visually distinct in both themes).
- **Hover:** brightness/glow intensification, `cursor: pointer`.
- **Focus-visible:** distinct neon outline ring (`outline` + `box-shadow` glow) — never remove outlines.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading:** `.btn--loading` — disables interaction, prevents double-clicks, renders a CSS spinner (border animation) or animated Material Symbol **without changing button dimensions**; set `aria-busy="true"`.
- **Disabled:** `opacity: 0.5`, grayscale filter, `cursor: not-allowed`.
- **Success/Error:** temporary feedback states using `--text-success` / `--text-error`, always icon + text (never color alone).

**2.2 Card Component** (Features, Pricing tiers, Testimonials)
- **Default:** flex column layout, `--bg-secondary` panel, translucent neon `--border-default`, `--shadow-sm` + subtle glow, `--radius-lg`.
- **Hover:** `transform: translateY(-2px)` with intensified glow, `transition: var(--transition-normal)`.
- **Focus-within:** border highlight when any child link/button receives focus.
- **Loading (Skeleton):** shimmer keyframe (gradient sweep) styles defined in CSS to prevent layout jumps.
- **Empty State:** structured fallback with a Material Symbol icon and guidance text.
- **Pricing specifics:** middle tier featured — gold `--gold` border, "MOST POPULAR" retro badge, elevated glow/scale; feature lists use mint `check` icons.
- **Testimonial specifics:** avatar as CSS gradient circle with initials (no external images), gold filled `star` icons, name + role.

**2.3 Form & Input Requirements** (Final CTA email capture)
- **Structure:** `.input-group` flex container wrapping a visible `<label>`, the `<input>`, and a dedicated error feedback element with `aria-live="polite"`.
- **States via CSS classes:** empty, focused (neon ring), filled, valid (mint border + `check` icon), invalid (`--border-error`, error text, error icon, message), disabled, read-only.
- **Behavior (`script.js`):** validate on blur and submit; set `aria-invalid` and `aria-describedby`; submit triggers `.btn--loading` then a success state announced via the live region. English messages only.

**2.4 FAQ Accordion**
- Each item: trigger `<button class="faq-item__trigger">` with `aria-expanded` + `aria-controls`, and a panel with `role="region"`.
- Open/close animated purely via CSS (height/`grid-template-rows` transition); `expand_more` icon rotates.
- Keyboard operable (native buttons), visible focus rings on triggers, single-open behavior managed in `script.js`.

**2.5 Modal / Popup / Drawer (conditional — applies to the mobile nav drawer)**
- **States:** opening, open, closing — all CSS-transitioned; centered/slide-in flex container, backdrop overlay, Material Symbol close button.
- **UX:** `--z-modal` stacking, focus trapping, close via `Esc` and overlay click, `aria-modal`/`role="dialog"` (or proper drawer semantics), focus returned to the hamburger trigger on close, trigger carries `aria-expanded` + `aria-controls`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid sizing, no horizontal overflow at any breakpoint (verify the perspective grid and floating elements specifically).
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; animate only `transform`/`opacity` where possible.
- **`prefers-reduced-motion`:** disable glitch, floating, scanline flicker, grid scroll, and hue-rotate animations; keep instant state changes. This is mandatory.
- **Vaporwave effect specs:**
  - **Glitch:** hero headline via `::before`/`::after` using `attr(data-text)` with `clip-path` slices and pink/cyan channel offsets; periodic or hover-triggered — never a continuous high-frequency loop; headline stays readable.
  - **VHS scanlines:** fixed full-viewport overlay (`body::after` or an `aria-hidden` div), `repeating-linear-gradient`, opacity ≤ 0.08, `pointer-events: none`, below modal/toast layers.
  - **Perspective grid:** hero floor built from `linear-gradient` crosshatch + `transform: perspective(...) rotateX(...)`; optional slow scroll animation; contained in an `overflow: hidden` wrapper.
  - **Sunset & glow:** hero backdrop uses `--gradient-sunset` / radial sun disc; `text-shadow` neon glow on display headings only; `filter: hue-rotate()` animations restricted to decorative layers, never text content blocks.
  - **Floating elements:** palm silhouettes (`clip-path`), geometric shapes, orbs — slow `translateY`/`rotate` keyframes, `aria-hidden`, `pointer-events: none`.
- **Accessibility (a11y):** WCAG AA contrast in both themes (4.5:1 body, 3:1 large text/UI); neon colors are reserved for large display text and decoration — body copy uses high-contrast tokens. Never rely on color alone. Semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`), strict `h1→h2→h3` hierarchy, skip-to-content link, logical focus order, full keyboard operability, `aria-live` regions for all dynamic feedback.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive actions:** `.btn--danger` must be visually distinct in both light and dark themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. Only external references allowed in HTML: Google Fonts links, Tailwind CDN, and Material Symbols — plus a **single** `<script src="script.js" defer></script>`. No inline JS code, no inline CSS.
- **`script.js` scope:** theme init/persist/toggle, mobile drawer, FAQ accordion, email form validation + loading/success states, smooth anchor scrolling, optional IntersectionObserver reveal animations (reduced-motion aware). Nothing else.
- **Naming:** BEM consistently across the entire deliverable — never mix conventions.
- **Copy:** author complete, original **English** copy with vaporwave personality — brand name (e.g., "SUNSET.EXE"), glitch headline, tagline, 3 feature names/descriptions, 3 step titles, 3 testimonial personas, 3 pricing tiers (e.g., Cassette / VHS / LaserDisc) with prices and feature lists, 5–6 FAQ Q&As, CTA copy, and footer link columns (Product, Company, Legal). **No lorem ipsum anywhere.** Footer links must target real in-page anchors where targets exist; do not invent external URLs.

---

## 5. PAGE SECTION REQUIREMENTS

1. **Header (sticky):** Monoton logo with hover glitch, nav anchors (Features, How It Works, Pricing, FAQ), theme toggle, primary CTA, hamburger → drawer on mobile.
2. **Hero:** full-viewport sunset gradient + perspective grid floor + floating CSS palms/shapes; `VT323` eyebrow ("EST. 199X • NOW BROADCASTING"), glitch `h1`, subcopy, primary + ghost CTAs, scroll cue.
3. **Features:** section heading + 3 cards, each with a neon-gradient icon tile (Material Symbol), title, description.
4. **How It Works:** 3 steps with oversized `VT323` numerals, connecting neon line (CSS), icon + title + text per step.
5. **Testimonials:** 3 quote cards with CSS avatars, gold stars, name + role.
6. **Pricing:** 3 tiers, middle featured per §2.2, mint check feature lists, per-tier CTA, billing microcopy.
7. **FAQ:** accordion per §2.4.
8. **Final CTA:** sunset-gradient panel, headline, email capture per §2.3, privacy microcopy.
9. **Footer:** brand + tagline, secondary link columns, Material Symbol social buttons with `aria-label`s, retro-styled copyright line.

**Output the three complete files, fully working, on the first attempt.**