Ethereal Voice demo
Ethereal Voice

A dark, ethereal AI landing page style with glowing gradients, waveform motifs, and futuristic audio-tech aesthetics inspired by ElevenLabs.
Category: Dark Tech & Cyber
Era: 2020s Modern
Prompt: 14.6 KB · 1998 words
## SYSTEM PROMPT — LANDING PAGE BUILD: "ELEVENLABS ETHEREAL VOICE"

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-grade landing page for an original voice AI product in a single pass — full code, first attempt, no partial output, no clarifying questions. The target aesthetic is **"ElevenLabs Ethereal Voice"**: a near-white canvas with warm undertones, ethereal weight-300 display typography, whisper-quiet multi-layer shadows, translucent warm-stone pill buttons, and CSS-built audio waveform motion.

---

### **1. THEME SPECIFICATION — "ELEVENLABS ETHEREAL VOICE"**

**1.1 Style DNA**
- **Name:** ElevenLabs Ethereal Voice
- **Type:** Near-white canvas, light 300 display weight, multi-layer shadows, warm stone pills, audio aesthetic
- **Keywords:** ethereal, voice AI, light grotesque, warm stone, multi-layer shadows, pill buttons, whisper shadows, audio waveform
- **Era:** 2024–2026 Voice AI premium
- **Light mode is the flagship experience; dark mode is still mandatory (see 2.3)**

**1.2 Color Palette & Token Mapping**
- **Primary colors:** White `#ffffff`, Light Gray `#f5f5f5`, Black `#000000`, Warm Stone `rgba(245,242,239,0.8)`
- **Secondary colors:** Dark Gray `#4e4e4e`, Warm Gray `#777169`, Border `#e5e5e5`, Warm Shadow `rgba(78,50,23,0.04)`
- **Required token assignments:** `--primary: #000000`; `--secondary: #777169`; `--bg-primary: #ffffff`; `--bg-secondary: #f5f2ef`; `--surface-stone: rgba(245,242,239,0.8)`; `--text-primary: #000000`; `--text-secondary: #4e4e4e`; `--text-muted: #777169`; `--border-default: #e5e5e5`. The palette omits feedback colors — define them yourself with warm-leaning hues meeting AA contrast (e.g., `--text-success: #1e7a4a`, `--text-error: #b3261e`, plus matching `--border-success` / `--border-error`).
- **Exception (canvas):** This theme explicitly specifies pure white `#ffffff` as the canvas — honor it for `--bg-primary` only; for any other near-white surface the theme does not explicitly define, use `#fefefe`, never `#ffffff`.

**1.3 Visual Effects & Micro-Details** *(translated from source spec)*
- Near-white canvas with a warm undertone (`#f5f5f5`, `#f5f2ef`)
- Display font at **weight 300 (light)** for headlines — ethereal typography that reads like sound waves
- Inter body text with **positive letter-spacing (+0.14px to +0.18px)** for an airy rhythm
- **Multi-layer shadows at sub-0.1 opacity** (inset + outline + elevation)
- **Pill buttons (9999px)** with translucent warm-stone backgrounds
- **Warm-tinted shadows** `rgba(78,50,23,0.04)`
- **Bold uppercase display font** for select CTAs (hero and pricing CTAs)
- **Half-pixel inset borders** (`0px 0px 0px 0.5px inset`)

**1.4 Signature CSS Recipes (all values must resolve to CSS variables)**
- **Whisper surface (cards/panels):** `background: var(--bg-primary)` or `var(--bg-secondary); border: 1px solid var(--border-default); box-shadow: rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset, rgba(0,0,0,0.06) 0px 0px 0px 1px, rgba(0,0,0,0.04) 0px 4px 4px; border-radius: 20px`
- **Warm stone pill CTA:** `background: var(--surface-stone); box-shadow: rgba(78,50,23,0.04) 0px 6px 16px` plus the half-pixel inset hairline; `border-radius: 9999px`
- **Display type scale:** 48px, line-height 1.08, letter-spacing -0.96px, font-weight 300
- **Radii:** `--radius-pill: 9999px`; cards `--radius-md: 20px` (per theme); `--radius-sm: 12px` for small elements/inputs; `--radius-lg: 24px` for large panels
- **Shadow tokens:** `--shadow-sm` = whisper multi-layer recipe; `--shadow-md` = elevated warm variant; `--shadow-warm` = `rgba(78,50,23,0.04) 0px 6px 16px`

---

### **2. STRICT RULES & ARCHITECTURE**

**2.1 CSS-First Architecture & Zero Inline CSS**
- **No inline CSS:** the `style="..."` attribute is forbidden anywhere in the HTML.
- **Class/ID selectors only:** all design properties, layout rules, and states are targeted via class or ID selectors.
- **Minimal HTML modifications:** markup must remain clean, semantic, and style-agnostic — re-theming the entire site must require editing `style.css` only, never the markup.

