Gradient Mesh / Aurora Evolved demo
Gradient Mesh / Aurora Evolved

A luminous style built on flowing aurora-like gradient meshes and soft glowing color blends, commonly paired with glassy surfaces for modern SaaS and AI landing pages.
Category: Glass & Soft UI
Era: 2020s Modern
Prompt: 17.9 KB · 2452 words
# SYSTEM PROMPT — CODING AGENT TASK: "Aurora Evolved" Gradient Mesh Landing Page

**Your Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-quality landing page described below **in a single attempt** — final code only, no drafts, no TODOs, no partial deliverables.

**Product Concept:** The visual theme is *Gradient Mesh / Aurora Evolved* (complex multi-color mesh gradients, aurora/northern-lights flow, iridescent overlays, holographic shimmer, prismatic morphing). Invent **one coherent fictional product** that matches this theme (e.g., a real-time gradient/mesh design engine for creative teams) and author all copy in **English** around it. All user-facing text must be real, thematic copy — lorem ipsum is forbidden.

**Required Page Sections (in this exact order):** Global Header, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling must live exclusively in a dedicated `style.css` file. **The `style="..."` attribute is forbidden anywhere in the HTML.**
* Every design property, layout rule, and state must be targeted via **class or ID selectors only**.
* HTML must remain clean, semantic, and style-agnostic (use `header`, `nav`, `main`, `section`, `article`, `footer`, correct `h1`–`h3` hierarchy). Changing the site's entire look must require editing only `style.css`, never the markup.
* No inline event handlers (`onclick`, `onsubmit`, etc.) — all behavior attaches via `addEventListener` in `script.js`.

**1.2 CSS Variables (`var(--...)`) & Theme Tokens**
All visual tokens must be defined in `:root` and consumed via `var()` — no raw hex values inside component rules. Required token set:

* **Colors:** `--primary` (use `#0066FF` — the anchor blue for solid-color needs such as links and focus), `--secondary` (use `#FF00FF`), `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
* **Aurora palette:** `--aurora-cyan: #00FFFF`, `--aurora-magenta: #FF00FF`, `--aurora-yellow: #FFFF00`, `--aurora-blue: #0066FF`, `--aurora-green: #00FF66`.
* **Gradients (as variables):** `--gradient-aurora` (the full five-stop linear gradient, ~135°, sized `200% 200%` so `background-position` can animate), `--gradient-accent` (2–3 stop gradient for buttons/badges), `--gradient-holo` (a conic-gradient cycling all five stops for iridescent borders), and per-layer mesh gradient variables for the background composition.
* **Contrast pairing (mandatory in every theme):** light background tokens pair with dark text tokens, dark background tokens pair with light text tokens. Define `--text-on-gradient: #0a0b16` (dark ink) for text sitting on the bright aurora gradient surfaces — cyan/yellow/green stops are high-luminance, so dark ink is the only compliant pairing.
* **Light mode background:** never pure white — use a cool, aurora-tinted near-white (e.g., `#f4f6fc`); where a near-white is truly needed, use `#fefefe`, never `#ffffff`.
* **Shape & depth:** `--radius-sm` (~8px), `--radius-md` (~14px), `--radius-lg` (~22px), `--shadow-sm`, `--shadow-md`, plus `--glow` (a colored aurora glow shadow using the aurora tokens at low alpha).
* **Motion & spacing:** `--spacing-gap`, `--transition-fast` (~150ms), `--transition-normal` (~300ms), `--ease-standard` (e.g., `cubic-bezier(0.4, 0, 0.2, 1)`), `--aurora-duration` (~20s+ for ambient loops).
* **Elevation/stacking:** `--z-dropdown`, `--z-modal`, `--z-toast` — the sticky header and mobile menu use the dropdown tier; nothing may overlap out of order.
* **Glass tokens:** `--glass-bg` (translucent surface), `--glass-border` (translucent hairline).

