# Elevenlabs Voice > Warm white design system for an AI voice platform. Ethereal weight-300 serif headings, warm-tinted shadows, translucent stone surfaces. Cormorant Garamond display + IBM Plex Sans body, atmospheric studio video hero, voice library cards with waveform animations. - Skill: `heyzgj/elevenlabs-voice` (Agent Skill) - Install (CLI): `npx skillmds@latest add heyzgj/elevenlabs-voice` - Raw SKILL.md: https://api.skillmd.com/api/skills/heyzgj/elevenlabs-voice/raw - Safety review: pending - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Design & Media - Author: heyzgj (https://skillmd.com/u/heyzgj) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/heyzgj/elevenlabs-voice --- # ElevenLabs Voice ## Identity AI voice platform — text-to-speech so real it is indistinguishable from a human recording. The design language is warm white with ethereal weight-300 serif headings, multi-layer warm-tinted shadows at sub-0.1 opacity, and translucent stone surfaces. Apple.com's premium restraint meets the intimate warmth of a professional recording studio. The palette is intentionally achromatic with warm undertones — no brand colors, no accents. Surfaces define themselves through the lightest possible touch. ## Product World - **Who**: Audiobook publishers managing catalogs of hundreds of titles. Game studios shipping RPGs with thousands of NPC voice lines. Content creators localizing YouTube videos into 30+ markets. Enterprise teams building voice agents for customer support. - **What**: AI voice platform — text-to-speech, voice cloning, dubbing, and conversational AI with human-indistinguishable quality. - **Vibe**: Apple.com warmth meets a premium recording studio — ethereal typography floats over warm stone surfaces, as if sound itself had a texture. - **Domain conventions**: Voice types (Narrative, Conversational, Dramatic, Whispery), MOS scores (mean opinion score, 1-5 scale), stability/expression sliders, character counts for usage, latency measured in sub-second, language counts (32+). ## Signature Moves 1. **Weight 300 serif headings at 64px** — where every other site uses bold, ElevenLabs uses ethereal lightness. Cormorant Garamond at 300 feels like sound waves rendered in type. 2. **Warm-tinted shadows** — `rgba(78,50,23,0.04)` instead of neutral black; shadows have color, creating tactile physicality. 3. **Inset half-pixel borders** — `0 0 0 0.5px inset` creates edges so subtle they are felt, not seen. 4. **Animated waveform bars** — CSS-only staggered span animations as ambient texture in hero and voice cards. 5. **Warm stone CTA block** — translucent `rgba(245,242,239,0.8)` surface with warm shadow. 6. **Pill-shaped everything** — 9999px radius on buttons, tags, interactive elements. 7. **Play button reveal** — voice card play buttons appear only on hover with warm stone background and upward slide. 8. **Positive letter-spacing on body** — +0.14px to +0.18px tracking on IBM Plex Sans for airy, unhurried reading. ## Hard Constraints - **Weight 300 only** for display headings — weight 400+ destroys the ethereal quality - **Shadows below 0.1 opacity** — visible shadows break the whisper-level depth - **Warm-tinted shadows** on featured elements — `rgba(78,50,23,...)` not `rgba(0,0,0,...)` - **No brand accent colors** — palette is achromatic with warm undertones only - **Pill radius (9999px)** on all interactive elements — fully rounded buttons always - **Card radius 20px minimum** — generous soft corners are structural to the warmth - **Positive letter-spacing** on body text (+0.14px to +0.18px) — never negative - **Video at 0.4 opacity max** with `saturate(0.7) brightness(0.6)` — atmospheric, never dominant ## Anti-Patterns - NOT a dark-mode developer tool — voice is warm and human, not terminal-green - NOT a music streaming service (Spotify vibes) — this is creation, not consumption - NOT a chatbot interface — the product IS the generated voice, not a conversation - NOT a tech demo with waveform SVG visualizations everywhere — CSS span bars only - NOT a podcast hosting platform — the focus is generation and cloning, not distribution - NOT aggressively colorful — the achromatic palette with warm undertones is the identity - NOT heavy elevation shadows — surfaces barely exist through whisper-level depth ## Section Archetypes - **Voice Library**: Grid of voice personality cards with inline waveform previews, play controls, and voice type labels - **Voice Studio**: Side-by-side recording studio photo + interactive interface mock (text input, voice selector, stability/expression sliders, generate button) - **Performance Metrics**: MOS score, language count, streaming latency in warm divided cells - **Application Showcase**: Use-case cards with studio photography - **Language Coverage**: Pill-shaped language tags in a flowing wrap layout - **Social Proof**: Italic serif testimonial from a domain professional - **Warm Stone CTA**: Translucent warm surface with ethereal heading and dark pill button ## Hero Archetype **Video-typography**. Recording studio video at 0.4 opacity on a warm-dark background (`oklch(0.12 0.01 52)`), with gradient overlays. Weight-300 serif heading in white. Why: voice is inherently temporal and atmospheric — a still image cannot convey what this product creates. ## Typography - **Cormorant Garamond** (display, weight 300): Thin serif strokes at large sizes feel like sound waves — delicate, precise, creating intrigue through restraint. Weight 300 is non-negotiable. - **IBM Plex Sans** (body, weights 300-500): Technical reliability with humanist warmth. Positive letter-spacing (+0.14px to +0.18px) creates an airy reading rhythm. ## Color Intentionally achromatic with warm undertones — no brand colors, no accents. - `#ffffff` — primary canvas - `#f5f2ef` — warm stone surface - `#f5f5f5` — light gray differentiation - `rgba(245, 242, 239, 0.8)` — warm stone translucent (CTA signature) - `#000000` — primary text, dark buttons - `#4e4e4e` — secondary text - `#777169` — muted warm gray - `rgba(78,50,23,0.04)` — warm shadow tint - Voice identity: muted OKLCH at chroma 0.06-0.12, each voice gets a distinct hue ## Supporting Files - `https://joincommons.cc/api/items/elevenlabs-voice/raw/design-language` — full visual system (shadows, typography scale, spacing, components) - `references/asset-direction.md` — photography and video sourcing guidance with verified starter assets - `https://joincommons.cc/api/items/elevenlabs-voice/raw/anti-patterns` — domain-specific traps across visual, structural, content, and UX categories - `assets/tokens.dtcg.json` — DTCG tokens with color, semantic (voice identity colors), and typography groups - `assets/exhibit.html` — reference implementation (self-contained HTML with video hero, voice cards, studio demo, metrics, use cases) - `assets/design-skill.json` — manifest with V4 fields ## Gotchas 1. Never use bold serif headings — weight 300 is the entire typographic identity 2. Shadows must be warm-tinted on featured elements — brown-warm, not neutral gray 3. The warm stone surface is translucent (0.8 opacity) — not solid 4. Video is atmospheric mood, not a product demo — 0.4 opacity, desaturated 5. Waveform bars are CSS spans, not SVG — use staggered animation-delay values 6. Voice personality colors stay muted — OKLCH chroma 0.06-0.12 only