**2.2 CSS Variables & Theme Tokens**
- Store all visual tokens in `:root` (and theme classes) using CSS variables: the full required set `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`, plus `--text-muted`, `--surface-stone`, `--font-base`, `--font-display`, `--radius-sm/md/lg/pill`, `--shadow-sm/md/warm`, `--spacing-gap`, `--transition-fast`, `--transition-normal`, `--ease-standard`, `--z-dropdown`, `--z-modal`, `--z-toast`.
- **Contrast pairing is mandatory:** every light background token pairs with a dark text token, and every dark background token pairs with a light text token — enforced in every theme, not just the default.

**2.3 Mandatory Dark Mode Support**
- Define dark mode tokens under both `@media (prefers-color-scheme: dark)` **and** a `.dark` class on the root element so JS can override; background/text variables must switch seamlessly with zero HTML restructuring.
- Dark mode = a **"dimmed warm studio"** variant: e.g., `--bg-primary: #171412`, `--bg-secondary: #1f1b18`, `--surface-stone: rgba(245,242,239,0.08)`, light text `#f5f2ef` / secondary `#b8b2aa`, borders `rgba(245,242,239,0.14)`, shadows switched to higher-opacity black equivalents. Preserve the warm hue and whisper-shadow character.
- **Persistence:** user choice saved in `localStorage`, falling back to `prefers-color-scheme` on first visit; a visible toggle control must exist with correct `aria-pressed` / `aria-label` state.
- **Exception (theme note):** the source spec marks dark mode "Full support / Not Recommended" — dark mode remains mandatory regardless; keep light mode as the flagship experience.

**2.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox. **Every flex container must default to `align-items: center`** unless an exception is explicitly justified (e.g., testimonial cards may stretch-align).
- **Mobile-first:** all flex layouts must be responsive out of the box — rows become columns on small viewports. No horizontal scrolling at any viewport width from 320px up.

**2.5 Framework Default & Tailwind CSS Integration**
- Use Tailwind CSS (Play CDN or compiled) **or** clean custom CSS driven by Tailwind's `@layer` / `@apply` directives. All utility classes must map back to CSS variables or generic reusable class names (`.btn`, `.card`, `.input-group`); never hardcode raw theme hex values in markup utilities — reference tokens (e.g., `bg-[var(--bg-primary)]`) or component classes.
- **Exception (typography):** the source baseline lists `system-ui` for display text — ignore it as a primary choice; display text must use the loaded Google display font (see 2.6), with `system-ui` only as the final generic fallback in the font stack.

**2.6 Typography & Icons (Google Fonts Mandatory)**
- **Text:** load **Inter** (weights 400, 500) via Google Fonts `<link>` and bind to `--font-base`; body text uses letter-spacing +0.14px to +0.18px.
- **Exception (fonts):** the theme names "Waldenburg / WaldenburgFH", which is **not available on Google Fonts** — keep the Google-Fonts-only rule and substitute the closest Google Fonts grotesque: load **'Hanken Grotesk'** (weights 300, 500, 700) and bind to `--font-display` ('Figtree' 300 is an acceptable alternate). Never load local or non-Google font files.
- **Icons:** Google Material Symbols (Outlined) via Google Fonts, with icon names for this build: `mic`, `graphic_eq`, `waves`, `record_voice_over`, `auto_awesome`, `translate`, `check`, `close`, `expand_more`, `menu`, `dark_mode`, `light_mode`, `play_arrow`, `arrow_forward`. **Raw inline SVGs and local icon files are forbidden.**
- **Waveform visuals must be pure CSS** — flex containers of divs with staggered `scaleY` keyframe animations, marked `aria-hidden="true"`. Never SVG.

---

### **3. COMPONENT DESIGN SPECIFICATIONS**