**1.3 Mandatory Dark Mode Support**
* Dark mode **must always be defined**. Provide the dark token overrides both under a `.dark` class on `<html>` **and** under `@media (prefers-color-scheme: dark)` (scoped so the class wins when set) — this guarantees the first paint matches the OS preference even before JS runs.
* **Persistence:** `script.js` reads the stored theme from `localStorage`, applies `.dark`/`.light` on `<html>`, and falls back to `prefers-color-scheme` on first visit. No HTML restructuring may ever be needed to switch themes — only variable values swap.
* **Toggle control:** a visible theme toggle in the header containing two Google Material Symbols (`light_mode` / `dark_mode`) — CSS shows the correct icon per theme class. It must expose `aria-pressed` (`true` when dark) and an `aria-label` updated by JS ("Switch to dark theme" / "Switch to light theme").
* **Per-theme aurora tuning:** light mode uses softened, lower-opacity mesh (no screen blend); dark mode uses full-saturation mesh with `mix-blend-mode: screen` and stronger glow. Drive this with theme variables (`--aurora-opacity`, `--aurora-blend`) so switching is pure CSS.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with **Flexbox**. Every flex container must default to `align-items: center` unless there is an explicitly justified exception — the only permitted exception is `align-items: stretch` for equal-height card rows (Pricing, Features, Testimonials), which must be documented with a CSS comment.
* **Mobile-first:** base styles are single-column; use `min-width` media queries to scale up. Rows must collapse to columns on small viewports. There must be **zero horizontal scrolling** at any viewport width down to 320px. All interactive targets ≥ 44×44px.

**1.5 Framework & Naming Convention**
* Use clean, dependency-free custom CSS organized with CSS `@layer` (order: `tokens, base, layout, components, utilities`) — this avoids any CDN/build dependency and guarantees the zero-inline constraints. No other framework is permitted.
* **One naming convention only: BEM** (`block__element--modifier`) across the entire deliverable. Never mix conventions. Maintain a fixed vocabulary of reusable component classes: `.btn`, `.card`, `.input-group`, `.section`, `.container`, `.badge`, `.faq-item`, `.holo-border`, `.text-gradient`.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* **Text:** load **Space Grotesk** (500/600/700) as `--font-display` for headings and **Inter** (400/500/600) as `--font-base` for body, via Google Fonts `<link>` tags with `preconnect`. Bind tokens with proper font-family fallback stacks.
* **Icons:** use **Google Material Symbols (Rounded)** via the Google Fonts link. Use filled variants via `font-variation-settings: 'FILL' 1` where needed (e.g., stars). **Raw inline SVGs, local icon files, icon fonts from other sources, and emoji-as-icons are all forbidden.**
* **Exception clause (overrides the source style spec):** although the style specification lists "SVG gradients" and "canvas gradients" as techniques, all mesh/aurora visuals **must be implemented in pure CSS** (layered gradients, blend modes, filter animations) — no `<svg>` or `<canvas>` elements may appear in the markup. Material Symbols remain the only icon source.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component Requirements**
All states styled via classes on a `.btn` base (flex; `align-items: center`; `justify-content: center`; `gap: 0.5rem`; min 44×44px; `border-radius: var(--radius-md)`):
* **Variants:** `.btn--primary` (animated `--gradient-aurora` fill with a subtle dark overlay layer atop the stops + `--text-on-gradient` ink label, guaranteeing ≥ 4.5:1 across the whole surface), `.btn--secondary` (glass/outline), `.btn--ghost`, and `.btn--danger` (defined in the system even if unused — must read unmistakably as destructive in **both** themes, distinct from the magenta aurora accents).
* **Hover:** brightness/shadow shift plus a `background-position` slide on gradient buttons; `cursor: pointer`.
* **Focus:** distinct `:focus-visible` ring using a focus token (2px outline/box-shadow offset) — visible over gradients and on both themes.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading (`.is-loading`):** JS sets `disabled` and the class; interactions blocked (no double submits); a CSS border spinner (or rotating Material Symbol `progress`) renders **without changing button dimensions** — keep the label in the DOM but visually hidden, spinner absolutely centered.
* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
* **Success/Error (`.is-success` / `.is-error`):** temporary feedback states driven by `--text-success` / `--text-error` with a `check_circle` / `error` icon; all dynamic feedback announced via an `aria-live` region.

**2.2 Card Component Requirements**
* **Default:** flexible Flexbox column, glass styling (`--glass-bg`, `--glass-border`, `backdrop-filter`) or `--bg-secondary`, subtle border, `--radius-lg`, `--shadow-sm`.
* **Hover:** `translateY(-2px)`, shadow elevation, and a holographic border reveal via `.holo-border`.
* **Focus-within:** card border shifts to the aurora-blue glow when any child link/button receives focus.
* **Loading (skeleton):** define a `.skeleton` class with a shimmer keyframe animation (sweeping gradient highlight) that preserves layout dimensions.
* **Empty state:** define a `.card--empty` fallback pattern — centered Google Material Symbol, short heading, guidance text — available for any card slot lacking content.

