ElevenLabs · Full Page
ElevenLabs
Cinematic dark-canvas AI-voice marketing — purple-gradient hero with near-monochrome scroll body, waveform motif as both decoration and live product demo, and theatrical 3-5 second opening animation that proves voice expressiveness. The page is a trailer; everything downstream earns its calmer pacing.
Editorial disclaimer
Editorial noteThis entry documents observable design-language patterns for educational transfer and AI-agent briefing. Screenshots and trademarks are property of their respective owners. AI2 Design is not affiliated with or endorsed by the featured brand. Inspiration here is about language and rhythm — do not reproduce brand identity, logo, product copy, or proprietary features.
Curator verdict
Why we catalogued it?
ElevenLabs is the most cinematic of the dark-mode AI marketing pages — gradient purples, animated waveforms, audio-product imagery used as both demo and visual hero. We catalogued it because it earns its theatricality: the motion choreography proves the product's medium (voice/audio) and the gradient discipline anchors a category that usually drowns in over-saturation.
Design decisions observed
- Waveform as recurring motif and animated demo — every section uses audio glyphs as structural decoration AND product proof.
- Purple-gradient hero with restrained body — the gradient owns the hero but cleans up to near-monochrome for feature scrolling.
- Cinematic motion choreography — hero animations are intentionally lush (audio waves, fades, scaling), demonstrating the product's expressiveness.
- Voice-clone testimonials with animated waveforms — the most product-honest social proof we've seen in AI marketing.
What to study
- Theatrical hero motion that earns its budget — ElevenLabs' opening animation is a 4-second commercial for the product's voice quality.
- Single-gradient hero followed by near-monochrome scroll — the gradient is reserved for the moment that needs emotional lift; the rest of the page is dignified.
- Audio-product imagery as social proof — waveforms with quote text, not headshots.
What to avoid
- Don't replicate ElevenLabs' hero motion budget without a product that genuinely earns 4 seconds of theater — for less expressive products it'll feel performative.
- Don't sustain the gradient density across the whole page — the trick is the restraint after the hero.
Taste notes
The page feels like the opening shot of a tech-thriller movie — purple-lit, audio-tinged, cinematic. Then it settles into a calm narrative scroll. The taste is in the transition between modes.
Lineage & references
- Sits with Runway, Midjourney, and Suno in the 2024+ generative-media marketing cohort — products that need to feel as expressive as their output.
- Inherits the cinematic-hero pattern from Pixar's marketing era (early 2010s) and Apple Music's 2015 launch — purple gradients, lush motion.
- Part of the AI voice/audio wave (ElevenLabs, Suno, Udio, Coqui) — voice synthesis products carrying audio-product visual heritage.
Design language brief
Paste-ready for your agent.
A typed design system transfer brief — philosophy, tokens, rules, techniques, and fitness checks. Your agent reads the whole language, not just the pixels.
Philosophy
Cinematic dark-canvas AI-voice marketing — purple-gradient hero with near-monochrome scroll body, waveform motif throughout, theatrical hero motion that proves product expressiveness, restrained downstream sections. The page is a trailer; everything after the hero earns its calmer pacing.
Main prompt
Adopt this as a design-language brief for AI generative-media marketing. Use the dark canvas with purple gradient hero, near-monochrome downstream scroll, audio-waveform motif throughout, and theatrical 3-5 second hero animation that proves product expressiveness. Reserve gradient density for the hero; the rest of the page is calm. Use product-derived motifs (waveforms here) as both decoration and demo.
Overview
- Layout
- Stacked
- Content width
- Bounded
- Framing
- Layered
- Grid strength
- Strong
Color philosophy
Dark-first canvas — primary surface #000000 paired with foreground #ffffff doing the bulk of reading-layer work. Accent moments use #777169 + #ffffff sparingly. Near-black backdrop with restrained warm or cool accents.
- #000000 — primary surface / dominant background
- #e5e5e5 — primary foreground / reading layer
- #777169 — first accent — used for CTAs and highlights
- #ffffff — secondary accent / hover states
- #fdfcfc — tertiary surface / panels
Gradients (paste-ready)
// No gradient extracted — use solid surfaces
Typography rules
- Primary family: Inter. Mono fallback: JetBrains Mono for code and tabular numerics.
- Weight ladder: 300 / 400 / 500 / 700. Keep substitutions tight — the captured ladder is the typographic signature.
- Display tracking uses negative px (not em) for optical correction at large sizes — typically -0.5 to -1.5px at 48-64px hero scale.
- Heading line-height tightens at display sizes (1.0-1.2); body sits at 1.4-1.6. Captions and small UI labels at 1.3.
- Tabular numerals mandatory on aligned columns: font-variant-numeric: tabular-nums.
- Italic reserved for editorial quotes and emphasis where weight cannot carry — never for product UI labels.
- Paragraph max 45-55ch at body size; dense data tables may extend to 65ch with line-height 1.5.
Spacing rules
- Scale (observed): 2 / 4 / 6 / 9 / 12 / 14 / 16 / 18 px. Stay on the scale — no magic numbers.
- Container max-width: 1920px. Secondary bounded rails for narrow content clusters at ~480-640px.
- Section vertical rhythm: 64-128px on desktop, 40-80px on mobile, scaled by page depth.
- Card padding: 16-24px on desktop, 12-16px on mobile.
- Gutter values draw from the smaller half of the scale (4 / 8 / 12 / 16 / 24).
Design tokens
Palette, type, and space — all agent-readable.
13 colors · hex / rgb / hsl / oklch
- foregroundoverlay-darker-plus49%
- HEX
#000000 - RGB
rgb(0, 0, 0) - HSL
hsl(0, 0%, 0%) - OKLCH
oklch(0.00% 0.0000 0.00)
- HEX
- neutralneutral-10039%
- HEX
#E5E5E5 - RGB
rgb(229, 229, 229) - HSL
hsl(0, 0%, 90%) - OKLCH
oklch(92.19% 0.0000 89.76)
- HEX
- foreground6%
- HEX
#777169 - RGB
rgb(119, 113, 105) - HSL
hsl(34, 6%, 44%) - OKLCH
oklch(55.16% 0.0143 75.28)
- HEX
- backgroundwhite-503%
- HEX
#FFFFFF - RGB
rgb(255, 255, 255) - HSL
hsl(0, 0%, 100%) - OKLCH
oklch(100.00% 0.0000 89.76)
- HEX
- backgroundeggshell1%
- HEX
#FDFCFC - RGB
rgb(253, 252, 252) - HSL
hsl(0, 20%, 99%) - OKLCH
oklch(99.18% 0.0011 17.18)
- HEX
- foreground1%
- HEX
#57534E - RGB
rgb(87, 83, 78) - HSL
hsl(33, 5%, 32%) - OKLCH
oklch(44.44% 0.0096 73.64)
- HEX
- foreground1%
- HEX
#A59F97 - RGB
rgb(165, 159, 151) - HSL
hsl(34, 7%, 62%) - OKLCH
oklch(70.52% 0.0134 75.33)
- HEX
- accent1%
- HEX
#0A59D2 - RGB
rgb(10, 89, 210) - HSL
hsl(216, 91%, 43%) - OKLCH
oklch(50.05% 0.1994 260.31)
- HEX
- accent0%
- HEX
#F41A2F - RGB
rgb(244, 26, 47) - HSL
hsl(354, 91%, 53%) - OKLCH
oklch(61.60% 0.2403 25.02)
- HEX
Inspector
Tab through the captured artifacts.
Six observable layers — page structure, fonts, breakpoints, z-index, gradients, motion — kept paste-ready alongside the tokens above.
Page structure
Semantic hierarchy at a glance.
Depth-first walk of meaningful sections — header, navigation, main regions, articles, footer. 9 nodes captured; depth capped at 6 for readability.
- body
- ├─ Main
- │ ├─ div
- │ │ └─ div
- │ │ └─ div
- │ │ └─ Nav
- │ └─ Footer
- ├─ div (×2)
- └─ iframepresentation
Accessibility
WCAG contrast matrix.
120 combinations · 50 pass AA · 22 pass AAA · APCA Lc shown alongside WCAG 2.1 ratio for draft WCAG 3 awareness.
| Preview | fg | bg | Ratio | Normal | Large | APCA Lc | Context |
|---|---|---|---|---|---|---|---|
Aa | #000000 | #FFFFFF | 21.00 | AAA | AAA | +106 | foreground on background |
Aa | #FFFFFF | #000000 | 21.00 | AAA | AAA | -108 | background on foreground |
Aa | #000000 | #FDFCFC | 20.51 | AAA | AAA | +104 | foreground on background |
Aa | #FDFCFC | #000000 | 20.51 | AAA | AAA | -106 | background on foreground |
Aa | #000000 | #FFF9F5 | 20.12 | AAA | AAA | +103 | foreground on background |
Aa | #FFF9F5 | #000000 | 20.12 | AAA | AAA | -105 | background on foreground |
Aa | #000000 | #F5F8FF | 19.75 | AAA | AAA | +102 | foreground on background |
Aa | #F5F8FF | #000000 | 19.75 | AAA | AAA | -103 | background on foreground |
Aa | #000000 | #E5E5E5 | 16.67 | AAA | AAA | +91 | foreground on neutral |
Aa | #E5E5E5 | #000000 | 16.67 | AAA | AAA | -91 | neutral on foreground |
Image strategy
Asset loading & format policy.
Observable image posture — total count, lazy-loading ratio, and format mix. Hero image is measured above the fold.
Hero image
https://elevenlabs.io/_next/image?url=https%3A%2F%2Feleven-public-cdn.elevenlabs.io%2Fmarketing_website%2F_next%2Fstatic%2Fmedia%2Fcreative-1.f3361dab.png&w=384&q=80- Format
- UNKNOWN
- Dimensions
- 288×288
- Loading
- lazy
- srcset
- yes
- srcset descriptor
- /_next/image?url=https%3A%2F%2Feleven-public-cdn.elevenlabs.io%2Fmarketing_website%2F_next%2Fstatic%2Fmedia%2Fcreative-1.f3361dab.png&w=16&q=80 16w, /_next/image?url=https%3A%2F%2Feleven-public-cdn.elevenlabs.io%2Fmarketing_website%2F_next%2Fstatic%2Fmedia%2Fcreative-1.f3361dab.png&w=32&q=80 32w, /_next/image?url=https%3A%2F%2Feleven-public-cdn.elevenlabs.io%2Fmarketing_website%2F_next%2Fstatic%2Fmedia%2Fcreative-1.f3361dab.png&w=48&q=80 48w, /_next/image?url=https%3A%2F%2Feleven-public-cdn.elevenlabs.io%2Fmarketing_website%2F_next%2Fstatic%2Fmedia%2Fcreative-1.f3361dab.png&w=64&q=80 64w, /_next/image?url=https%3A%2F%2Feleven-public-cdn.elevenlabs.io%2Fmarketing_website%2F_next%2Fstatic%2Fmedia%2Fcreative-1.f3361dab.png&w=96&q=80 96w, /_next/image?url=https%3A%2F%2Feleven-public-cdn.elevenlabs.io%2Fmarketing_website%2F_next%2Fstatic%2Fmedia%2Fcreative-1.f3361dab.png&w=128&q=80 128w, /_next/image?url=https%3A%2F%2Feleven-public-cdn.elevenlabs.io%2Fmarketing_website%2F_next%2Fstatic%2Fmedia%2Fcreative-1.f3361dab.png&w=256&q=80 256w, /_next/image?url=https%3A%2F%2Feleven-public-cdn.elevenlabs.io%2Fmarketing_website%2F_next%2Fstatic%2Fmedia%2Fcreative-1.f3361dab.png&w=384&q=80 384w, /_next/image?url=https%3A%2F%2Feleven-public-cdn.elevenlabs.io%2Fmarketing_website%2F_next%2Fstatic%2Fmedia%2Fcreative-1.f3361dab.png&w=640&q=80 640w, /_next/image?url=https%3A%2F%2Feleven-public-cdn.elevenlabs.io%2Fmarketing_website%2F_next%2Fstatic%2Fmedia%2Fcreative-1.f3361dab.png&w=750&q=80 750w, /_next/image?url=https%3A%2F%2Feleven-public-cdn.elevenlabs.io%2Fmarketing_website%2F_next%2Fstatic%2Fmedia%2Fcreative-1.f3361dab.png&w=828&q=80 828w, /_next/image?url=https%3A%2F%2Feleven-public-cdn.elevenlabs.io%2Fmarketing_website%2F_next%2Fstatic%2Fmedia%2Fcreative-1.f3361dab.png&w=1080&q=80 1080w, /_next/image?url=https%3A%2F%2Feleven-public-cdn.elevenlabs.io%2Fmarketing_website%2F_next%2Fstatic%2Fmedia%2Fcreative-1.f3361dab.png&w=1200&q=80 1200w, /_next/image?url=https%3A%2F%2Feleven-public-cdn.elevenlabs.io%2Fmarketing_website%2F_next%2Fstatic%2Fmedia%2Fcreative-1.f3361dab.png&w=1920&q=80 1920w, /_next/image?url=https%3A%2F%2Feleven-public-cdn.elevenlabs.io%2Fmarketing_website%2F_next%2Fstatic%2Fmedia%2Fcreative-1.f3361dab.png&w=2048&q=80 2048w, /_next/image?url=https%3A%2F%2Feleven-public-cdn.elevenlabs.io%2Fmarketing_website%2F_next%2Fstatic%2Fmedia%2Fcreative-1.f3361dab.png&w=3840&q=80 3840w
Frequently asked
Questions people ask about ElevenLabs
Answers are pulled from the curator verdict and design brief — the same text your AI agent sees when it paste-reads this page.
What makes ElevenLabs' marketing page so cinematic?
ElevenLabs is the most theatrical of the dark-mode AI marketing pages — gradient purples, animated waveforms, and a hero motion budget that doubles as a 4-second product trailer. The opening proves voice expressiveness through motion, then the page settles into a calm narrative scroll. The taste is in the transition between modes.
What fonts and palette does ElevenLabs use?
A geometric sans handles display and body across an audio-product visual canvas. The palette centres a purple-gradient hero that owns the opening moment, then disciplines down to near-monochrome for feature scrolling. Waveform motifs recur as both decoration and live product demo, and voice-clone testimonials use animated waveforms instead of headshot photography.
Can I apply ElevenLabs' cinematic approach to my AI product?
Yes, if your product genuinely earns the theatrical opening. Adopt the dark canvas, purple-gradient hero with near-monochrome downstream, audio-derived motifs as both decoration and demo, and a 3-5 second hero animation that proves product expressiveness. Discipline the gradient after the hero — that's the trick. Our growing gallery captures the AI2 Design brief.
Editorial credit
Featured Sponsor slot — your brand here
Dedicated logo placement — no rotation, on every export.
COMPARE THIS WITH
Side-by-side reads sharing this design signal.
See also