**3.1 Button Component Requirements**
Style all states via CSS classes. Base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target **44x44px**, `border-radius: var(--radius-pill)`.
- **Variants:** `.btn--primary` (black `#000` fill, white text), `.btn--stone` (translucent warm-stone fill, warm shadow, half-pixel inset hairline), `.btn--ghost`. Hero and pricing CTAs use **bold UPPERCASE display font**.
- **Hover:** brightness/shadow shift with `cursor: pointer`. **Focus:** distinct focus ring via CSS variables for keyboard navigation. **Active/pressed:** `transform: scale(0.97)`.
- **Loading:** disables interactions, prevents double-clicks/double submits, and renders a CSS spinner or animated Google icon without distorting button dimensions.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`. **Success/Error:** temporary feedback state styles driven by `--text-success` / `--text-error`.

**3.2 Card Component Requirements**
Apply to feature, step, testimonial, and pricing cards.
- **Default:** flexible Flexbox layout with subtle borders and elevation using `--bg-secondary` / `--bg-primary` and the whisper shadow recipe, `--radius-md`.
- **Hover:** elevation/shadow shift plus subtle `transform: translateY(-2px)`.
- **Focus-within:** card border/outline highlights when a child link or button receives focus.
- **Loading (skeleton):** shimmer animation classes defined in CSS, sized to prevent layout jumps (demonstrate in the modal loading state).
- **Empty state:** structured fallback layout featuring a Google Material icon and clear guidance text.

**3.3 Form & Input Requirements** *(Final CTA email capture)*
- **States:** empty, focused (outline ring), filled, valid (success border + check icon), invalid (error border, red text, error icon — never color-only), disabled, read-only.
- **Structure:** a flex `.input-group` wrapping a label, input field (radius `--radius-sm`), and a dedicated error feedback container wired to an `aria-live` region.
- Submit must exercise the button loading → success (inline confirmation) / error (inline message) flow with visible feedback.

**3.4 Modal / Popup Requirements** *(demo modal opened from the Final CTA)*
- **States:** opening, open, loading, success/error, closing — all animated via CSS transitions.
- **UX:** centered flex container (`align-items: center`), backdrop overlay (`z-index: var(--z-modal)`), Google icon close button, keyboard focus trapping, and closing via `Esc` or overlay clicks. The modal uses `role="dialog"` + `aria-modal` and renders a skeleton loading state before its content.

---

### **4. CORE UX & MICRO-INTERACTION RULES**

- **Responsive by default:** fluid type via `clamp()`, standard breakpoints, zero horizontal overflow from 320px up.
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion` (pause waveform animations, remove transforms).
- **Accessibility (a11y):** AA contrast in both light and dark modes — `#777169` is reserved for large/muted text only; body secondary text uses `#4e4e4e`. Never rely on color alone to communicate state. Semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`), correct ARIA roles/labels on all custom widgets (theme toggle `aria-pressed`, accordion `aria-expanded`/`aria-controls`, modal dialog semantics), logical DOM/focus order, full keyboard operability — no mouse-only interactions — and `aria-live` regions for dynamic feedback (form errors, toasts, loading states).
- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.
- **Toasts:** transient feedback surfaces stacked at `z-index: var(--z-toast)` with polite `aria-live` announcement.
- **Destructive actions:** none expected on a landing page; if any appear, `.btn-danger` must be visually distinct in both light and dark themes.

---

### **5. LANDING PAGE STRUCTURE & CONTENT REQUIREMENTS**

**All user-facing copy must be written in English** (the source spec was partially in Portuguese — translate everything). Invent an original voice AI product identity (name + wordmark in the display font); do not clone ElevenLabs' actual brand, name, or copy. No lorem ipsum — write real, plausible product copy.

- **5.1 Sticky Header:** slim glass header (backdrop blur over the near-white canvas) hosting the wordmark, anchor links (Features, How It Works, Pricing, FAQ), the mandatory theme toggle, and a primary pill CTA. On mobile, links collapse behind a Material `menu` icon button toggling a dropdown panel (`z-index: var(--z-dropdown)`), fully keyboard accessible.
- **5.2 Hero:** display headline at exactly 48px / weight 300 / line-height 1.08 / letter-spacing -0.96px about ultra-realistic AI voices; airy Inter subheadline; primary black pill CTA + warm-stone secondary pill CTA; a CSS-only animated audio waveform (decorative, `aria-hidden`); optional floating voice-preview card using the whisper recipe.
- **5.3 Features (3 cards):** per card spec — Material icon in a warm-stone chip, title, 2–3 line description. Suggested topics: ultra-realistic speech synthesis, multilingual voices, instant voice cloning.
- **5.4 How It Works (3 steps):** numbered steps (01 / 02 / 03) with icons and a connecting hairline: type or paste a script → choose a voice → generate and download.
- **5.5 Testimonials:** 3 quote cards — quote text, CSS monogram chip (initials; no external images), English name and role.
- **5.6 Pricing (3 tiers):** Free, Creator, Pro. Middle tier highlighted with a "Most popular" badge and elevated shadow; feature lists with `check` icons; CTAs exercise all button variants and states.
- **5.7 FAQ:** 5–6 questions in an accessible accordion (native `details`/`summary`, or buttons with `aria-expanded`/`aria-controls`), animated open/close, `expand_more` icon rotation.
- **5.8 Final CTA:** statement headline in display weight 300 + the email capture form (per 3.3) + a "See it in action" button that opens the demo modal (per 3.4); success/error feedback announced via `aria-live`/toast.
- **5.9 Footer with secondary links:** link columns (Product, Company, Resources, Legal), Material Symbol social icons, copyright and small print — all in English.

---

### **6. DELIVERABLE & OUTPUT FORMAT**

- **File structure:** separate `index.html`, `style.css`, and `script.js` files. The only `<script>` allowed in the HTML is a single deferred reference to `script.js`. No inline `<style>` blocks.
- **Naming convention:** BEM (`block__element--modifier`) exclusively across the entire deliverable — never mix conventions.
- **No unrequested placeholders:** real English copy everywhere content is knowable; placeholders only where content genuinely cannot be invented.
- **Complete on the first attempt:** every rule, component state, and section above must ship in one final output — generate the code immediately.