### ElevenLabs - AI voice platform. - Dark cinematic UI, audio-waveform aesthetics - description: A voice-AI brand whose marketing surfaces read like a quiet…
Real data. Real impact.
Emerging
Developers
Per week
Excellent
Skills give you superpowers. Install in 30 seconds.
version alpha
name ElevenLabs
description A voice-AI brand whose marketing surfaces read like a quietly editorial print magazine. The base canvas is off-white (
#f5f5f5#292524colors primary: "#292524" primary-active: "#0c0a09" ink: "#0c0a09" body: "#4e4e4e" body-strong: "#292524" muted: "#777169" muted-soft: "#a8a29e" hairline: "#e7e5e4" hairline-soft: "#f0efed" hairline-strong: "#d6d3d1" canvas: "#f5f5f5" canvas-soft: "#fafafa" canvas-deep: "#0c0a09" surface-card: "#ffffff" surface-strong: "#f0efed" surface-dark: "#0c0a09" surface-dark-elevated: "#1c1917" on-primary: "#ffffff" on-dark: "#ffffff" on-dark-soft: "#a8a29e" gradient-mint: "#a7e5d3" gradient-peach: "#f4c5a8" gradient-lavender: "#c8b8e0" gradient-sky: "#a8c8e8" gradient-rose: "#e8b8c4" semantic-error: "#dc2626" semantic-success: "#16a34a"
typography display-mega: fontFamily: "'Waldenburg', 'Times New Roman', serif" fontSize: 64px fontWeight: 300 lineHeight: 1.05 letterSpacing: -1.92px display-xl: fontFamily: "'Waldenburg', serif" fontSize: 48px fontWeight: 300 lineHeight: 1.08 letterSpacing: -0.96px display-lg: fontFamily: "'Waldenburg', serif" fontSize: 36px fontWeight: 300 lineHeight: 1.17 letterSpacing: -0.36px display-md: fontFamily: "'Waldenburg', serif" fontSize: 32px fontWeight: 300 lineHeight: 1.13 letterSpacing: -0.32px display-sm: fontFamily: "'Waldenburg', serif" fontSize: 24px fontWeight: 300 lineHeight: 1.2 letterSpacing: 0 title-md: fontFamily: "'Inter', sans-serif" fontSize: 20px fontWeight: 500 lineHeight: 1.35 letterSpacing: 0 title-sm: fontFamily: "'Inter', sans-serif" fontSize: 18px fontWeight: 500 lineHeight: 1.44 letterSpacing: 0.18px body-md: fontFamily: "'Inter', sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0.16px body-strong: fontFamily: "'Inter', sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0.16px body-sm: fontFamily: "'Inter', sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.47 letterSpacing: 0.15px caption: fontFamily: "'Inter', sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption-uppercase: fontFamily: "'Inter', sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0.96px textTransform: uppercase button: fontFamily: "'Inter', sans-serif" fontSize: 15px fontWeight: 500 lineHeight: 1.0 letterSpacing: 0 nav-link: fontFamily: "'Inter', sans-serif" fontSize: 15px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0
rounded none: 0px xs: 4px sm: 6px md: 8px lg: 12px xl: 16px xxl: 24px pill: 9999px full: 9999px
spacing xxs: 4px xs: 8px sm: 12px base: 16px md: 20px lg: 24px xl: 32px xxl: 48px section: 96px
components top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 64px button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 10px 20px height: 40px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.pill}" button-outline: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.pill}" padding: 9px 19px height: 40px button-tertiary-text: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button}" hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-mega}" padding: 96px gradient-orb-card: backgroundColor: "{colors.canvas-soft}" textColor: "{colors.ink}" rounded: "{rounded.xxl}" padding: 32px feature-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.xl}" padding: 24px product-card-stack: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 0 voice-row: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" padding: 12px 0 voice-icon-circular: backgroundColor: "{colors.surface-strong}" rounded: "{rounded.full}" size: 32px pricing-tier-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 32px pricing-tier-featured: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 32px text-input: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 12px 16px height: 44px badge-pill: backgroundColor: "{colors.surface-strong}" textColor: "{colors.ink}" typography: "{typography.caption-uppercase}" rounded: "{rounded.pill}" padding: 4px 10px cta-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: 96px testimonial-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.body}" typography: "{typography.body-md}" rounded: "{rounded.xl}" padding: 32px audio-waveform-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.xl}" padding: 24px footer: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: 64px 48px footer-link: backgroundColor: transparent textColor: "{colors.body}" typography: "{typography.body-sm}"
ElevenLabs reads like a quietly editorial print magazine that happens to be a voice-AI product. The base canvas is off-white {colors.canvas} (#f5f5f5) holding warm near-black ink {colors.ink} (#0c0a09). The brand voltage is photographic, not chromatic: soft pastel atmospheric gradient orbs (mint, peach, lavender, sky, rose) drift through the page as the only "color" moments. There is no neon accent, no saturated CTA color, no dark-canvas dev-tools atmosphere.
Type pairs Waldenburg Light (custom serif at weight 300) for display with Inter for body, navigation, captions. The display weight at 300 is the editorial signature — never bold, never heavy.
CTAs are subtle: a near-black ink pill ({component.button-primary}) is the primary, a transparent outline ({component.button-outline}) is the secondary. The brand trusts atmospheric photography and modest type weights to carry brand work.
Key Characteristics:
Off-white canvas, warm near-black ink. No saturated CTA color.
Single primary action: ink pill at {rounded.pill}. Atmospheric gradients carry visual brand voltage.
Display runs Waldenburg Light at weight 300 — editorial magazine voice.
Body runs Inter at 400 with subtle letter-spacing (+0.15-0.18px).
Pastel gradient orbs (5 tokens: mint, peach, lavender, sky, rose) used as atmospheric brand decoration only.
Soft pill geometry ({rounded.pill} for CTAs, {rounded.xl} for cards).
96px section rhythm.
Ink Primary ({colors.primary} — #292524): The primary action color — warm near-black pill. Used scarcely.
Ink Primary Active ({colors.primary-active} — #0c0a09): Press state.
Canvas ({colors.canvas} — #f5f5f5): Off-white page floor.
Canvas Soft ({colors.canvas-soft} — #fafafa): Lighter band for subtle alternating sections.
Canvas Deep ({colors.canvas-deep} — #0c0a09): Same as ink — used for the rare dark-mode hero (Agents page).
Surface Card ({colors.surface-card} — #ffffff): Pure white card.
Surface Strong ({colors.surface-strong} — #f0efed): Badges, voice-icon plates.
Surface Dark ({colors.surface-dark} — #0c0a09): Dark hero/CTA band canvas.
Surface Dark Elevated ({colors.surface-dark-elevated} — #1c1917): Cards on dark canvas.
Hairline ({colors.hairline} — #e7e5e4): Default 1px divider.
Hairline Soft ({colors.hairline-soft} — #f0efed): Lighter divider.
Hairline Strong ({colors.hairline-strong} — #d6d3d1): Stronger panel outline.
Ink ({colors.ink} — #0c0a09): Display, primary text.
Body ({colors.body} — #4e4e4e): Default running-text.
Body Strong ({colors.body-strong} — #292524): Same as primary — emphasis.
Muted ({colors.muted} — #777169): Sub-titles.
Muted Soft ({colors.muted-soft} — #a8a29e): Disabled text.
On Primary ({colors.on-primary} — #ffffff): White text on ink pill.
On Dark ({colors.on-dark} — #ffffff): White text on dark hero.
On Dark Soft ({colors.on-dark-soft} — #a8a29e): Muted off-white on dark.
Gradient Mint ({colors.gradient-mint} — #a7e5d3): Mint green orb.
Gradient Peach ({colors.gradient-peach} — #f4c5a8): Peach orb.
Gradient Lavender ({colors.gradient-lavender} — #c8b8e0): Lavender orb.
Gradient Sky ({colors.gradient-sky} — #a8c8e8): Sky-blue orb.
Gradient Rose ({colors.gradient-rose} — #e8b8c4): Rose orb.
These appear ONLY as soft radial-gradient atmospheric orbs inside {component.gradient-orb-card} and as background atmospheric blooms behind hero copy. Never as button fills, never as text colors.
Success ({colors.semantic-success} — #16a34a): Confirmation.
Error ({colors.semantic-error} — #dc2626): Validation errors.
Waldenburg Light is the licensed display serif at weight 300. Inter carries body, navigation, captions, and buttons. Fallback: 'Times New Roman', serif for Waldenburg, sans-serif for Inter.
Token Size Weight Line Height Letter Spacing Use {typography.display-mega} 64px 300 1.05 -1.92px Homepage hero h1 {typography.display-xl} 48px 300 1.08 -0.96px Subsidiary heroes {typography.display-lg} 36px 300 1.17 -0.36px Section heads {typography.display-md} 32px 300 1.13 -0.32px Sub-section heads {typography.display-sm} 24px 300 1.2 0 Card group titles {typography.title-md} 20px 500 1.35 0 Component titles — Inter {typography.title-sm} 18px 500 1.44 0.18px List labels {typography.body-md} 16px 400 1.5 0.16px Default body — Inter {typography.body-strong} 16px 500 1.5 0.16px Emphasized body {typography.body-sm} 15px 400 1.47 0.15px Footer body {typography.caption} 14px 400 1.5 0 Photo captions {typography.caption-uppercase} 12px 600 1.4 0.96px Section labels, badges {typography.button} 15px 500 1.0 0 CTA pill {typography.nav-link} 15px 500 1.4 0 Top-nav menu
Display weight stays at 300. Waldenburg Light is the editorial signature. Never bold display copy.
Subtle letter-spacing on body. Inter at +0.15-0.18px tracking — slightly looser than default Inter for a more editorial feel.
Negative letter-spacing on display. Waldenburg pulls -0.32px to -1.92px tighter on display sizes.
Waldenburg is licensed. Open-source substitute: EB Garamond at weight 300 (slightly more humanist) or GT Sectra (closer to Waldenburg's modernity). Use Inter directly for body — it's the same family ElevenLabs uses.
Base unit: 4px.
Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.md} 20px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px.
Section padding: 96px.
Max content width: ~1200px.
Editorial body: 12-column grid.
Feature card grids: 2-up at desktop for hero splits, 3-up for benefit g
proprietary
Source: https://github.com/VoltAgent/awesome-design-md?ref=explainx
4,600+ AI skills, agents & workflows. Install in 60 seconds. Part of the Torly.ai family.
© 2026 Torly.ai. All rights reserved.