**2.3 Form & Input Requirements** (applies to the Final CTA email capture)
* **Structure:** `.input-group` is a flex container wrapping a `<label>` (associated via `for`/`id`), the `<input>`, and a dedicated `.input-group__error` feedback container with `aria-live="polite"`.
* **States to style:** empty (`:placeholder-shown`), focused (outline/glow ring), filled, valid (`.is-valid` — success border + `check_circle`), invalid (`.is-error` — error border, `--text-error` message **with icon + text, never color-only**), disabled, read-only.
* Submission drives the button's loading → success/error states; validation logic lives in `script.js`.

**2.4 Modal / Popup Requirements** *(conditional — no modal is requested; if you introduce any overlay, it must meet all of the following)*
* **States:** opening, open, loading, success/error, closing — all animated via CSS transitions (opacity + scale).
* **UX:** centered flex overlay (`align-items: center`), backdrop, 44px Google Material Symbol `close` button, `role="dialog"`, `aria-modal="true"`, `aria-labelledby`, keyboard focus trapping with focus restored on close, close via `Esc` and backdrop click, layered at `--z-modal`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid `clamp()` type scale and spacing; no horizontal overflow at any width.
* **Smooth animations:** every state change transitions with `transition: var(--transition-normal)` / `var(--transition-fast)` and `--ease-standard`. Respect `prefers-reduced-motion: reduce` — disable all aurora flow loops, hue-rotation, transforms, and smooth scrolling; keep functionality intact (opacity-only transitions allowed).
* **Accessibility (a11y):** ≥ 4.5:1 body-text contrast in **both** modes — never place raw neon aurora stops as text on light backgrounds (define a per-theme `--accent-text`: darkened variant in light mode, aurora cyan in dark mode). Never rely on color alone to communicate state. Semantic HTML5 landmarks, a single `h1`, logical DOM/focus order, a visually-hidden skip-to-content link, correct ARIA roles/labels on custom widgets (theme toggle, mobile menu, accordion), full keyboard operability, and `aria-live` regions for form errors, loading, and success 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.
* **Aurora performance:** animate only `transform`, `opacity`, `filter`, and `background-position`; no layout-thrashing properties; ambient loops must run smoothly.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **File structure:** separate `index.html`, `style.css`, and `script.js`. Exactly **one** `<script src="script.js" defer></script>` reference before `</body>` — no other script tags, no inline script blocks.
* **script.js scope (unobtrusive, progressive enhancement only):** theme init/toggle/persistence (`localStorage`); mobile menu toggle (`aria-expanded`, `Esc` closes); header scrolled-state class; Final CTA form validation with loading/success/error states and `aria-live` announcements; optional IntersectionObserver scroll-reveal (disabled under reduced motion); FAQ is native `<details>`/`<summary>` (JS optional for single-open behavior).
* **Naming:** strict BEM everywhere — never mix conventions.
* **Assets:** zero image files — every visual (meshes, avatars, wordmark accents, shapes) is pure CSS. Avatars are CSS gradient circles with initials.
* **Copy:** all user-facing copy in English, authored for the fictional product — no lorem ipsum. Footer link targets that genuinely don't exist may use `href="#"`; visible link text must always be real copy.
* Deliver the complete, working page in one attempt.

---

## 5. THEME VISUAL SYSTEM — GRADIENT MESH / AURORA EVOLVED

* **Mesh background:** a fixed full-viewport aurora layer behind all content (composed from at least 4 `radial-gradient` color fields — one per major stop — with soft transparent falloff), so colors blend like a true mesh. Individual layers animate at different `--aurora-duration` values with alternating `background-position`/`transform` keyframes to create the flowing, morphing aurora feel.
* **Prismatic shimmer:** a slow `hue-rotate` filter loop on one accent layer/element for chromatic, iridescent shifting — subtle, performance-safe.
* **Holographic borders:** `.holo-border` implements `--gradient-holo` as a 1px frame using the conic-gradient + double-mask (content-box/border-box composite) technique — used on the highlighted pricing tier and revealed on feature-card hover.
* **Iridescent text:** `.text-gradient` uses gradient + `background-clip: text` with animated `background-position`; apply only to display-size keywords (hero keyword, section eyebrows) — never body text — with a solid fallback color.
* **Glass surfaces:** cards, header, and the CTA scrim use `backdrop-filter: blur()` + `--glass-bg`; provide a solid `--bg-secondary` fallback via `@supports`.
* **Per-theme tuning:** light mode = airy pastel-leaning mesh at reduced opacity, normal blend; dark mode = vivid full-saturation mesh, `mix-blend-mode: screen`, stronger `--glow`. Text never sits directly on peak-saturation mesh — glass scrims guarantee contrast in both modes.
* **Local auroras:** the Hero and Final CTA get their own intensified mesh panels; global ambient mesh stays calmer.

---

## 6. PAGE SECTION REQUIREMENTS

* **6.1 Global Header (sticky):** glass background (strengthens on scroll via `.is-scrolled`), flex row `align-items: center` — gradient wordmark, anchor nav (Features, How It Works, Testimonials, Pricing, FAQ) with gradient underline hover, theme toggle, compact `.btn--primary` CTA. On mobile: accessible hamburger (Material Symbols `menu`/`close`, `aria-expanded`) toggling a dropdown panel at `--z-dropdown`.
* **6.2 Hero:** full-intensity aurora background; gradient-bordered badge chip; `h1` with one gradient-morphing keyword (`clamp()` sizing); subheadline; two CTAs — `.btn--primary` ("Start free", anchors to CTA/pricing) + `.btn--secondary` glass ("See how it works", anchors to steps); an optional stats strip (3 metrics, `--text-secondary`) and/or a CSS-composed abstract product-visual panel inside a glass frame.
* **6.3 Features:** section header (eyebrow + `h2` + intro) above three `.card--glass` items (row → column). Each: 48px gradient icon circle with ink Material Symbol (use symbols like `gradient`, `blur_on`, `auto_awesome`, `animation`, `palette`), `h3`, copy, "Learn more" link with `arrow_forward`. Hover lift + holo border; focus-within glow.
* **6.4 How It Works:** 3 steps in a flex row on desktop joined by a horizontal gradient connector line (pseudo-element; vertical line on mobile). Each step: gradient number circle (1/2/3, ink numerals) or icon, `h3`, copy — structured as a clear three-stage narrative (e.g., generate → morph/blend → export).
* **6.5 Testimonials:** 3 glass cards (row → column): `format_quote` accent symbol, quote, 5-star row (filled Material Symbol `star`, with a per-theme `--star-color` tuned for contrast), gradient-circle avatar with initials, name + role in `--text-secondary`.
* **6.6 Pricing:** 3 tiers (Free / Pro / Studio), flex row with the justified `align-items: stretch` exception; equal heights. Each card: tier name, large display-font price with "/month" microcopy, feature list with `check` symbols in `--text-success`, CTA (highlighted tier gets `.btn--primary`; others `.btn--secondary`). The middle tier is highlighted: `.holo-border`, `--glow` shadow, extra padding, and a "Most popular" badge (absolute, gradient fill, ink text). No billing toggle — static pricing.
* **6.7 FAQ:** 5–6 native `<details class="faq-item">` / `<summary>` pairs (natively keyboard accessible), max-width ~760px centered. Summary is a flex row (`space-between`, `align-items: center`) with a `expand_more` icon that rotates 180° on `[open]` (state conveyed by rotation, not color alone); hover/focus-visible states; open body animates in (e.g., `grid-template-rows` 0fr→1fr or fade/slide).
* **6.8 Final CTA:** full-width intensified aurora panel with an inner glass scrim panel guaranteeing text contrast; `h2` with gradient keyword, paragraph, then the email capture `.input-group` + `.btn--primary` inline (row → column on mobile). JS flow: invalid email → `.is-error` + `aria-live` message; valid → button loading → success state + confirmation message ("You're on the list" style).
* **6.9 Footer:** `--bg-secondary` surface with top border. Top area is a wrapping flex row: brand column (wordmark, one-line blurb, a row of five small gradient swatch dots showcasing the palette) + three secondary link columns (Product, Resources, Company) with real English labels. Bottom bar (flex, `space-between`): © 2025 + product name, and small Privacy/Terms links. All links show hover state shifts to `--accent-text`.