dark · light · minimal · sans · spacious · structured
ElevenLabs
Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand.
By webdesignhot · elevenlabs.io
$ npx design-md add elevenlabs
Learn more about the CLI → Compare to…
Adidas Pure-black sport-utility, AdihausDIN/adidasFG uppercase, three-stripe geometry — the engineering canon for global sportswear. Adobe Creative-suite chrome — paper-white canvas, magenta-to-orange wordmark gradient, and Adobe Clean carrying every product grid. AgentKit Three swappable themes for AI agent products — editorial dark, daylight bright, fintech cool-blue. Airbnb Pure-white marketplace canvas with one Rausch coral and Cereal — generous photography, soft pills, modest type. Airtable White-canvas editorial workflow software with full-bleed coral and forest signature cards punctuating a near-black pill-CTA system. Alibaba Electric orange `#ff6a00` + dense merchant grids — the global B2B wholesale floor as a website. Amazon Smile-orange CTA, Amazon Ember sans, dense product grids — the canonical everything-store interface. Amazon Web Services Squid-ink navy with Smile-orange CTAs — the densest tile-portal on the cloud-platform internet. Anthropic Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay accent, magazine geometry. Apple White-canvas product theatre — SF Pro Text, 980px pill CTAs, and a single-blue accent system. Apple Music Pink-red gradient hero with album-grid kinesthetics — SF Pro precision, signature `#fa233b` brand pink, glassy dark canvas. Apple TV+ Pure-black cinematic theatre with SF Pro and ruthless minimalism — content as the only voice. Arc Browser-as-personality marketing — buttery cream canvas, Marlin Soft display, hand-tooled blue-and-coral palette. Are.na Bare grey-and-orange minimalism — a single Helvetica-class sans, hairline borders, and a stubborn refusal to optimise for engagement. Asana Approachable work management in soft purple — Asana Sans at modest weights with a rainbow accent palette and warm sky-tinted whitespace. Astro Cosmos navy canvas with violet-to-orange brand gradient — Mona Sans display, Inter body, Astro''s star-chart MPA framework dressed as an observatory dashboard. ASUS Republic of Gamers red `#cd0000` on black with bold sans — Taiwan engineering meets esports brutalism. Audi Vorsprung durch Technik on near-black — Audi Type sans, four-rings precision, and a near-monochrome canvas with `#bb0a30` reserved for sport. Auth0 Twilight-blue dark canvas with TWK Lausanne 300 display + Aeonik body — the original identity-platform aesthetic. Axiom Deep-navy observability with a cyan electric accent — Inter for body, JetBrains Mono for every event label, and a structural grid that reads as logs at planet scale. Axios Smart-brevity in chromatic form — blocky white canvas, Tiempos-flavored Atiza serif, signature `Why it matters:` time-bars and bullet-first prose. Base Coinbase-adjacent L2 minimalism — coinbaseSans on white, signature electric blue Baseten White canvas with Inter and a signature `#6c5ce7` purple — ML model deployment dressed in approachable workshop chrome. BBC News Signature BBC red (`#bb1919`), Reith Sans + Reith Serif, the global broadcaster authority typography of the world''s public-service news. Bear Off-white canvas, a custom bearsans display, a red bear icon, and tealish handwritten underlines — a Markdown notes app dressed as a Mac Pro magazine. beehiiv Aggressive black-on-yellow newsletter punch — heavy display sans, hyper-flat cards, and a `#ffd60a` highway-yellow that reads like a tabloid front page. Binance Trading-floor near-black with a single high-voltage Binance Yellow doing all the brand work — BinanceNova for type, BinancePlex for numbers. Bloomberg Iconic black-orange financial broadsheet — BWHaasHead headlines, AvenirNextPForBBG chrome, terminal-grade data density. Bluesky Sky-blue `#0085ff` on bright white with Inter sans — the AT-Protocol social network rendered as airy, federated, open. Blur Pure-black canvas, neon `#ff8700` orange voltage, and JetBrains-Mono-default everywhere — brutalist NFT trader terminal as competitive instrument. BMW Corporate-blue calm — BMW Type Next on a cream-tinted white, dark navy hero bands, and the M-stripe triplet in reserve. BMW M Performance black on M-blue/M-violet/M-red — the motorsport variant that turns BMW corporate into track-day theatre. Booking.com Deep-blue commerce engine — Bookin Sans on white, yellow CTA voltage, dense booking-funnel maximalism. Bose Pure black canvas, Helvetica restraint, and premium-audio confidence — sound presented as engineering art. Brex Cool grey-blue surfaces, magenta-to-purple-to-indigo gradient, Söhne 600 — fintech as fast, modern, slightly flashy. Bugatti French-engineered austerity — pure black canvas, three Bugatti typefaces, and full-bleed photography as the only voltage. Bun Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as a 1970s bakery sign. Cal.com Open-source calendly with one bold custom font — Cal Sans on a soft `#f4f4f4` paper canvas. Calm Signature `#0066ff` deep blue + Aktiv Grotesk + meditation-deep cool atmospheric calm. Capacities Cream-yellow canvas, Inter at 700 with a Crimson Pro serif fallback, and a yellow underline as page ornament — a PKM that thinks like a sketchbook. Cartesia Bright clinical white with a single deep-blue action — voice-AI presented as scientific instrument rather than consumer product. Cash App Electric `#00d54b` green on near-black, Cash Sans monospace-flavoured geometry, and p2p-money youth aesthetic. Character.AI Cool zinc canvas, custom atHauss sans, and dark pill CTAs — a roleplay social product dressed in TikTok-grade neutrality. Chevrolet Gold-cross American classic — Louis sans on white with a `#cd9834` bowtie, a `#003876` corporate blue, and Camaro/Corvette red drama in reserve. Claude.ai Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI assistant set in literary type. Clerk Geist + Suisse on near-black canvas with `#6c47ff` violet CTA — the drop-in-auth dev-tool aesthetic. ClickHouse Near-pure black canvas with electric yellow as the brand voltage — database performance dressed in voltmeter chrome. Cloudinary Media-API technical infrastructure in confident blue — Inter at modest weights with a deep navy-blue brand and a single chromatic accent for media moments. Cohere Stark white editorial canvas with deep green-black product bands and a CohereText/Unica77 type split. Coinbase Institutional-grade calm — pure white canvas, a single Coinbase Blue, and Coinbase Display set at weight 400 instead of 700. Composio Near-black canvas with deep-electric-blue voltage and a 2x2 terminal-mockup hero — agent infrastructure dressed as developer instrumentation. Corsair Yellow `#ffff00` lightning on black with Roboto — RGB-everything peripherals and PC components. Costco Warehouse blue + signature red, Helvetica utilitarian — bulk-buying signage translated to web. Coursera University-blue `#0056d2` on warm-white parchment with Source Sans — the canonical online-degree marketplace. Cursor Warm cream IDE-marketing — `#f7f7f4` canvas, `#26251e` ink, custom CursorGothic display, JetBrains Mono code, vivid orange accent. Datadog NationalWeb on white with the iconic `#632ca6` purple — observability dressed as an enterprise dashboard, structurally dense, chromatically restrained, multicolour where the data demands it. Deel A warm dark canvas with electric coral and orange accents — global payroll dressed as a confident product portrait. DeepSeek Deep-blue Chinese-tech minimalism — a research lab dressed in `#4d6bfe` and stark white space. Dell Pragmatic blue `#007db8` with custom Roboto-derivative — business-first PC commerce since the dorm room. Deno Inkwell black on warm white with the dinosaur mascot — TypeScript runtime as Eric Carle children's book. Descript Cream-pink canvas, a custom Brett display serif, and a wine-dark CTA — an AI video editor that ships like a magazine. Discord Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white pill CTAs. Disney+ Deep navy gradient streaming hall with custom Inspire display sans and the unmistakable Disney+ wordmark arc. DoorDash Signature red-orange CTA, custom DoorDash Sans, delivery-funnel commerce — the dominant on-demand local marketplace. Epic Games Pure-black canvas with custom Brutal Type / Heading Now display — Fortnite-saturated marketing meets PC-storefront merchandising. Ethereum Off-white canvas, ethereum-blue `#1c64f2` voltage, and Inter + serif duet — community-owned protocol as open documentation. Etsy Burnt-orange CTA, Graphik humanist sans, handcrafted-warmth aesthetic — the marketplace for makers and small batch. Excalidraw Literal hand-drawn whiteboard — wobbly SVG strokes, Virgil-style handwriting, and a deliberately primitive UI that turns digital sketching into nostalgia. Expedia Navy commerce + Mango yellow voltage — Expedia Sans, dense travel-funnel density with One Key loyalty colour-coding. Fantastical White paper, Effra geometric sans, full-round blue pills, and a rainbow of app-icon glass squares — a calendar app marketed like Apple''s Pro Apps. Ferrari Cinematic editorial in near-black — Rosso Corsa restraint, FerrariSans 500, and full-bleed cavallino photography. Figma Bright multi-color section bands with figmaSans display and figmaMono eyebrows — a marketing site that designs in scenes. Financial Times Salmon-pink page (`#fff1e5`) — the world''s most recognizable newspaper background, paired with Financier display + MetricWeb sans for global markets coverage. Fireworks AI Light canvas with Inter sans and a signature `#6720ff` purple-amber-orange spark — fast-inference platform dressed in speed-of-light kinetic chrome. Fly.io Mackinac display + Fragment Mono on a violet-saturated canvas — a PaaS that dresses like a small-press magazine. Ford American-truck heritage in corporate blue — Antenna sans, oval-script wordmark, and a deep `#003478` voltage that has carried the brand since 1927. Framer Black-on-white maximalism with electric gradient floods — Inter Display at heroic sizes, motion as a first-class material. Frontegg PP Neue Machina display + Neue Montreal body — plug-and-play user-management with deep-blue gravitas. Gemini (Google) Blue-into-violet gradient, Google Sans, soft Material 3 surfaces — Google''s house style applied to a chat interface. Ghost Warm-cream content CMS aesthetic — Inter for chrome, a soft serif for the writing surface, and a single confident green for action. GitHub Dark-canvas developer-platform marketing — Mona Sans variable headings, lime-green accent, near-black ground. GitHub Copilot Pure-white canvas, pure-black inverted CTAs, Mona Sans display — GitHub's editorial confidence applied to AI tooling. Grafana Dark observability canvas with the iconic `#f46800` orange — Inter for body, Roboto Mono everywhere a label hides, multi-colour chart palette ripped straight from a real dashboard. Granola White paper, a custom Quadrant book serif, and an olive-green CTA — an AI notepad that dresses like a stationery shop. Grubhub Friendly red-orange CTA, Sentinel display + Avenir body, dense delivery-app commerce — the long-running incumbent. HashiCorp Black canvas hosting a per-product color portfolio — Terraform purple, Vault yellow, Consul red, Waypoint cyan — multi-product identity made literal. Hashnode Developer publishing platform — deep navy canvas, electric blue brand, Inter sans + JetBrains Mono code chrome. HBO Max Deep purple-black premium streaming canvas with custom Sharp Grotesk and the unmistakable Max wordmark. Headspace Signature `#ffac1d` orange + custom round display + meditation-friendly playful warmth. Height AI-PM workspace dressed in chalk pastels — Inter at modest weights over a near-paper canvas, with a single confident accent and an AI-purple voltage moment. Honda Reliability-first restraint — HondaGlobalFont on white, signature red HP Cyan-blue `#0096d6` HP-circle on white with Forma DJR — the 84-year-old technology brand''s mainstream face. Hugging Face AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px tile cards. Hulu Near-black canvas anchored on Hulu Green `#1ce783` with Graphik sans — the bright, cable-meets-streaming UI. IBM Carbon Design System made literal — pure-white canvas, IBM Plex Sans at light 300, square corners, and one assertive `#0f62fe` blue. Ideogram A bright white canvas with a single saturated violet cue — a typography-first AI image tool that lets the gallery do all the talking. Instacart Grocery-shopping-list practical — Instacart Sans on white, signature carrot green Kagi A premium search engine dressed in warm cream and Plex — the indie answer to ad-funded search. KAYAK Burnt-orange flight-search density — Open Sans on white, comparison-engine maximalism, price-graph data viz. Khan Academy Signature `#14bf96` mint green on white with Lato sans — free-for-everyone education in a warm, encouraging register. Kinde White canvas with Inter 72/500 display + dev-friendly pink-coral accent — the approachable auth-billing-access platform. Kit A cream newsletter canvas with a custom KitSans display, a Libre Franklin secondary, and a pastel-rainbow chip set — the editorial register reborn from ConvertKit. Kraken Kraken Purple `#7132f5` on white — Kraken-Brand display + Kraken-Product UI for a calmer, less-bombastic crypto exchange. Krea A pure-black studio with Suisse Intl set quietly at 60px — a creative-AI gallery that lets the work and the cobalt CTA carry the colour. Lamborghini Cathedral of darkness — true black canvas, Lamborghini Gold accents, and LamboType angled-terminal display. LangChain Deep navy canvas with Inter precision and a quietly confident teal accent — agent orchestration dressed as engineering documentation. Linear Dark-canvas product surface — pure-black ground, indigo accent, custom Inter weights, pill CTAs. LiveKit Realtime audio-video infra — Public Sans 300 weight on near-black, signature cyan LlamaIndex White canvas with Inter and a signature `#1b9aff` blue — RAG infrastructure dressed as a clean technical reference card. Logitech Soft consumer-tech blue gradients with Brown sans — design for the way you work, play, and create. Lovable Pink-into-violet gradient on white — vibe-coding dressed in playful, friendly chromatics. Magic Eden Mint-cream canvas, magenta-mint accent duet, and a custom Foundry display — Solana-native marketplace as boutique gallery. Mailchimp Cavendish-yellow chunkiness — a custom display serif (Cooper Light), the signature `#ffe01b` block, and a brand voice that hugs you while it ships campaigns. Mastercard Cream-canvas editorial fintech, circular-portrait orbits, MarkForMC at 450 weight — institutional-but-warm payments brand. MasterClass Pure-black cinema with custom display serif and editorial reverence — celebrity-instructor learning as a premium streaming product. Medium Editorial reading-first publishing — magazine-grade serif body, GT Super display, signature green-on-white pill CTAs. Mercedes-Benz Three-pointed-star authority — MBCorpo on near-black canvas, silver-blue Mercury A near-pure white canvas with a literary serif headline and a signature mercury-mint accent — banking dressed as a quiet magazine. Meta Optimistic blue (#0467df) on a white corporate canvas — Optimistic Display headlines, generous space, social-platform conglomerate at rest. Microsoft Fluent surfaces — off-white canvas, Segoe UI Variable Display, and a Cortana-blue action color carrying every product. Midjourney A deep cosmic canvas where JetBrains Mono headlines float over a wide-gamut OKLCH rainbow — a research lab dressed as a chapel. MiniMax Stark monochrome canvas broken open by vibrant gradient product cards — coral, magenta, blue, purple as model identity. Mintlify Documentation-platform marketing — pure white canvas, mint-green accent, Inter at tight tracking, near-black pill CTAs. Miro Canary-yellow Mistral Butter-yellow canvas, Arial as a deliberate anti-tech statement, and zero-radius rectangles — French AI as a brutalist art-school manifesto. Modal Serverless GPU infra in lime-green — `#0c0c0c` canvas, electric `#7fee64` accent, custom Modal Mono on every chip and code block. Monday.com Project management in confident red-pink — Poppins display at bold weights with a colorful saturated palette and a playfully energetic visual rhythm. MongoDB Signature MongoDB green Motion AI-calendar productivity in green-and-purple — Inter at modest weights with a green-to-purple voltage gradient signaling the AI scheduler, anchored by a clean white canvas. MSI Dragon-red `#ff0000` on jet black with bold display sans — the Taipei dragon-heritage gaming hardware brand. Mux Video API for developers — Aeonik on light-cream, Rotonto display, JetBrainsMono CTAs, sharp 0px corners. Neon Serverless Postgres dressed in late-night green — a near-black canvas with a single electric mint accent. Netflix Pure-black streaming theatre with signature `#e50914` red and Netflix Sans — the canonical media-tile grid. Nike Pure black, pure white, Helvetica Now — pill CTAs and full-bleed athletic photography on a single soft cloud gray. Notion Off-white canvas with Lyon serif accents and a custom NotionInter — a workspace dressed as a literary magazine. Nuxt Forest-green `#00dc82` glow on a near-black canvas — Vue-flavored warmth dressed for the cosmos. NVIDIA Engineering-grade canvas — pure black hero / paper-white body / one violently saturated `#76b900` green that carries every CTA and corner square. Omnivore Open-source read-it-later — near-white reading canvas, focused emerald-on-paper brand, archival elegance after the Eleven Labs sunset. OpenAI Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the only action that matters — try ChatGPT. OpenRouter Pure-black canvas with custom display typography and pragmatic mono — LLM-router infrastructure dressed as a terminal billing dashboard. OpenSea Pure-black canvas, electric `#2081e2` blue, and Inter at trader-pro density — the original NFT marketplace as financial terminal. Optimism Pure-white canvas, signature `#ff0420` red voltage, and Inter at confident L2 register — Ethereum rollup as bold optimistic infrastructure. Ory White canvas with Inter 48/400 display + signature deep-navy `#0f172a` CTA — open-source-first identity for technical teams. Oura Pure-black canvas with Inter precision and gold-stamped scores — the premium-ring health-precision aesthetic. Paper Website A literal sheet-of-paper website — single literary serif, off-white sheet canvas, narrow reading columns, ink-blue links. PayPal Dual-blue corporate trust — PayPal Sans Big over white, with a deep-navy ink and a sky-blue counterpoint. Peloton Signature `#cb1e4e` red on midnight ink, Inter display, instructor-led premium-fitness storefront. Perplexity Cream paper canvas, custom pplxSans, and the unmistakable Tropic-cyan accent — a reference-library answer engine dressed in warm tones. Pinecone White canvas with Inter and a signature `#1cb0d0` cyan — vector database technical-marketing dressed in clean blueprint chrome. Plaid Pale blue trust on white, classical Stripe-adjacent type, and a Benjamin-Franklin-as-mascot moment of personality. Plain B2B support tool with a Dinamo grotesk and a single radioactive `#1ad379` action — Linear-restraint applied to support. PlanetScale Pure-black canvas, blood-red accent, mono-set numerals — a database brand styled like a financial terminal. Polar Dev-tool obsidian — 8rem editorial display headlines, indigo accents, Louize serif moments. Polygon Deep purple `#8247e5` voltage, soft surface ladder, and Inter at enterprise calm — Ethereum L2 as institutional infrastructure. Porsche Engineering-purity black-on-white — Porsche Next at 96px regular, Rosso PostHog Cream-canvas analytics with mustard-yellow CTAs and IBM Plex — open-source craft, not SaaS gloss. Postmark Postal-yellow #ffde00 + warm-black #1c1d1f + paper-white canvas — the transactional email API designed like a friendly post office sign. Prime Video Amazon-blue streaming canvas with Ember sans and the dense, utility-first marketplace UI vocabulary. PropelAuth White canvas with SF Pro Rounded display 60/900 + deep-navy ink — B2B multi-tenant auth with Apple-tinted polish. Qwik Electric purple-to-blue gradient on near-black — resumable execution dressed as a lightning bolt. Railway Ship software peacefully — IBM Plex Serif headlines on a deep eggplant canvas, with a single confident violet for action. Raindrop.io White paper, system-ui sans, soft watercolor blob backgrounds, and a vivid `#0b7ed0` blue CTA — a bookmark manager that ships like a creative-tool sketch. Ramp Off-yellow `#fcfb70` and black-on-white editorial — finance ops dressed as a printed annual report. Raycast Near-black canvas, glowing keycaps, monospaced shortcut chips — a marketing site that thinks like a launcher. Razer Neon `#44d62c` snake-green on jet black with Roboto — the For Gamers, By Gamers visual signature. Readwise Pastel-orange book-club warmth — soft cream canvas, friendly Tiempos serif accents, and a tangerine that signals 'this is your library.' Reddit Front-page-of-the-internet orange — community-card density, IBM Plex Sans display, and a confident Remix Signature `#3992ff` blue on pure white with Inter — a nested-routes web framework dressed as a manifesto poster. Render Lavender on white — a PaaS that swapped Heroku purple for a candy-bright #8a05ff and kept the airy whitespace. Replicate AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBrains Mono code, sharp 0px corners. Replit Saturated turquoise on `#0e1525` ink — the cloud-IDE aesthetic with IBM Plex DNA and a JetBrains Mono soul. Resend Pure-black canvas with Domaine Display serif at 96px and Commit Mono code chips — email infra that thinks in italics. Retool Pragmatic blue #3a55fc + Inter + dense product mocks — the internal-tool platform that designed itself like a well-organised admin panel. Reuters Global newswire restraint — signature orange (`#ff8000`), Knowledge Medium custom sans, broadsheet rigor for the world''s oldest news agency. Riot Games Crimson `#d13639` red on near-black with custom Riot Beam display — esports-tournament drama and competitive-MOBA editorial. Rive Chunky animated display type and saturated playful colour — interactive graphics platform that wears its motion design on its sleeve. Roblox Bright `#ed1d24` red on white with Builder Sans — the youth-block-builder playground turned multi-billion-game social platform. RunPod Deep slate canvas with Inter and a signature `#673ab7` purple — accessible GPU cloud dressed in friendly developer chrome. Runway A near-black research canvas with ABC Normal headlines pulled tight at -2.5px — a film studio, an ML lab, and a brutalist gallery in one shell. Salesforce Cloud-trust dashboards — Salesforce Sans on a sky-blue ground, with Astro the bear standing guard over a dense CRM portal. SAP Enterprise-ERP precision in cobalt — SAP72 sans, signal-blue accents, and a calm white canvas built for trust. Segment Twilio Segment's customer-data-platform canvas — Whitney SSm humanist sans, navy-on-white, single confident `#1866ee` blue. Semafor Paper-cream canvas (`#f8f5d7`) with FeatureFlatHeadline serif and signature flag-style topic columns — global-news editorial built for the post-Twitter era. SendGrid Functional API-blue on white — the email-platform dashboard aesthetic, now folded under the Twilio umbrella. Sentry Deep-aubergine observability — Dammit Sans display, Rubik body, JetBrains Mono code, signature violet #7553ff and pill CTAs. shadcn/ui Copy-paste components in pure black-on-white — the most influential design system not actually shipped as a library. Shopify Dark-first commerce theatre — 96px NeueHaasGrotesk at weight 330, electric mint focus rings, and stacked multi-layer shadows. Signal Privacy-first messaging in `#3a76f0` Signal blue with Inter sans — minimal, ad-free, end-to-end-encrypted by default. Slack Aubergine workspace marketing — Salesforce-Avant-Garde headlines, all-caps 4px CTAs, white canvas with `#4a154b` accents. SolidJS Deep navy with a blue-to-cyan brand gradient — reactive primitives dressed as a circuit diagram. Sonos Pure black canvas, Inter typography, and audio-system minimalism — speakers presented as gallery objects. SoundCloud Signature `#ff5500` orange on `#f2f2f2` paper with Interstate sans — waveform-first audio social UI. SpaceX Pure-black cinematic photography, D-DIN aerospace stencil type, ghost-button minimalism — the interface disappears. Spotify Electric `#1ed760` green on near-black canvas with Spotify Mix sans — the canonical streaming-audio tile grid. Square Pure black on pure white, Square Sans grids, and retail-POS minimalism — commerce as black-and-white geometry. Starbucks Forest-green storefront — SoDoSans, full-pill buttons, warm-cream canvas, and a floating Frap CTA the brand calls home. Steam Deep blue-gray `#1b2838` with Motiva Sans — the utilitarian PC-gaming library that runs the world's largest digital storefront. SteelSeries Esports orange `#ff6900` on near-black with Inter — Danish precision peripherals for competitive play. Strava Signature `#fc4c02` orange + Inter on white — endurance-athlete data-driven storefront with map-overlay heritage. Stripe Editorial fintech polish — light Söhne headlines at weight 300, navy-not-black text, signature `#533afd` purple CTAs. Stytch Paper-cream canvas with Booton display + Chivo Mono body — passwordless-modern auth, joined Twilio. Substack Magazine-on-the-internet — Spectral serif body at 19px, Cahuenga display, signature `#ff6719` orange CTAs. Suno A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas. Sunsama Thoughtful daily planning in warm cream and ink — Inter at modest weights over a paper-cream canvas with sage and rose accents and a calm, unhurried voice. Supabase Off-black canvas, signature emerald `#3ecf8e`, Circular as display, Postgres-grade type discipline. Superhuman White paper canvas, a custom Super Sans variable, and a single confident lavender — premium email dressed as a stationery brand. Supreme Box-logo red, Courier monospace, skate-deadpan minimalism — the most influential streetwear store on the web. Svelte Hot orange #ff3e00 against clean white with a confident sans — the framework that wears its flame as a wordmark. Tailwind CSS The system applied to itself — Inter Variable on white canvas, signature cyan #06b6d4, every component built from Tailwind utilities. Tana Pure black canvas, a custom tanaClassic serif at 83px, and a pale-pistachio CTA — a knowledge graph dressed as a literary supplement. Target Bullseye red CTA, Helvetica Neue, photographic hero — friendly mass-market design with confident chromatic restraint. Telegram Cloud-blue messaging — Tesla Cinematic showroom on white — one Electric Blue CTA, Universal Sans, and viewport-height car photography. The Atlantic Modern serif headlines on cream-paper, signature Atlantic orange `#fbb33b`, long-form magazine reading rendered for the web. The Economist Deep cinnabar red `#e3120b`, Milo serif body, Econ Sans labels — the global-affairs weekly rendered with cover-illustration discipline. The Guardian Guardian Egyptian slab serif, signature navy `#052962`, structured ruled hierarchy with bold section accents. The New York Times Cheltenham serif headlines on paper-white, signature breaking-news red, the canonical American broadsheet rendered for the web. The New Yorker Adobe Caslon Pro + Irvin headline cap — a century of editorial gravitas in cream paper, ink black, and signature cartoon line. The Washington Post Postoni serif blackletter masthead, "Democracy Dies in Darkness" tagline, sober ink-on-paper political broadsheet. Things Cool light-blue canvas, system-ui sans, vivid Things-blue accent — a task manager that ships like an Apple Pro Display. Threads Instagram-adjacent text-first social — pure-black canvas, system-sans clarity, and a quiet brand restraint built from the @ glyph alone. TikTok Electric cyan-magenta on pure black — vertical-video voltage with custom Proxima Nova display and a bold neon brand grammar. tldraw Casual whiteboard sketchy — hand-drawn UI primitives, dotted-grid canvas, and a soft pastel palette that wears its toy-like energy with confidence. Together AI Deep navy on near-white with Inter sans — open-source LLM cloud rendered as developer-platform infrastructure. Toyota Japanese-reliability mainstream — `#eb0a1e` Toyota red on white, ToyotaType sans, and a calm-confident marketing surface for the world's most-sold automotive brand. Turbo Vercel-grade pure-black canvas with a magenta-to-blue Turbo gradient — the build system that wears its speed as a sweep. Turso SQLite at the edge — a deep-teal canvas with a CRT-bright cyan accent (#00face) that reads as a glowing edge node. Twilio Signal-red `#f22f46` against clean white — communications APIs given the visual weight of a broadcast colour. Twitch Purple `#9146ff` on `#0e0e10` canvas with Inter — the live-streaming UI built around chat, raids, and gaming density. Uber Eats Pure-black ground, Uber Move custom sans, Uber-app continuity — the operating system of food delivery. Udemy Signature `#a435f0` purple on white with Sailec sans — the open course-marketplace bazaar made approachable. Uniqlo Signature red `#ff0000`, Helvetica Neue system stack, japanese-utility-functional grid — the LifeWear engine. v0 A near-white prompt canvas with GeistSans and pure OKLCH grayscale — Vercel''s AI builder dressed as the calmest text editor on the internet. Venmo A single confident `#3d95ce` blue, Aktiv Grotesk geometry, and a social-feed informality — payments dressed as group chat. Vercel Brutalist developer-product polish — near-white canvas, near-pure black-on-near-white type, Geist sans + mono, conic-gradient accents. Vite Electric purple #646cff + Manrope display + a literal lightning-bolt mark — the build tool that designed itself to feel as fast as it is. Vodafone Vodafone Red broadcast band, monumental 144px display, two-tier button system — corporate-newsroom telecom design. Volkswagen People's-car blue — the deep `#001e50` corporate hue, custom VW Sans, and a friendly-German marketing surface that sells everyday mobility with confidence. Walmart Spark-yellow on big-box blue, Antonio Display + Bogle sans — everyday low prices made loud. Warp Near-black canvas, neon-lime cursor, real terminal screenshots — a marketing site that boots like a shell. Weaviate White canvas with Inter and a signature `#1cdb46` open-source green — modular vector database dressed in approachable engineering chrome. webdesignhot AI-era editorial dark — pure black with one acid-lime accent. Webflow Indigo-to-purple gradient discipline with a precise structural sans — the visual builder that markets itself like a design conference. WHOOP Lime `#a0d10b` voltage on jet-black, Inter precision, recovery-data athlete-grade aesthetic. WIRED Newsstand-density editorial grid, sharp-corner buttons, mono ALL-CAPS kickers — Conde Nast meets engineering lab. Wise A flexible bright-lime green on cream-white — money that travels in sans-serif and a single confident accent. Workday HR-warm professional in tangerine — Adelle Sans humanist curves, signature `#f37721` orange, and a calm white people-first canvas. WorkOS Pure-white canvas with Untitled Sans 80/500 display + indigo-violet h2 — the B2B-enterprise gravitas aesthetic. X Pure-black canvas with Chirp display — algorithmic minimalism, single-letter wordmark, ruthless type discipline. Y Combinator Brutalist orange monolith — system-font sans on white canvas, signature `#f26625` orange-red blocks with hard 0px corners. You.com Crisp white developer-doc canvas, custom Lumen Sans, and the indigo `#5368EE` accent — a search API rebrand done as enterprise infrastructure. YouTube YouTube Sans + Roboto + signature `#ff0000` red — content-density at planetary scale. Zora Cream-white canvas, electric purple-orange duet, and a custom display — onchain creator network as zine cover.
try on →
theme
mobile · 390 × 844
Tokens design.md/v1.5
theme: light
- bg
#ffffff - bg-soft
#fafafa - bg-band
#f5f5f4 - surface
#ffffff - surface-soft
#fafafa - surface-hover
#f5f5f4 - text AAA · 19.8
#0a0a0a - text-strong
#000000 - text-display
#0a0a0a - text-muted
#525252 - text-soft
#737373 - text-faint — · 2.5
#a3a3a3 - text-on-brand
#0a0a0a - brand — · 1.5
#9fe870 - brand-hover
#8ad65e - brand-active
#76c349 - brand-soft
#d4f0c2 - brand-faint
#e2f6d5 - link
#0a0a0a - accent
#0e0f0c - accent-warm
#f5f5f4 - border
#0000001a - border-soft
#0000000d - border-strong
#00000033 - on-brand
#0a0a0a - success
#16a34a - success-bg
#dcfce7 - warning
#d97706 - warning-bg
#fef3c7 - danger
#dc2626 - danger-bg
#fee2e2 - info
#0a0a0a - info-bg
#f5f5f4
Ship faster than ever.
display-hero InterDisplay 128px w700 -0.04em
Ship faster than ever.
display-large InterDisplay 96px w700 -0.025em
Ship faster than ever.
display InterDisplay 80px w700 -0.025em
Ship faster than ever.
h1 InterDisplay 64px w700 -0.02em
Built for teams that ship.
h2 InterDisplay 48px w700 -0.018em
A complete kit
h3 InterDisplay 32px w600 -0.012em
The quick brown fox jumps over the lazy dog.
h4 InterDisplay 24px w600 -0.008em
The quick brown fox jumps over the lazy dog.
h5 InterDisplay 20px w600 -0.005em
The quick brown fox jumps over the lazy dog.
body-large Inter 18px w400 0
The quick brown fox jumps over the lazy dog.
h6 InterDisplay 16px w600 0
The quick brown fox jumps over the lazy dog.
body Inter 16px w400 0
The quick brown fox jumps over the lazy dog.
body-small Inter 14px w400 0
npx design-md add linear
code-inline "JetBrains Mono" 14px w400 0
npx design-md add linear
code "JetBrains Mono" 14px w400 0
OUR DESIGN SYSTEM
label Inter 13px w500 0
The quick brown fox jumps over the lazy dog.
voice-tag Inter 13px w500 0
OUR DESIGN SYSTEM
caption Inter 12px w500 0.02em
The quick brown fox jumps over the lazy dog.
micro "JetBrains Mono" 11px w500 0.04em
- step-0 1px
- step-1 2px
- step-2 4px
- step-3 6px
- step-4 8px
- step-5 12px
- step-6 16px
- step-7 20px
- step-8 24px
- step-9 32px
- step-10 40px
- step-11 48px
- step-12 64px
- step-13 80px
- step-14 96px
- step-15 120px
- step-16 160px
- none
0px - micro
2px - xs
4px - sm
6px - md
8px - lg
12px - card
16px - xl
20px - xxl
24px - pill
9999px
Text link →
Card preview
A complete kit — everything your product needs.
Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
New
Stable
v1.0
ElevenLabs' visual identity sits at the crossroads of voice-tech precision and editorial restraint. The studio surface is a near-black `#0a0a0a` ground that reads as a recording-studio interior — quiet, focused, and deliberately unbusy — paired with a paper-white `#ffffff` editorial surface for documentation and pricing. A single saturated lime (`#9fe870`) does triple duty as CTA fill, brand identifier, and audio-waveform highlight; the lime is the only saturated chromatic event in the system, and that restraint is the brand. Type is Inter at studio scale (Inter Display at 96–128px / 700 weight with `-2.4px` to `-3.6px` tracking) — a hard negative track that compresses the headline into a broadcast register. The pill-shaped CTA is the signature interaction primitive, and it inherits its shape from the audio-waveform pill chip used to label voice / speaker selections in the product. Where Anthropic chooses a warm cream-white ground and a quiet conversational register, ElevenLabs chooses a voice-studio-dark ground and a precision-engineering register — both AI brands, but tuned to different emotional ranges. The lime accent places ElevenLabs visually adjacent to Linear-era minimalism (single saturated accent over neutral canvas), but the studio-dark + editorial-light dual-mode is what makes the brand uniquely legible.
- Pill CTAs and the discipline of a single confident accent over a quiet neutral canvas.
- Single-brand-colour-as-action discipline; ElevenLabs replaces blue with lime but keeps the chromatic restraint.
- InterDisplay sets the headline tone — a tighter cut tuned for large-scale display use.
- Adjacent AI-brand reference; Anthropic chooses warm-cream restraint, ElevenLabs chooses studio-dark precision.
- Near-black ground discipline; studio-dark surface as serious-tool register.
Export
4 formats · paste-ready
Tailwind
theme.extend block for tailwind.config.js
CSS variables
:root { --bg, --text, --brand, … } you can paste anywhere
DTCG JSON
W3C Design Tokens Community Group format
Figma Variables
Importable into Figma → Variables → Import
---
name: ElevenLabs
tagline: Near-black voice-tech ground with white voice-wave aesthetic — Inter at studio scale, pill CTAs, and a single saturated accent that reads as both wayfinding and brand.
author: webdesignhot
source_url: https://elevenlabs.io
spec: design.md/v1.5
quality: curated
featured: true
categories: [ai, saas]
tags: [dark, light, minimal, sans, spacious, structured]
preview_swatch: ['#0a0a0a', '#ffffff', '#9fe870']
related: [anthropic, huggingface, replicate]
description: 'ElevenLabs sits at the intersection of voice-tech precision and editorial restraint — a near-black `#0a0a0a` ground for the studio surface paired with a paper-white `#ffffff` editorial surface, both anchored by a single saturated lime `#9fe870` accent that does triple duty as CTA, brand identifier, and audio-waveform highlight. Type is Inter at studio scale (Inter Display at 96px / 700 weight with `-2.4px` tracking) and the pill-shaped CTA is the brand''s signature interaction primitive. The dark studio aesthetic places ElevenLabs visually adjacent to Anthropic''s neutral-near-black register and Linear''s near-black canvas, but the lime accent is what makes the brand legible at a glance. The surface alternates between voice-studio-dark and editorial-light bands depending on context — the studio band is for product demos, the light band is for documentation and pricing.'
themes:
default: light
available: [light, dark]
switch-via: 'Marketing site default is editorial paper-white; the studio band (hero, features) inverts to near-black. App settings persist toggle in localStorage. The lime brand is invariant.'
colors:
light:
bg: '#ffffff' # paper-white editorial canvas
bg-soft: '#fafafa' # softest editorial surface
bg-band: '#f5f5f4' # mint or stone band tint
surface: '#ffffff' # default light card
surface-soft: '#fafafa' # secondary panel tint
surface-hover: '#f5f5f4' # hover state on light cards
text: '#0a0a0a' # near-black for editorial body
text-strong: '#000000' # display crisp black
text-display: '#0a0a0a'
text-muted: '#525252' # captions, meta
text-soft: '#737373' # tertiary
text-faint: '#a3a3a3' # disabled
text-on-brand: '#0a0a0a' # near-black on lime
brand: '#9fe870' # lime CTA — the saturated accent
brand-hover: '#8ad65e'
brand-active: '#76c349'
brand-soft: '#d4f0c2'
brand-faint: '#e2f6d5'
link: '#0a0a0a' # links underlined near-black on light
accent: '#0e0f0c'
accent-warm: '#f5f5f4'
border: '#0000001a' # 10% black hairline
border-soft: '#0000000d' # 5% black
border-strong: '#00000033' # 20% black
on-brand: '#0a0a0a'
success: '#16a34a'
success-bg: '#dcfce7'
warning: '#d97706'
warning-bg: '#fef3c7'
danger: '#dc2626'
danger-bg: '#fee2e2'
info: '#0a0a0a'
info-bg: '#f5f5f4'
dark:
bg: '#0a0a0a' # near-black studio ground
bg-soft: '#161616' # softest studio surface
bg-band: '#1f1f1f' # second-level studio band
surface: '#161616' # studio-band card surface
surface-soft: '#1f1f1f' # second-level studio surface
surface-hover: '#2a2a2a' # third-level / hover
text: '#ffffff' # white on studio ground
text-strong: '#ffffff'
text-display: '#ffffff'
text-muted: '#ffffffb3' # 70% white on studio
text-soft: '#ffffff80' # 50% white on studio
text-faint: '#ffffff4d' # 30% white
text-on-brand: '#0a0a0a'
brand: '#9fe870' # lime — invariant
brand-hover: '#b3ee85' # lifted lime on dark
brand-active: '#8ad65e'
brand-soft: 'rgba(159, 232, 112, 0.18)'
brand-faint: 'rgba(159, 232, 112, 0.10)'
link: '#9fe870' # links use brand on dark
accent: '#ffffff'
accent-warm: '#1f1f1f'
border: '#ffffff14' # 8% white hairline
border-soft: '#ffffff0a' # 4% white
border-strong: '#ffffff26' # 15% white
on-brand: '#0a0a0a'
success: '#22c55e' # lifted green for dark legibility
success-bg: 'rgba(34, 197, 94, 0.18)'
warning: '#fbbf24'
warning-bg: 'rgba(251, 191, 36, 0.18)'
danger: '#ef4444'
danger-bg: 'rgba(239, 68, 68, 0.18)'
info: '#ffffff'
info-bg: '#1f1f1f'
typography:
display:
family: 'InterDisplay, Inter, "InterVariable", -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif'
weights: [400, 500, 600, 700]
opentype-features: ['ss01', 'cv11', 'tnum']
body:
family: 'Inter, "InterVariable", -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif'
weights: [400, 500, 600]
opentype-features: ['kern', 'tnum']
mono:
family: '"JetBrains Mono", "IBM Plex Mono", Menlo, ui-monospace, "SF Mono", Monaco, Consolas, monospace'
weights: [400, 500]
scale:
display-hero: { size: 128, weight: 700, lineHeight: 0.95, tracking: '-0.04em', family: display, opentype: 'ss01' }
display-large: { size: 96, weight: 700, lineHeight: 1.0, tracking: '-0.025em', family: display, opentype: 'ss01' }
display: { size: 80, weight: 700, lineHeight: 1.0, tracking: '-0.025em', family: display, opentype: 'ss01' }
h1: { size: 64, weight: 700, lineHeight: 1.05, tracking: '-0.02em', family: display }
h2: { size: 48, weight: 700, lineHeight: 1.08, tracking: '-0.018em', family: display }
h3: { size: 32, weight: 600, lineHeight: 1.2, tracking: '-0.012em', family: display }
h4: { size: 24, weight: 600, lineHeight: 1.3, tracking: '-0.008em', family: display }
h5: { size: 20, weight: 600, lineHeight: 1.35, tracking: '-0.005em', family: display }
h6: { size: 16, weight: 600, lineHeight: 1.4, tracking: '0', family: display }
body-large: { size: 18, weight: 400, lineHeight: 1.55, tracking: '0', family: body }
body: { size: 16, weight: 400, lineHeight: 1.5, tracking: '0', family: body }
body-small: { size: 14, weight: 400, lineHeight: 1.45, tracking: '0', family: body }
label: { size: 13, weight: 500, lineHeight: 1.3, tracking: '0', family: body }
caption: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.02em', family: body }
micro: { size: 11, weight: 500, lineHeight: 1.3, tracking: '0.04em', family: mono }
code-inline: { size: 14, weight: 400, lineHeight: 1.4, tracking: '0', family: mono }
code: { size: 14, weight: 400, lineHeight: 1.5, tracking: '0', family: mono }
voice-tag: { size: 13, weight: 500, lineHeight: 1.2, tracking: '0', family: body }
radius:
none: 0
micro: 2
xs: 4
sm: 6
md: 8
lg: 12
card: 16
xl: 20
xxl: 24
pill: 9999
spacing:
base: 4
scale: [1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 120, 160]
layout:
page-width: 1280
prose-width: 720
header-height: 64
hero-padding-y: 120
section-padding-y: 96
card-padding: 32
components:
button-primary:
backgroundColor: brand
textColor: on-brand
radius: pill
padding: '14px 28px'
font: { family: body, weight: 600, size: 16 }
hover: { backgroundColor: brand-hover }
use: 'Lime pill — primary CTA across hero and pricing'
button-secondary:
backgroundColor: transparent
textColor: text
border: text
borderWidth: 1
radius: pill
padding: '14px 28px'
font: { family: body, weight: 500, size: 16 }
hover: { backgroundColor: bg-soft }
use: 'Outlined pill on light surfaces'
button-on-studio:
backgroundColor: on-studio
textColor: bg-studio
radius: pill
padding: '14px 28px'
font: { family: body, weight: 600, size: 16 }
hover: { backgroundColor: '#f0f0f0' }
use: 'White pill on studio ground'
button-ghost:
backgroundColor: transparent
textColor: text
radius: pill
padding: '12px 24px'
font: { family: body, weight: 500, size: 14 }
hover: { backgroundColor: surface-soft }
use: 'Tertiary inline action'
card-light:
backgroundColor: surface
border: border
radius: card
padding: 32
shadow: 'rgba(0,0,0,0.04) 0 1px 2px, rgba(0,0,0,0.03) 0 1px 4px'
use: 'Editorial card on light bands'
card-studio:
backgroundColor: surface-studio
textColor: on-studio
border: border-studio
radius: card
padding: 32
shadow: 'none'
use: 'Studio-band card; depth via tonal contrast'
voice-tag:
backgroundColor: surface-studio-2
textColor: on-studio
border: border-studio
radius: pill
padding: '6px 12px'
font: { family: body, weight: 500, size: 13 }
use: 'Voice / speaker chip with optional waveform glyph'
badge:
backgroundColor: brand-faint
textColor: text
radius: pill
padding: '4px 12px'
font: { family: body, weight: 500, size: 12 }
input:
backgroundColor: surface
border: border-strong
radius: lg
padding: '12px 16px'
font: { family: body, weight: 500, size: 16 }
focus: { border: brand, ring: '0 0 0 3px rgba(159,232,112,0.4)' }
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-decelerate: 'cubic-bezier(0, 0, 0.2, 1)'
ease-spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)'
duration-instant: 80
duration-fast: 150
duration-standard: 220
duration-slow: 320
duration-emphasized: 480
duration-waveform: 600
hover-lift: 'translateY(-1px)'
page-transition: 'opacity + slide 12px, 320ms emphasized'
reduced-motion: 'respects prefers-reduced-motion: reduce — collapses transforms and waveform animations to opacity-only at 100ms'
breakpoints:
mobile: 480
tablet: 768
desktop: 1024
wide: 1280
ultra: 1536
shadows:
none: 'none'
ambient: 'rgba(0,0,0,0.04) 0 1px 2px, rgba(0,0,0,0.03) 0 1px 4px'
raised: 'rgba(0,0,0,0.06) 0 4px 16px, rgba(0,0,0,0.04) 0 1px 4px'
popover: 'rgba(0,0,0,0.10) 0 12px 32px, rgba(0,0,0,0.05) 0 4px 8px'
studio-glow: '0 0 60px rgba(159,232,112,0.18)'
ring: '0 0 0 3px rgba(159,232,112,0.4)'
accessibility:
contrast-text-on-bg: 19.6 # AAA — near-black on white
contrast-text-on-brand: 14.2 # AAA — near-black on lime
contrast-text-on-studio: 19.4 # AAA — white on near-black
contrast-muted-on-bg: 7.8 # AAA at body
contrast-brand-on-studio: 13.2 # AAA — lime on near-black
focus-ring: '3px solid rgba(159,232,112,0.4) with 1px offset'
reduced-motion-honored: true
keyboard-trap-free: true
min-touch-target: 44
dark-mode: included
colors-dark:
bg: '#0a0a0a'
bg-soft: '#161616'
surface: '#161616'
surface-soft: '#1f1f1f'
surface-hover: '#2a2a2a'
surface-strong: '#333333'
text: '#ffffff'
text-muted: '#ffffffb3'
text-soft: '#ffffff80'
text-faint: '#ffffff4d'
brand: '#9fe870'
brand-hover: '#b1ed8a'
border: '#ffffff14'
border-strong: '#ffffff26'
on-brand: '#0a0a0a'
lineage:
summary: |
ElevenLabs' visual identity sits at the crossroads of voice-tech precision and
editorial restraint. The studio surface is a near-black `#0a0a0a` ground that
reads as a recording-studio interior — quiet, focused, and deliberately
unbusy — paired with a paper-white `#ffffff` editorial surface for documentation
and pricing. A single saturated lime (`#9fe870`) does triple duty as CTA fill,
brand identifier, and audio-waveform highlight; the lime is the only saturated
chromatic event in the system, and that restraint is the brand. Type is Inter
at studio scale (Inter Display at 96–128px / 700 weight with `-2.4px` to
`-3.6px` tracking) — a hard negative track that compresses the headline into a
broadcast register. The pill-shaped CTA is the signature interaction primitive,
and it inherits its shape from the audio-waveform pill chip used to label
voice / speaker selections in the product. Where Anthropic chooses a warm
cream-white ground and a quiet conversational register, ElevenLabs chooses a
voice-studio-dark ground and a precision-engineering register — both AI brands,
but tuned to different emotional ranges. The lime accent places ElevenLabs
visually adjacent to Linear-era minimalism (single saturated accent over neutral
canvas), but the studio-dark + editorial-light dual-mode is what makes the
brand uniquely legible.
influences:
- name: Linear
role: Pill CTAs and the discipline of a single confident accent over a quiet neutral canvas.
url: https://linear.app
- name: Stripe
role: Single-brand-colour-as-action discipline; ElevenLabs replaces blue with lime but keeps the chromatic restraint.
url: https://stripe.com
- name: Inter / Rasmus Andersson
role: InterDisplay sets the headline tone — a tighter cut tuned for large-scale display use.
url: https://rsms.me/inter
- name: Anthropic
role: Adjacent AI-brand reference; Anthropic chooses warm-cream restraint, ElevenLabs chooses studio-dark precision.
url: https://www.anthropic.com
- name: Vercel
role: Near-black ground discipline; studio-dark surface as serious-tool register.
url: https://vercel.com
---
## 1. Visual Theme & Atmosphere
ElevenLabs' marketing surface is built around a duet of moods. The studio band is a near-black `#0a0a0a` ground that reads as a recording-studio interior — quiet, focused, voice-wave aesthetic. The editorial band is a paper-white `#ffffff` canvas for documentation, pricing, and feature copy. A single saturated lime (`#9fe870`) does triple duty as CTA fill, brand identifier, and audio-waveform highlight. The system is voice-precision-tool dressed in editorial-restraint clothing.
Display type lives at studio scale — Inter Display at 96–128px with 700 weight and `-2.4px` to `-3.6px` letter-spacing (`-0.025em` to `-0.04em`). That hard negative tracking is where the marketing voice lives; it compresses what would otherwise be a competent SaaS hero into a broadcast register that signals "this is a product about precision". The lime accent is the only saturated chromatic event in the system, and the discipline of holding to one accent is what gives the brand its instant legibility against the otherwise sea of grayscale AI landing pages.
The pill-shaped CTA is the brand's signature interaction primitive. Every primary action — "Sign up", "Try it free", "Get the API" — appears as a fully-rounded `9999px` pill, and the pill shape is inherited from the audio-waveform chip used to label voices in the product. This is unusually direct product-to-marketing inheritance: the chip you use to select a voice in the studio is the same shape as the button you use to sign up. The result is a marketing surface that visually "knows" what the product does.
The atmosphere on the studio band is intentional quiet. Cards on `#0a0a0a` ground use `1px solid rgba(255,255,255,0.08)` ring instead of drop shadows; depth comes from tonal contrast (`#0a0a0a` → `#161616` → `#1f1f1f`) rather than elevation. The rare studio-glow (`0 0 60px rgba(159,232,112,0.18)`) appears only around the audio-demo widget, and reads as the lime accent literally lighting up a moment of voice generation. On the light editorial band, depth shifts to a soft two-layer shadow and 10% black hairlines — closer to Vercel or Stripe's playbook.
Where Notion oscillates light-and-dark for editorial pacing and beehiiv cycles yellow-and-black for impact pacing, ElevenLabs alternates studio-dark-and-editorial-light for *contextual* pacing. The studio band is for product demos and voice-generation showcases (where the dark precision register is the right voice); the editorial band is for documentation, pricing, and rationale (where the paper-white register is the right voice). The two surfaces are almost two different design systems unified by the lime accent, the Inter type system, and the pill CTA.
**Key Characteristics**
- Dual-surface system: near-black `#0a0a0a` studio ground + paper-white `#ffffff` editorial canvas
- Single saturated lime `#9fe870` accent — CTA, brand, audio-waveform highlight in one
- Pill-shaped CTA at full `9999px` radius — inherited from the in-product voice-tag chip
- Inter / InterDisplay at studio scale: 96–128px / 700 weight / `-0.025em` to `-0.04em` tracking
- Rare studio-glow effect around demo widgets — the lime literally lighting up a moment
- Tonal-contrast depth on studio surface; soft two-layer shadows on editorial surface
- Voice-tag chip primitive: lime / white / dark variants with optional waveform glyph
- 16px card radius, 12px input radius, full pill for CTAs and tags
- 96–120px section padding for the precision-tool breath
- No serif, no rounded sans, no humanist warmth — Inter does the structural work alone
## 2. Color Palette & Roles
### Primary
- **bg** (`#ffffff`): paper-white editorial canvas; documentation, pricing, content sections.
- **bg-studio** (`#0a0a0a`): near-black studio ground; product demos, voice-generation showcases.
- **text** (`#0a0a0a`): near-black for editorial body; matches the studio ground colour for visual unity.
- **brand** (`#9fe870`): lime CTA — the saturated accent that appears across both surfaces.
### Brand & Dark
- **bg-soft** (`#fafafa`): softest editorial surface for nested panels.
- **surface-studio** (`#161616`): studio-band card surface, one tonal step lighter than ground.
- **surface-studio-2** (`#1f1f1f`): second-level studio surface for emphasis blocks.
- **surface-studio-3** (`#2a2a2a`): rare third-level studio surface.
- **brand-hover** (`#8ad65e`): lime a half-step darker for pressed state.
- **brand-active** (`#76c349`): deepest pressed lime.
- **brand-soft** (`#d4f0c2`): softest lime tint for selection backgrounds.
- **brand-faint** (`#e2f6d5`): near-white lime tint for surfaces and badge fills.
### Accent
The system is intentionally lime + neutrals (light + studio-dark). There is no third accent.
- **accent-warm** (`#f5f5f4`): warm stone tint, used as a subtle band-tint between editorial sections.
- **accent** (`#0e0f0c`): rare near-black accent for emphasis; effectively interchangeable with `text`.
### Interactive
- **link**: on light bands, links are `#0a0a0a` underlined; on studio bands, links are `#9fe870` with no underline.
- **selected**: `brand-soft` (`#d4f0c2`) on light, `surface-studio-3` on studio.
- **disabled**: `text-faint` (`#a3a3a3`) on `surface-soft`.
### Neutral Scale
- **text-strong** (`#000000`): display copy when extra punch is needed (rare; H1 typically uses `text` near-black).
- **text-muted** (`#525252`): captions, meta, secondary copy.
- **text-soft** (`#737373`): tertiary text — timestamps, micro-copy.
- **text-faint** (`#a3a3a3`): disabled labels, decorative.
- **text-on-studio** (`#ffffff`): white text on studio ground.
- **text-on-studio-muted** (`#ffffffb3`): 70% white for studio captions.
- **text-on-studio-soft** (`#ffffff80`): 50% white for tertiary studio text.
### Surface & Borders
- **surface** (`#ffffff`): default light card.
- **surface-soft** (`#fafafa`): secondary panel tint.
- **surface-hover** (`#f5f5f4`): hover state on light cards.
- **border** (`#0000001a`): 10% black hairline (light surface).
- **border-strong** (`#00000033`): 20% black for emphasis on light.
- **border-soft** (`#0000000d`): 5% black for subtle dividers.
- **border-studio** (`#ffffff14`): 8% white hairline (studio surface).
- **border-studio-strong** (`#ffffff26`): 15% white for emphasis on studio.
### Shadow Colors
- **ambient**: two-layer (`rgba(0,0,0,0.04) 0 1px 2px, rgba(0,0,0,0.03) 0 1px 4px`) — subtle resting shadow on light cards.
- **raised**: deeper two-layer for floating panels.
- **popover**: deepest, for menus and tooltips.
- **studio-glow** (`0 0 60px rgba(159,232,112,0.18)`): the lime-tinted glow effect, used only around the audio-demo widget on the studio band.
- **none**: studio-band cards use no shadow; depth is tonal.
### Semantic
- **success** (`#16a34a`) on **success-bg** (`#dcfce7`): editorial green.
- **warning** (`#d97706`) on **warning-bg** (`#fef3c7`): warm amber.
- **danger** (`#dc2626`) on **danger-bg** (`#fee2e2`): restrained red.
- **info** (`#0a0a0a`) on **info-bg** (`#f5f5f4`): info reuses near-black; no info-blue.
## 3. Typography Rules
### Font Family
- **Display**: InterDisplay → Inter → InterVariable → -apple-system → system-ui → Segoe UI → Helvetica → Arial → sans-serif.
- **Body**: Inter → InterVariable → -apple-system → system-ui → Segoe UI → Helvetica → Arial → sans-serif.
- **Mono companion**: JetBrains Mono → IBM Plex Mono → Menlo → ui-monospace → SF Mono → Monaco → Consolas → monospace.
- **OpenType features**: `ss01` (curved-tail Inter alternates) and `cv11` (curved letters) on display; `tnum` (tabular numerals) on data and pricing.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | InterDisplay | 128 | 700 | 0.95 | -0.04em | ss01 | reserved for the boldest marketing |
| display-large | InterDisplay | 96 | 700 | 1.0 | -0.025em | ss01 | the canonical hero — `-2.4px` track |
| display | InterDisplay | 80 | 700 | 1.0 | -0.025em | ss01 | secondary heroes |
| h1 | InterDisplay | 64 | 700 | 1.05 | -0.02em | — | section heads |
| h2 | InterDisplay | 48 | 700 | 1.08 | -0.018em | — | feature-band heads |
| h3 | InterDisplay | 32 | 600 | 1.2 | -0.012em | — | sub-feature heads |
| h4 | InterDisplay | 24 | 600 | 1.3 | -0.008em | — | card heads |
| h5 | InterDisplay | 20 | 600 | 1.35 | -0.005em | — | inline emphasis |
| h6 | InterDisplay | 16 | 600 | 1.4 | 0 | — | label-grade heads |
| body-large | Inter | 18 | 400 | 1.55 | 0 | kern | hero subheads |
| body | Inter | 16 | 400 | 1.5 | 0 | kern | default reading |
| body-small | Inter | 14 | 400 | 1.45 | 0 | kern | secondary copy |
| label | Inter | 13 | 500 | 1.3 | 0 | — | category cues |
| caption | Inter | 12 | 500 | 1.4 | 0.02em | — | image / chart caption |
| micro | JetBrains Mono | 11 | 500 | 1.3 | 0.04em | — | smallest type, mono labels |
| code-inline | JetBrains Mono | 14 | 400 | 1.4 | 0 | — | inline code |
| code | JetBrains Mono | 14 | 400 | 1.5 | 0 | — | code block |
| voice-tag | Inter | 13 | 500 | 1.2 | 0 | — | voice / speaker chip label |
### Principles
- **Negative tracking is the broadcast voice**: at hero sizes the track tightens to `-0.025em` to `-0.04em`. That compression is what carries the precision-engineering register. Without it, InterDisplay at 700 reads as competent SaaS rather than studio-grade.
- **Two-mode OpenType discipline**: display copy uses `ss01` for the curved-tail Inter alternates (a slightly more humanist, friendly feel against the otherwise architectural face); tabular numerals (`tnum`) appear on every data surface — pricing, dashboards, voice-count callouts.
- **Inter Display vs Inter the body face**: the system uses Inter Display for headlines and Inter for body. Inter Display is a tighter, more architectural cut tuned for large-scale display use; Inter is the workhorse for paragraph-scale reading. The split signals "we know the difference between display and reading scale".
- **No serif, no humanist warmth**: voice-tech leans technical, not editorial. The mono family appears only in code samples and inline API references, drawn from JetBrains Mono first with system fallbacks.
- **Mono for micro**: the smallest type in the system (11px micro labels) switches to JetBrains Mono with positive tracking — a typographic cue that signals "this is technical metadata, not body copy".
- **The body face stays at 400 weight**: ElevenLabs resists the temptation to bold the body. 500 is the maximum for body-class type; 600 appears only at H4 and above.
## 4. Component Stylings
### Buttons
**Primary (lime pill)**
- Background: `#9fe870`. Text: `#0a0a0a` at Inter 600 / 16px. Padding: `14px 28px`. Radius: 9999px. Border: none.
- Hover: background → `#8ad65e`, no transform. Active: background → `#76c349`.
- Use: every primary CTA — Try it free, Sign up, Get the API.
**Secondary (outlined pill)**
- Background: transparent. Text: `#0a0a0a` at Inter 500 / 16px. Padding: `14px 28px`. Radius: 9999px. Border: `1px solid #0a0a0a`.
- Hover: background → `#fafafa`. Use: secondary action paired with lime primary.
**On-studio (white pill)**
- Background: `#ffffff`. Text: `#0a0a0a` at Inter 600 / 16px. Padding: `14px 28px`. Radius: 9999px.
- Hover: background → `#f0f0f0`. Use: secondary action inside the studio band when the lime CTA isn't appropriate.
**Ghost (text-style)**
- Background: transparent. Text: `#0a0a0a` at Inter 500 / 14px. Padding: `12px 24px`. Radius: 9999px.
- Hover: background → `#fafafa`. Use: nav links, tertiary inline action.
### Cards
**Editorial (light)**
- Background: `#ffffff`. Border: `1px solid #0000001a`. Radius: 16px. Padding: 32px.
- Shadow: `rgba(0,0,0,0.04) 0 1px 2px, rgba(0,0,0,0.03) 0 1px 4px`.
- Hover: shadow intensifies to `raised`; transform → `translateY(-1px)`.
- Use: feature cards on the editorial band — pricing, documentation, content blocks.
**Studio**
- Background: `#161616`. Text: `#ffffff` at Inter 500 / 16px. Border: `1px solid #ffffff14`. Radius: 16px. Padding: 32px. No shadow.
- Use: feature cards on the studio band — voice demos, audio waveform displays.
### Voice-tag Chip
The signature primitive of the design system.
**Studio variant**
- Background: `#1f1f1f`. Text: `#ffffff` at Inter 500 / 13px. Border: `1px solid #ffffff14`. Radius: 9999px. Padding: `6px 12px`.
- Often paired with a small SVG waveform glyph at the left.
- Use: voice / speaker selection chips; the brand's most recognisable component.
**Lime variant**
- Background: `#9fe870`. Text: `#0a0a0a` at Inter 500 / 13px. Radius: 9999px. Padding: `6px 12px`.
- Use: selected voice / active state.
**Light variant**
- Background: `#f5f5f4`. Text: `#0a0a0a` at Inter 500 / 13px. Radius: 9999px. Padding: `6px 12px`.
- Use: voice tag on the editorial band.
### Badges, Tags, Pills
**Status badge**
- Background: `#e2f6d5`. Text: `#0a0a0a` at Inter 500 / 12px. Padding: `4px 12px`. Radius: 9999px.
- Use: "New", "Beta", inline status.
**Mono micro tag**
- Background: `#f5f5f4`. Text: `#525252` at JetBrains Mono 500 / 11px tracked `+0.04em` uppercase. Padding: `2px 8px`. Radius: 9999px.
- Use: API version tags, model identifiers.
### Inputs / Forms
**Text input**
- Background: `#ffffff`. Border: `1px solid #00000033`. Radius: 12px. Padding: `12px 16px`. Font: Inter 500 / 16px.
- Focus: border → `#9fe870`, ring `0 0 0 3px rgba(159,232,112,0.4)`.
**On-studio input**
- Background: `#161616`. Border: `1px solid #ffffff26`. Radius: 12px. Padding: `12px 16px`. Font: Inter 500 / 16px in `#ffffff`.
- Focus: border → `#9fe870`, ring `0 0 0 3px rgba(159,232,112,0.4)`.
### Navigation
**Top bar**
- Background: `#ffffff` with no bottom border (edge defined by content gap). Height: 64px.
- Logo: ElevenLabs wordmark in Inter 700 / 18px in `#0a0a0a`.
- Nav items: Inter 500 / 14px, colour `#0a0a0a`, hover background → `#fafafa`.
- Primary lime pill CTA always visible at top right.
### Tooltips, Toasts, Modals
- **Tooltip**: background `#0a0a0a`, text `#ffffff` at Inter 500 / 12px, radius 8px, padding `6px 12px`. Shadow: `popover`.
- **Toast**: background `#ffffff`, border `1px solid #0000001a`, radius 16px, shadow `popover`. On studio band: `#161616` background with `1px solid #ffffff14` border.
- **Modal**: background `#ffffff`, radius 24px, shadow `popover`, backdrop `rgba(0,0,0,0.6)`, padding 32px.
## 5. Layout Principles
### Spacing System
Base unit: 4px. Scale: `[1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 120, 160]` × 4px. The system uses moderate-to-generous intervals — 24px gutters, 48–64px between feature blocks, 96–120px between major bands. The breath is precision-tool generous: airier than tldraw, tighter than Linear's most aggressive sections.
### Grid & Container
- **Page width**: 1280px max, centred.
- **Prose width**: 720px for documentation and editorial.
- **Hero treatment**: hero copy claims roughly 800–900px horizontal real estate with large negative-space gutters that let the lime CTA breathe. Voice-demo widget often sits centered below the hero copy.
- **Feature grid**: 3-column at 1024px+, 2-column at 768–1024px, 1-column below 768px. Card gap: 24–32px.
### Whitespace Philosophy
The grid is generous and centered. Hero blocks claim roughly 800–900px of horizontal real estate and large negative-space gutters that let the lime CTA breathe. The page exhales between bands — 96–120px section padding — and the studio-band sections feel even more spacious because the tonal contrast on `#0a0a0a` reads as deeper space.
### Section Cadence
The signature cadence is studio-dark-and-editorial-light alternation. Pattern: `editorial-light hero → studio-dark voice-demo band → editorial-light feature → editorial-light pricing → studio-dark testimonial → editorial-light footer`. The studio bands appear at moments that need product-demo precision; the editorial bands carry rationale, pricing, and content. Transitions are abrupt (no gradient between bands), and each band carries its own internal rules (light shadows on editorial, tonal-contrast depth on studio).
## 6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| none | 0px | rare; full-bleed images |
| micro | 2px | inline indicators |
| xs | 4px | tight UI primitives |
| sm | 6px | small inline pills |
| md | 8px | tooltips, small popovers |
| lg | 12px | input fields |
| card | 16px | the canonical card radius |
| xl | 20px | larger feature cards |
| xxl | 24px | modals, hero shells |
| pill | 9999px | the canonical CTA pill, voice-tag chips, badges |
Pill is the defining radius. CTAs, badges, voice-tag chips, status pills all share the 9999px radius, and that consistency is what makes the brand legible at a glance. Cards step down to 16px, inputs to 12px. The pill / 16-card / 12-input ladder is the brand's signature ratio.
## 7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | flat, on `#ffffff` or `#0a0a0a` | body content, default surfaces |
| 1 (light) | `1px hairline #0000001a` + ambient shadow | editorial card |
| 1 (studio) | `1px hairline #ffffff14`, no shadow | studio card; tonal contrast carries depth |
| 2 (light) | `raised` two-layer shadow | hovered or floating editorial card |
| 2 (studio) | `surface-studio-2` (lift to `#1f1f1f`) | hovered studio card |
| 3 | `studio-glow` (lime-tinted) | audio-demo widget on studio band |
| 4 | `popover` shadow | tooltip, dropdown, menu |
| 5 | `popover` + backdrop, 24px radius | modal, lightbox |
**Shadow Philosophy**: ElevenLabs uses two distinct elevation strategies based on surface. On the editorial band, depth is soft two-layer ambient shadows in neutral grey — closer to Vercel or Stripe's playbook. On the studio band, depth is tonal contrast (`#0a0a0a` → `#161616` → `#1f1f1f`) without drop shadows. The rare studio-glow (`0 0 60px rgba(159,232,112,0.18)`) appears only around the audio-demo widget — the lime literally lighting up a moment of voice generation. This dual-strategy is part of what makes the brand legible at a glance.
## 8. Interaction & Motion
### Easing
- **standard**: `cubic-bezier(0.4, 0, 0.2, 1)` — workhorse Material-style ease.
- **emphasized**: `cubic-bezier(0.2, 0, 0, 1)` — slower acceleration, faster deceleration; used for hero entrance, modal open, and band transitions.
- **decelerate**: `cubic-bezier(0, 0, 0.2, 1)` — used for elements entering from off-canvas.
- **spring**: `cubic-bezier(0.34, 1.56, 0.64, 1)` — slight overshoot used very sparingly on the audio-waveform animation.
### Durations
- **instant** (80ms): hover background colour shifts.
- **fast** (150ms): button hover, link underline.
- **standard** (220ms): primary CTA press, dropdown open.
- **slow** (320ms): modal open, page band transition.
- **emphasized** (480ms): hero entrance choreography.
- **waveform** (600ms): audio-waveform pulse animation cycle.
### Per-component micro-states
- **Lime pill hover**: background colour shift over 150ms with `standard` ease; no transform, no scale.
- **Editorial card hover**: shadow intensifies from `ambient` to `raised`, transform → `translateY(-1px)` over 150ms.
- **Studio card hover**: surface lifts from `#161616` to `#1f1f1f` over 150ms; no transform.
- **Voice-tag chip hover**: background tints up one tier; small lime dot appears at left if not already selected.
- **Audio-demo widget**: lime-tinted glow fades in at 320ms when audio is playing; waveform animates with 600ms `spring` ease cycling.
- **Input focus**: lime ring fades in at 100ms; border colour shifts to lime simultaneously.
### Page transitions
ElevenLabs uses opacity + 12px vertical slide at 320ms with `emphasized` ease for route transitions — a slightly more deliberate transition than the standard SaaS opacity-only fade, which signals precision-craft rather than generic-marketing.
### Reduced-motion strategy
`prefers-reduced-motion: reduce` is fully respected: all transform-based animations collapse to opacity-only at 100ms. The studio-glow effect persists (it is not motion). The audio-waveform pulse becomes static at the played-state. Hover lifts disappear. Page transitions become opacity-only fades.
## 9. Accessibility & A11y
### Contrast pairs (computed)
- **text on bg**: `#0a0a0a` on `#ffffff` → 19.6:1 (AAA at all sizes).
- **text-muted on bg**: `#525252` on `#ffffff` → 7.8:1 (AAA at body sizes).
- **on-brand on brand**: `#0a0a0a` on `#9fe870` → 14.2:1 (AAA at all sizes).
- **text-on-studio on bg-studio**: `#ffffff` on `#0a0a0a` → 19.4:1 (AAA at all sizes).
- **brand on bg-studio**: `#9fe870` on `#0a0a0a` → 13.2:1 (AAA at all sizes).
- **text-on-studio-muted on bg-studio**: `#ffffffb3` on `#0a0a0a` → 13.5:1 (AAA).
### Focus indicators
- **Default focus ring**: `3px solid rgba(159,232,112,0.4)` with 1px offset; lime ring is visible on every neutral surface.
- **On lime surfaces**: ring shifts to `3px solid rgba(10,10,10,0.4)` (near-black ring on lime).
- **On studio surfaces**: ring uses `3px solid rgba(159,232,112,0.5)` (slightly brighter lime for sufficient visibility).
Focus rings are never removed.
### ARIA patterns
- Voice-tag chips use `role="radio"` within `role="radiogroup"` for voice selection.
- Audio-demo widget uses `role="region"` with `aria-label="Voice demonstration"` and standard audio element semantics.
- Modals use `role="dialog"`, `aria-modal="true"`, focus trap, `Esc` to close.
- Combobox in voice search uses `role="combobox"` with `aria-expanded`, `aria-controls`, `aria-activedescendant`.
### Keyboard nav order
Top bar → hero CTA → studio voice-demo (with full keyboard semantics) → editorial feature bands → pricing → footer. `Tab` order matches visual order. Skip-to-content link visible on focus.
### Screen reader hints
- Decorative waveform glyphs carry `aria-hidden="true"`.
- Voice-tag chips carry `aria-label="Select [voice name]"`.
- Audio-demo carries `aria-live="polite"` updates when generation completes.
- Icon-only buttons carry `aria-label`.
### Reduced motion
Honored throughout — see §8.
## 10. Responsive Behavior
### Breakpoints
| Tier | Width | Behavior |
|---|---|---|
| mobile | < 480px | single column, 16px gutter, 64px section padding, hero at 48–56px |
| tablet | 480–768px | single column, 24px gutter, 80px section padding, hero at 64–72px |
| desktop | 768–1024px | 2-column feature grids, 32px gutter, 96px section padding |
| wide | 1024–1280px | 3-column feature grids, 32px gutter, 120px section padding |
| ultra | 1280px+ | container caps at 1280px, hero at full 96–128px |
### Touch Targets
Minimum 44×44px on touch devices. The 14px / 28px button padding clears the threshold. Voice-tag chips on mobile expand to `8px 16px` padding for thumb-friendly tap area.
### Collapsing strategy
- **Top nav**: hamburger menu < 768px; primary lime CTA stays visible at top right.
- **Hero**: voice-demo widget moves below copy < 768px; copy claims full width.
- **Feature grid**: 3 → 2 → 1 columns at 1024 / 768 / 480.
- **Voice-tag chip rows**: scroll horizontally < 768px rather than wrapping (preserves the chip-row aesthetic).
- **Pricing**: tiers stack vertically < 768px with the popular tier highlighted via order shift.
- **Footer**: 4-column → 2-column → 1-column at 1024 / 768 / 480.
### Image behavior
Voice-demo waveform displays use `aspect-ratio: 16/3` lock with full responsive width. Hero illustrations preserve original aspect ratio.
### Container queries
Used inside the voice-demo widget — the player switches between expanded (waveform + controls + voice tag) and condensed (controls only) modes based on container width.
## 11. Content & Voice
### Tone
ElevenLabs' tone is **precision-engineering-friendly**: technical without being cold, declarative without being loud. It writes like a recording-studio engineer who happens to be a good explainer — present-tense, short bulletins, no marketing rhetoric. Headlines are direct ("The most realistic voice AI", "Generate speech in seconds"); secondary copy explains the mechanism plainly. The voice positions ElevenLabs as a tool used by professionals, not a consumer toy.
### Microcopy patterns
- **Button verbs**: "Try it free", "Sign up", "Get the API", "Talk to sales", "Read the docs". Every CTA is action-forward and the noun is named.
- **Error messages**: pattern is "Couldn't [action] — [reason]. [recovery]." e.g. "Couldn't generate voice — the API quota is exceeded. Upgrade your plan to continue."
- **Success confirmations**: short, paired with the audio output. "Voice generated." rather than "Your voice has been generated successfully!"
### Empty states
Empty states are direct and product-forward. "No voices yet — try one of our presets" with voice-tag chips for the preset selection. Empty-state copy never uses cheerful illustrations or "Oops!" copy — the precision register stays even when the canvas is empty.
### CTA verb conventions
- **Primary marketing CTA**: "Try it free" — the canonical phrase across the site.
- **Developer CTA**: "Get the API", "Read the docs", "View on GitHub".
- **Demo / sales**: "Talk to sales" or "Book a demo".
- **Newsletter**: "Stay updated".
## 12. Dark Mode & Theming
ElevenLabs ships full dark mode for both the marketing surface and the in-product environment. The marketing dark mode is closely related to the studio band — see frontmatter `colors-dark`:
- **bg**: `#0a0a0a` (the studio ground promotes to the default canvas)
- **bg-soft**: `#161616` for nested surfaces
- **surface**: `#161616`, **surface-soft**: `#1f1f1f`, **surface-hover**: `#2a2a2a`, **surface-strong**: `#333333`
- **text**: `#ffffff` (no opacity tilt — full bleed white reads as cleaner against `#0a0a0a`)
- **text-muted**: `#ffffffb3`, **text-soft**: `#ffffff80`, **text-faint**: `#ffffff4d`
- **brand**: `#9fe870` — lime holds at full saturation; contrast against `#0a0a0a` is 13.2:1 (AAA)
- **brand-hover**: `#b1ed8a` — slightly *lighter* on press in dark mode
- **border**: `#ffffff14`, **border-strong**: `#ffffff26`
When implementing dark mode:
- The studio-glow effect persists at the same intensity.
- Cards use `1px solid #ffffff14` ring instead of drop shadows; depth comes from tonal contrast.
- The lime accent does not shift; it stays `#9fe870` because contrast against `#0a0a0a` is already AAA.
- Voice-tag chips swap `#1f1f1f` for `#161616` as their default; the lime-selected variant stays identical.
- Hover lifts behave identically.
The dark mode follows `prefers-color-scheme: dark` automatically, with manual override available. Because the studio band already carries the dark register on every page, switching to dark mode feels like extending the studio surface to the entire viewport.
## 13. Lineage & Influences
ElevenLabs sits at the crossroads of voice-tech precision and editorial restraint. The lineage runs through three traditions:
**Single-accent SaaS minimalism**: Linear's pill CTAs, Stripe's brand-as-singular-blue chromatic strategy, and Inter / Rasmus Andersson's typographic discipline. ElevenLabs translates these into voice-tech: lime replaces blue, but the chromatic restraint is identical. The pill-shape inherits from Linear's playbook, but the inheritance from the in-product voice-tag chip is what makes it feel native rather than borrowed.
**Studio-dark serious-tool register**: Vercel's near-black canvas, Anthropic's quiet conversational dark mode, the recording-studio interior aesthetic. ElevenLabs picks the studio-dark register specifically for product-demo bands, where the precision-engineering register is the right voice. The lime accent reads against `#0a0a0a` like a green LED on a recording deck.
**Voice-wave product-DNA**: the audio-waveform glyph is the brand's most direct product-to-marketing inheritance. The waveform appears as a glyph on voice-tag chips, as the demo widget visualisation, and as decorative motifs in feature illustrations. The wave doubles as the brand mark — a logo that looks like the product's primary visual primitive.
What ElevenLabs rejects: warm cream grounds (Anthropic), broadcast-loud yellow (beehiiv), serif accents (Notion), hand-drawn primitives (tldraw, Excalidraw), and any chromatic system involving more than one saturated accent. The lime is the discipline; the dual-surface (studio-dark + editorial-light) is the discipline; the pill CTA is the discipline.
**Named influences**
- **Linear** ([linear.app](https://linear.app)) — Pill CTAs and the discipline of a single confident accent over a quiet neutral canvas.
- **Stripe** ([stripe.com](https://stripe.com)) — Single-brand-colour-as-action discipline; ElevenLabs replaces blue with lime but keeps the chromatic restraint.
- **Inter / Rasmus Andersson** ([rsms.me/inter](https://rsms.me/inter)) — InterDisplay sets the headline tone; a tighter cut tuned for large-scale display use.
- **Anthropic** ([anthropic.com](https://www.anthropic.com)) — Adjacent AI-brand reference; Anthropic chooses warm-cream restraint, ElevenLabs chooses studio-dark precision.
- **Vercel** ([vercel.com](https://vercel.com)) — Near-black ground discipline; studio-dark surface as serious-tool register.
## 14. Do's and Don'ts
**Do**
- Keep the action palette to a single lime (`#9fe870`); secondary actions use the outlined pill or white pill, never a different hue.
- Use the pill shape for every primary CTA; the pill is inherited from the in-product voice-tag chip and is the brand's signature interaction primitive.
- Lean on InterDisplay 700 with `-2.4px` to `-3.6px` tracking at hero scale (96–128px); that compression is the marketing voice.
- Pair the studio-dark band with product demos and voice-generation showcases; pair the editorial-light band with documentation and pricing.
- Use tonal-contrast depth on the studio surface (no shadows) and soft two-layer ambient shadows on the editorial surface.
- Reserve the studio-glow effect for the audio-demo widget only — it is the lime literally lighting up a moment of voice generation.
- Use voice-tag chips as the recurring primitive across product demos, voice selection, and feature highlights.
- Honor `prefers-reduced-motion: reduce` — collapse hover lifts, audio-waveform pulses, and page slides to opacity-only.
- Run hero copy at 96–128px on desktop with `-0.025em` to `-0.04em` tracking; the studio-scale is the brand register.
- Use `tnum` (tabular numerals) on every data surface — pricing, voice counts, API stats — so numerals lock-step align across cards.
**Don't**
- Don't mix the lime (`#9fe870`) with another saturated accent — the chromatic restraint is what makes the brand legible at a glance.
- Don't apply heavy drop-shadows to studio-band cards; tonal contrast is the depth strategy on `#0a0a0a`.
- Don't introduce a serif into the system — voice-tech here is technical, and serif breaks the precision register.
- Don't use the lime as a body-text colour; it is reserved for action and brand identity.
- Don't run hero copy below 64px on desktop; the broadcast register requires headline scale.
- Don't soften the negative tracking below `-0.018em` at H1+ — the compression carries the voice.
- Don't replace the pill CTA with a rounded rectangle; the pill inherits from the voice-tag chip and dropping it breaks the product-DNA.
- Don't add humanist warmth (rounded sans like SF Pro Rounded, hand-drawn cues, pastel surfaces) — the precision register requires structural type.
- Don't let the studio-glow effect appear outside the audio-demo widget; it is reserved for that one moment.
- Don't follow `prefers-color-scheme: dark` to flip every page to studio-dark — the dual-surface logic depends on contextual band placement.
## 15. Agent Prompt Guide
### Quick Color Reference
```
bg: #ffffff
bg-studio: #0a0a0a
surface: #ffffff
surface-studio: #161616
text: #0a0a0a
text-on-studio: #ffffff
text-muted: #525252
brand: #9fe870
brand-hover: #8ad65e
border: #0000001a
border-studio: #ffffff14
```
### Example Component Prompts
1. "Create a marketing hero in the ElevenLabs editorial-light style: `#ffffff` canvas, InterDisplay 700 / 96px headline in `#0a0a0a` with `-0.025em` tracking, 18px subhead at Inter 400 in `#525252`, primary lime pill CTA (`#9fe870` background, `#0a0a0a` text at Inter 600 / 16px, `14px 28px` padding, full pill 9999px radius), and an outlined secondary pill (`1px solid #0a0a0a`)."
2. "Design a studio-band hero in the ElevenLabs style: full-bleed `#0a0a0a` ground, InterDisplay 700 / 96px headline in `#ffffff`, voice-demo widget at center with audio waveform in `#9fe870`, studio-glow shadow (`0 0 60px rgba(159,232,112,0.18)`), primary lime pill CTA below."
3. "Render a voice-tag chip in the ElevenLabs style: `#1f1f1f` background, `1px solid #ffffff14` border, 9999px pill radius, `6px 12px` padding, Inter 500 / 13px label in `#ffffff`, optional SVG waveform glyph at left in `#9fe870`."
4. "Create an editorial card in the ElevenLabs style: `#ffffff` background, `1px solid #0000001a` hairline, 16px radius, 32px padding, two-layer ambient shadow (`rgba(0,0,0,0.04) 0 1px 2px, rgba(0,0,0,0.03) 0 1px 4px`), InterDisplay 600 / 24px H4 title, body at Inter 400 / 16px in `#0a0a0a`. Hover: shadow lifts to raised, `translateY(-1px)`."
5. "Design a studio-band card in the ElevenLabs style: `#161616` background, `1px solid #ffffff14` border, 16px radius, 32px padding, NO drop shadow (depth via tonal contrast), InterDisplay 600 / 24px H4 title in `#ffffff`, body at Inter 400 / 16px in `#ffffffb3`."
6. "Render a pricing tier card in the ElevenLabs editorial style: `#ffffff` background, `1px solid #0000001a` hairline, 16px radius, 32px padding, raised shadow, tier name in InterDisplay 600 / 20px, price in InterDisplay 700 / 64px with `tnum` enabled in `#0a0a0a`, feature list at Inter 400 / 16px with `#9fe870` checkmark bullets, primary lime pill CTA at the bottom."
### Iteration Guide
1. **Decide the band first**: is this section a product-demo (studio-dark) or content / pricing (editorial-light)? The band choice drives every subsequent decision.
2. **Verify the type voice**: hero headlines should hit 96–128px at 700 weight with negative tracking around `-0.025em` to `-0.04em`. If the headline reads competent rather than broadcast-grade, tighten the track and scale up.
3. **Audit the action colour**: there should be exactly one `#9fe870` lime per module — usually the primary CTA. Pastel-lime (`#d4f0c2`) is for selection backgrounds only.
4. **Check the elevation strategy**: editorial cards use the soft two-layer ambient shadow; studio cards use tonal contrast (no shadow). If your studio card has a drop shadow, you've drifted to the editorial register.
5. **Confirm the pill discipline**: every primary CTA should be a full-pill (9999px). Rectangle CTAs read as secondary or as a different brand entirely.
6. **Verify the voice-tag chip**: if the design has any voice / speaker / preset selection, use the voice-tag chip primitive — pill shape, optional waveform glyph, three variants (studio / lime / light).
7. **Test the studio-glow placement**: the lime-tinted glow should appear only around the audio-demo widget. If you see it elsewhere, remove it.
8. **Check the reduced-motion path**: hover lifts, audio-waveform pulses, and page slides should all collapse to opacity-only when `prefers-reduced-motion: reduce` is set.
1. Visual Theme & Atmosphere
ElevenLabs’ marketing surface is built around a duet of moods. The studio band is a near-black #0a0a0a ground that reads as a recording-studio interior — quiet, focused, voice-wave aesthetic. The editorial band is a paper-white #ffffff canvas for documentation, pricing, and feature copy. A single saturated lime (#9fe870) does triple duty as CTA fill, brand identifier, and audio-waveform highlight. The system is voice-precision-tool dressed in editorial-restraint clothing.
Display type lives at studio scale — Inter Display at 96–128px with 700 weight and -2.4px to -3.6px letter-spacing (-0.025em to -0.04em). That hard negative tracking is where the marketing voice lives; it compresses what would otherwise be a competent SaaS hero into a broadcast register that signals “this is a product about precision”. The lime accent is the only saturated chromatic event in the system, and the discipline of holding to one accent is what gives the brand its instant legibility against the otherwise sea of grayscale AI landing pages.
The pill-shaped CTA is the brand’s signature interaction primitive. Every primary action — “Sign up”, “Try it free”, “Get the API” — appears as a fully-rounded 9999px pill, and the pill shape is inherited from the audio-waveform chip used to label voices in the product. This is unusually direct product-to-marketing inheritance: the chip you use to select a voice in the studio is the same shape as the button you use to sign up. The result is a marketing surface that visually “knows” what the product does.
The atmosphere on the studio band is intentional quiet. Cards on #0a0a0a ground use 1px solid rgba(255,255,255,0.08) ring instead of drop shadows; depth comes from tonal contrast (#0a0a0a → #161616 → #1f1f1f) rather than elevation. The rare studio-glow (0 0 60px rgba(159,232,112,0.18)) appears only around the audio-demo widget, and reads as the lime accent literally lighting up a moment of voice generation. On the light editorial band, depth shifts to a soft two-layer shadow and 10% black hairlines — closer to Vercel or Stripe’s playbook.
Where Notion oscillates light-and-dark for editorial pacing and beehiiv cycles yellow-and-black for impact pacing, ElevenLabs alternates studio-dark-and-editorial-light for contextual pacing. The studio band is for product demos and voice-generation showcases (where the dark precision register is the right voice); the editorial band is for documentation, pricing, and rationale (where the paper-white register is the right voice). The two surfaces are almost two different design systems unified by the lime accent, the Inter type system, and the pill CTA.
Key Characteristics
- Dual-surface system: near-black
#0a0a0astudio ground + paper-white#ffffffeditorial canvas - Single saturated lime
#9fe870accent — CTA, brand, audio-waveform highlight in one - Pill-shaped CTA at full
9999pxradius — inherited from the in-product voice-tag chip - Inter / InterDisplay at studio scale: 96–128px / 700 weight /
-0.025emto-0.04emtracking - Rare studio-glow effect around demo widgets — the lime literally lighting up a moment
- Tonal-contrast depth on studio surface; soft two-layer shadows on editorial surface
- Voice-tag chip primitive: lime / white / dark variants with optional waveform glyph
- 16px card radius, 12px input radius, full pill for CTAs and tags
- 96–120px section padding for the precision-tool breath
- No serif, no rounded sans, no humanist warmth — Inter does the structural work alone
2. Color Palette & Roles
Primary
- bg (
#ffffff): paper-white editorial canvas; documentation, pricing, content sections. - bg-studio (
#0a0a0a): near-black studio ground; product demos, voice-generation showcases. - text (
#0a0a0a): near-black for editorial body; matches the studio ground colour for visual unity. - brand (
#9fe870): lime CTA — the saturated accent that appears across both surfaces.
Brand & Dark
- bg-soft (
#fafafa): softest editorial surface for nested panels. - surface-studio (
#161616): studio-band card surface, one tonal step lighter than ground. - surface-studio-2 (
#1f1f1f): second-level studio surface for emphasis blocks. - surface-studio-3 (
#2a2a2a): rare third-level studio surface. - brand-hover (
#8ad65e): lime a half-step darker for pressed state. - brand-active (
#76c349): deepest pressed lime. - brand-soft (
#d4f0c2): softest lime tint for selection backgrounds. - brand-faint (
#e2f6d5): near-white lime tint for surfaces and badge fills.
Accent
The system is intentionally lime + neutrals (light + studio-dark). There is no third accent.
- accent-warm (
#f5f5f4): warm stone tint, used as a subtle band-tint between editorial sections. - accent (
#0e0f0c): rare near-black accent for emphasis; effectively interchangeable withtext.
Interactive
- link: on light bands, links are
#0a0a0aunderlined; on studio bands, links are#9fe870with no underline. - selected:
brand-soft(#d4f0c2) on light,surface-studio-3on studio. - disabled:
text-faint(#a3a3a3) onsurface-soft.
Neutral Scale
- text-strong (
#000000): display copy when extra punch is needed (rare; H1 typically usestextnear-black). - text-muted (
#525252): captions, meta, secondary copy. - text-soft (
#737373): tertiary text — timestamps, micro-copy. - text-faint (
#a3a3a3): disabled labels, decorative. - text-on-studio (
#ffffff): white text on studio ground. - text-on-studio-muted (
#ffffffb3): 70% white for studio captions. - text-on-studio-soft (
#ffffff80): 50% white for tertiary studio text.
Surface & Borders
- surface (
#ffffff): default light card. - surface-soft (
#fafafa): secondary panel tint. - surface-hover (
#f5f5f4): hover state on light cards. - border (
#0000001a): 10% black hairline (light surface). - border-strong (
#00000033): 20% black for emphasis on light. - border-soft (
#0000000d): 5% black for subtle dividers. - border-studio (
#ffffff14): 8% white hairline (studio surface). - border-studio-strong (
#ffffff26): 15% white for emphasis on studio.
Shadow Colors
- ambient: two-layer (
rgba(0,0,0,0.04) 0 1px 2px, rgba(0,0,0,0.03) 0 1px 4px) — subtle resting shadow on light cards. - raised: deeper two-layer for floating panels.
- popover: deepest, for menus and tooltips.
- studio-glow (
0 0 60px rgba(159,232,112,0.18)): the lime-tinted glow effect, used only around the audio-demo widget on the studio band. - none: studio-band cards use no shadow; depth is tonal.
Semantic
- success (
#16a34a) on success-bg (#dcfce7): editorial green. - warning (
#d97706) on warning-bg (#fef3c7): warm amber. - danger (
#dc2626) on danger-bg (#fee2e2): restrained red. - info (
#0a0a0a) on info-bg (#f5f5f4): info reuses near-black; no info-blue.
3. Typography Rules
Font Family
- Display: InterDisplay → Inter → InterVariable → -apple-system → system-ui → Segoe UI → Helvetica → Arial → sans-serif.
- Body: Inter → InterVariable → -apple-system → system-ui → Segoe UI → Helvetica → Arial → sans-serif.
- Mono companion: JetBrains Mono → IBM Plex Mono → Menlo → ui-monospace → SF Mono → Monaco → Consolas → monospace.
- OpenType features:
ss01(curved-tail Inter alternates) andcv11(curved letters) on display;tnum(tabular numerals) on data and pricing.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| display-hero | InterDisplay | 128 | 700 | 0.95 | -0.04em | ss01 | reserved for the boldest marketing |
| display-large | InterDisplay | 96 | 700 | 1.0 | -0.025em | ss01 | the canonical hero — -2.4px track |
| display | InterDisplay | 80 | 700 | 1.0 | -0.025em | ss01 | secondary heroes |
| h1 | InterDisplay | 64 | 700 | 1.05 | -0.02em | — | section heads |
| h2 | InterDisplay | 48 | 700 | 1.08 | -0.018em | — | feature-band heads |
| h3 | InterDisplay | 32 | 600 | 1.2 | -0.012em | — | sub-feature heads |
| h4 | InterDisplay | 24 | 600 | 1.3 | -0.008em | — | card heads |
| h5 | InterDisplay | 20 | 600 | 1.35 | -0.005em | — | inline emphasis |
| h6 | InterDisplay | 16 | 600 | 1.4 | 0 | — | label-grade heads |
| body-large | Inter | 18 | 400 | 1.55 | 0 | kern | hero subheads |
| body | Inter | 16 | 400 | 1.5 | 0 | kern | default reading |
| body-small | Inter | 14 | 400 | 1.45 | 0 | kern | secondary copy |
| label | Inter | 13 | 500 | 1.3 | 0 | — | category cues |
| caption | Inter | 12 | 500 | 1.4 | 0.02em | — | image / chart caption |
| micro | JetBrains Mono | 11 | 500 | 1.3 | 0.04em | — | smallest type, mono labels |
| code-inline | JetBrains Mono | 14 | 400 | 1.4 | 0 | — | inline code |
| code | JetBrains Mono | 14 | 400 | 1.5 | 0 | — | code block |
| voice-tag | Inter | 13 | 500 | 1.2 | 0 | — | voice / speaker chip label |
Principles
- Negative tracking is the broadcast voice: at hero sizes the track tightens to
-0.025emto-0.04em. That compression is what carries the precision-engineering register. Without it, InterDisplay at 700 reads as competent SaaS rather than studio-grade. - Two-mode OpenType discipline: display copy uses
ss01for the curved-tail Inter alternates (a slightly more humanist, friendly feel against the otherwise architectural face); tabular numerals (tnum) appear on every data surface — pricing, dashboards, voice-count callouts. - Inter Display vs Inter the body face: the system uses Inter Display for headlines and Inter for body. Inter Display is a tighter, more architectural cut tuned for large-scale display use; Inter is the workhorse for paragraph-scale reading. The split signals “we know the difference between display and reading scale”.
- No serif, no humanist warmth: voice-tech leans technical, not editorial. The mono family appears only in code samples and inline API references, drawn from JetBrains Mono first with system fallbacks.
- Mono for micro: the smallest type in the system (11px micro labels) switches to JetBrains Mono with positive tracking — a typographic cue that signals “this is technical metadata, not body copy”.
- The body face stays at 400 weight: ElevenLabs resists the temptation to bold the body. 500 is the maximum for body-class type; 600 appears only at H4 and above.
4. Component Stylings
Buttons
Primary (lime pill)
- Background:
#9fe870. Text:#0a0a0aat Inter 600 / 16px. Padding:14px 28px. Radius: 9999px. Border: none. - Hover: background →
#8ad65e, no transform. Active: background →#76c349. - Use: every primary CTA — Try it free, Sign up, Get the API.
Secondary (outlined pill)
- Background: transparent. Text:
#0a0a0aat Inter 500 / 16px. Padding:14px 28px. Radius: 9999px. Border:1px solid #0a0a0a. - Hover: background →
#fafafa. Use: secondary action paired with lime primary.
On-studio (white pill)
- Background:
#ffffff. Text:#0a0a0aat Inter 600 / 16px. Padding:14px 28px. Radius: 9999px. - Hover: background →
#f0f0f0. Use: secondary action inside the studio band when the lime CTA isn’t appropriate.
Ghost (text-style)
- Background: transparent. Text:
#0a0a0aat Inter 500 / 14px. Padding:12px 24px. Radius: 9999px. - Hover: background →
#fafafa. Use: nav links, tertiary inline action.
Cards
Editorial (light)
- Background:
#ffffff. Border:1px solid #0000001a. Radius: 16px. Padding: 32px. - Shadow:
rgba(0,0,0,0.04) 0 1px 2px, rgba(0,0,0,0.03) 0 1px 4px. - Hover: shadow intensifies to
raised; transform →translateY(-1px). - Use: feature cards on the editorial band — pricing, documentation, content blocks.
Studio
- Background:
#161616. Text:#ffffffat Inter 500 / 16px. Border:1px solid #ffffff14. Radius: 16px. Padding: 32px. No shadow. - Use: feature cards on the studio band — voice demos, audio waveform displays.
Voice-tag Chip
The signature primitive of the design system.
Studio variant
- Background:
#1f1f1f. Text:#ffffffat Inter 500 / 13px. Border:1px solid #ffffff14. Radius: 9999px. Padding:6px 12px. - Often paired with a small SVG waveform glyph at the left.
- Use: voice / speaker selection chips; the brand’s most recognisable component.
Lime variant
- Background:
#9fe870. Text:#0a0a0aat Inter 500 / 13px. Radius: 9999px. Padding:6px 12px. - Use: selected voice / active state.
Light variant
- Background:
#f5f5f4. Text:#0a0a0aat Inter 500 / 13px. Radius: 9999px. Padding:6px 12px. - Use: voice tag on the editorial band.
Badges, Tags, Pills
Status badge
- Background:
#e2f6d5. Text:#0a0a0aat Inter 500 / 12px. Padding:4px 12px. Radius: 9999px. - Use: “New”, “Beta”, inline status.
Mono micro tag
- Background:
#f5f5f4. Text:#525252at JetBrains Mono 500 / 11px tracked+0.04emuppercase. Padding:2px 8px. Radius: 9999px. - Use: API version tags, model identifiers.
Inputs / Forms
Text input
- Background:
#ffffff. Border:1px solid #00000033. Radius: 12px. Padding:12px 16px. Font: Inter 500 / 16px. - Focus: border →
#9fe870, ring0 0 0 3px rgba(159,232,112,0.4).
On-studio input
- Background:
#161616. Border:1px solid #ffffff26. Radius: 12px. Padding:12px 16px. Font: Inter 500 / 16px in#ffffff. - Focus: border →
#9fe870, ring0 0 0 3px rgba(159,232,112,0.4).
Navigation
Top bar
- Background:
#ffffffwith no bottom border (edge defined by content gap). Height: 64px. - Logo: ElevenLabs wordmark in Inter 700 / 18px in
#0a0a0a. - Nav items: Inter 500 / 14px, colour
#0a0a0a, hover background →#fafafa. - Primary lime pill CTA always visible at top right.
Tooltips, Toasts, Modals
- Tooltip: background
#0a0a0a, text#ffffffat Inter 500 / 12px, radius 8px, padding6px 12px. Shadow:popover. - Toast: background
#ffffff, border1px solid #0000001a, radius 16px, shadowpopover. On studio band:#161616background with1px solid #ffffff14border. - Modal: background
#ffffff, radius 24px, shadowpopover, backdroprgba(0,0,0,0.6), padding 32px.
5. Layout Principles
Spacing System
Base unit: 4px. Scale: [1, 2, 4, 6, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 120, 160] × 4px. The system uses moderate-to-generous intervals — 24px gutters, 48–64px between feature blocks, 96–120px between major bands. The breath is precision-tool generous: airier than tldraw, tighter than Linear’s most aggressive sections.
Grid & Container
- Page width: 1280px max, centred.
- Prose width: 720px for documentation and editorial.
- Hero treatment: hero copy claims roughly 800–900px horizontal real estate with large negative-space gutters that let the lime CTA breathe. Voice-demo widget often sits centered below the hero copy.
- Feature grid: 3-column at 1024px+, 2-column at 768–1024px, 1-column below 768px. Card gap: 24–32px.
Whitespace Philosophy
The grid is generous and centered. Hero blocks claim roughly 800–900px of horizontal real estate and large negative-space gutters that let the lime CTA breathe. The page exhales between bands — 96–120px section padding — and the studio-band sections feel even more spacious because the tonal contrast on #0a0a0a reads as deeper space.
Section Cadence
The signature cadence is studio-dark-and-editorial-light alternation. Pattern: editorial-light hero → studio-dark voice-demo band → editorial-light feature → editorial-light pricing → studio-dark testimonial → editorial-light footer. The studio bands appear at moments that need product-demo precision; the editorial bands carry rationale, pricing, and content. Transitions are abrupt (no gradient between bands), and each band carries its own internal rules (light shadows on editorial, tonal-contrast depth on studio).
6. Shapes & Radius Scale
| Tier | Value | Use |
|---|---|---|
| none | 0px | rare; full-bleed images |
| micro | 2px | inline indicators |
| xs | 4px | tight UI primitives |
| sm | 6px | small inline pills |
| md | 8px | tooltips, small popovers |
| lg | 12px | input fields |
| card | 16px | the canonical card radius |
| xl | 20px | larger feature cards |
| xxl | 24px | modals, hero shells |
| pill | 9999px | the canonical CTA pill, voice-tag chips, badges |
Pill is the defining radius. CTAs, badges, voice-tag chips, status pills all share the 9999px radius, and that consistency is what makes the brand legible at a glance. Cards step down to 16px, inputs to 12px. The pill / 16-card / 12-input ladder is the brand’s signature ratio.
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | flat, on #ffffff or #0a0a0a | body content, default surfaces |
| 1 (light) | 1px hairline #0000001a + ambient shadow | editorial card |
| 1 (studio) | 1px hairline #ffffff14, no shadow | studio card; tonal contrast carries depth |
| 2 (light) | raised two-layer shadow | hovered or floating editorial card |
| 2 (studio) | surface-studio-2 (lift to #1f1f1f) | hovered studio card |
| 3 | studio-glow (lime-tinted) | audio-demo widget on studio band |
| 4 | popover shadow | tooltip, dropdown, menu |
| 5 | popover + backdrop, 24px radius | modal, lightbox |
Shadow Philosophy: ElevenLabs uses two distinct elevation strategies based on surface. On the editorial band, depth is soft two-layer ambient shadows in neutral grey — closer to Vercel or Stripe’s playbook. On the studio band, depth is tonal contrast (#0a0a0a → #161616 → #1f1f1f) without drop shadows. The rare studio-glow (0 0 60px rgba(159,232,112,0.18)) appears only around the audio-demo widget — the lime literally lighting up a moment of voice generation. This dual-strategy is part of what makes the brand legible at a glance.
8. Interaction & Motion
Easing
- standard:
cubic-bezier(0.4, 0, 0.2, 1)— workhorse Material-style ease. - emphasized:
cubic-bezier(0.2, 0, 0, 1)— slower acceleration, faster deceleration; used for hero entrance, modal open, and band transitions. - decelerate:
cubic-bezier(0, 0, 0.2, 1)— used for elements entering from off-canvas. - spring:
cubic-bezier(0.34, 1.56, 0.64, 1)— slight overshoot used very sparingly on the audio-waveform animation.
Durations
- instant (80ms): hover background colour shifts.
- fast (150ms): button hover, link underline.
- standard (220ms): primary CTA press, dropdown open.
- slow (320ms): modal open, page band transition.
- emphasized (480ms): hero entrance choreography.
- waveform (600ms): audio-waveform pulse animation cycle.
Per-component micro-states
- Lime pill hover: background colour shift over 150ms with
standardease; no transform, no scale. - Editorial card hover: shadow intensifies from
ambienttoraised, transform →translateY(-1px)over 150ms. - Studio card hover: surface lifts from
#161616to#1f1f1fover 150ms; no transform. - Voice-tag chip hover: background tints up one tier; small lime dot appears at left if not already selected.
- Audio-demo widget: lime-tinted glow fades in at 320ms when audio is playing; waveform animates with 600ms
springease cycling. - Input focus: lime ring fades in at 100ms; border colour shifts to lime simultaneously.
Page transitions
ElevenLabs uses opacity + 12px vertical slide at 320ms with emphasized ease for route transitions — a slightly more deliberate transition than the standard SaaS opacity-only fade, which signals precision-craft rather than generic-marketing.
Reduced-motion strategy
prefers-reduced-motion: reduce is fully respected: all transform-based animations collapse to opacity-only at 100ms. The studio-glow effect persists (it is not motion). The audio-waveform pulse becomes static at the played-state. Hover lifts disappear. Page transitions become opacity-only fades.
9. Accessibility & A11y
Contrast pairs (computed)
- text on bg:
#0a0a0aon#ffffff→ 19.6:1 (AAA at all sizes). - text-muted on bg:
#525252on#ffffff→ 7.8:1 (AAA at body sizes). - on-brand on brand:
#0a0a0aon#9fe870→ 14.2:1 (AAA at all sizes). - text-on-studio on bg-studio:
#ffffffon#0a0a0a→ 19.4:1 (AAA at all sizes). - brand on bg-studio:
#9fe870on#0a0a0a→ 13.2:1 (AAA at all sizes). - text-on-studio-muted on bg-studio:
#ffffffb3on#0a0a0a→ 13.5:1 (AAA).
Focus indicators
- Default focus ring:
3px solid rgba(159,232,112,0.4)with 1px offset; lime ring is visible on every neutral surface. - On lime surfaces: ring shifts to
3px solid rgba(10,10,10,0.4)(near-black ring on lime). - On studio surfaces: ring uses
3px solid rgba(159,232,112,0.5)(slightly brighter lime for sufficient visibility).
Focus rings are never removed.
ARIA patterns
- Voice-tag chips use
role="radio"withinrole="radiogroup"for voice selection. - Audio-demo widget uses
role="region"witharia-label="Voice demonstration"and standard audio element semantics. - Modals use
role="dialog",aria-modal="true", focus trap,Escto close. - Combobox in voice search uses
role="combobox"witharia-expanded,aria-controls,aria-activedescendant.
Keyboard nav order
Top bar → hero CTA → studio voice-demo (with full keyboard semantics) → editorial feature bands → pricing → footer. Tab order matches visual order. Skip-to-content link visible on focus.
Screen reader hints
- Decorative waveform glyphs carry
aria-hidden="true". - Voice-tag chips carry
aria-label="Select [voice name]". - Audio-demo carries
aria-live="polite"updates when generation completes. - Icon-only buttons carry
aria-label.
Reduced motion
Honored throughout — see §8.
10. Responsive Behavior
Breakpoints
| Tier | Width | Behavior |
|---|---|---|
| mobile | < 480px | single column, 16px gutter, 64px section padding, hero at 48–56px |
| tablet | 480–768px | single column, 24px gutter, 80px section padding, hero at 64–72px |
| desktop | 768–1024px | 2-column feature grids, 32px gutter, 96px section padding |
| wide | 1024–1280px | 3-column feature grids, 32px gutter, 120px section padding |
| ultra | 1280px+ | container caps at 1280px, hero at full 96–128px |
Touch Targets
Minimum 44×44px on touch devices. The 14px / 28px button padding clears the threshold. Voice-tag chips on mobile expand to 8px 16px padding for thumb-friendly tap area.
Collapsing strategy
- Top nav: hamburger menu < 768px; primary lime CTA stays visible at top right.
- Hero: voice-demo widget moves below copy < 768px; copy claims full width.
- Feature grid: 3 → 2 → 1 columns at 1024 / 768 / 480.
- Voice-tag chip rows: scroll horizontally < 768px rather than wrapping (preserves the chip-row aesthetic).
- Pricing: tiers stack vertically < 768px with the popular tier highlighted via order shift.
- Footer: 4-column → 2-column → 1-column at 1024 / 768 / 480.
Image behavior
Voice-demo waveform displays use aspect-ratio: 16/3 lock with full responsive width. Hero illustrations preserve original aspect ratio.
Container queries
Used inside the voice-demo widget — the player switches between expanded (waveform + controls + voice tag) and condensed (controls only) modes based on container width.
11. Content & Voice
Tone
ElevenLabs’ tone is precision-engineering-friendly: technical without being cold, declarative without being loud. It writes like a recording-studio engineer who happens to be a good explainer — present-tense, short bulletins, no marketing rhetoric. Headlines are direct (“The most realistic voice AI”, “Generate speech in seconds”); secondary copy explains the mechanism plainly. The voice positions ElevenLabs as a tool used by professionals, not a consumer toy.
Microcopy patterns
- Button verbs: “Try it free”, “Sign up”, “Get the API”, “Talk to sales”, “Read the docs”. Every CTA is action-forward and the noun is named.
- Error messages: pattern is “Couldn’t [action] — [reason]. [recovery].” e.g. “Couldn’t generate voice — the API quota is exceeded. Upgrade your plan to continue.”
- Success confirmations: short, paired with the audio output. “Voice generated.” rather than “Your voice has been generated successfully!”
Empty states
Empty states are direct and product-forward. “No voices yet — try one of our presets” with voice-tag chips for the preset selection. Empty-state copy never uses cheerful illustrations or “Oops!” copy — the precision register stays even when the canvas is empty.
CTA verb conventions
- Primary marketing CTA: “Try it free” — the canonical phrase across the site.
- Developer CTA: “Get the API”, “Read the docs”, “View on GitHub”.
- Demo / sales: “Talk to sales” or “Book a demo”.
- Newsletter: “Stay updated”.
12. Dark Mode & Theming
ElevenLabs ships full dark mode for both the marketing surface and the in-product environment. The marketing dark mode is closely related to the studio band — see frontmatter colors-dark:
- bg:
#0a0a0a(the studio ground promotes to the default canvas) - bg-soft:
#161616for nested surfaces - surface:
#161616, surface-soft:#1f1f1f, surface-hover:#2a2a2a, surface-strong:#333333 - text:
#ffffff(no opacity tilt — full bleed white reads as cleaner against#0a0a0a) - text-muted:
#ffffffb3, text-soft:#ffffff80, text-faint:#ffffff4d - brand:
#9fe870— lime holds at full saturation; contrast against#0a0a0ais 13.2:1 (AAA) - brand-hover:
#b1ed8a— slightly lighter on press in dark mode - border:
#ffffff14, border-strong:#ffffff26
When implementing dark mode:
- The studio-glow effect persists at the same intensity.
- Cards use
1px solid #ffffff14ring instead of drop shadows; depth comes from tonal contrast. - The lime accent does not shift; it stays
#9fe870because contrast against#0a0a0ais already AAA. - Voice-tag chips swap
#1f1f1ffor#161616as their default; the lime-selected variant stays identical. - Hover lifts behave identically.
The dark mode follows prefers-color-scheme: dark automatically, with manual override available. Because the studio band already carries the dark register on every page, switching to dark mode feels like extending the studio surface to the entire viewport.
13. Lineage & Influences
ElevenLabs sits at the crossroads of voice-tech precision and editorial restraint. The lineage runs through three traditions:
Single-accent SaaS minimalism: Linear’s pill CTAs, Stripe’s brand-as-singular-blue chromatic strategy, and Inter / Rasmus Andersson’s typographic discipline. ElevenLabs translates these into voice-tech: lime replaces blue, but the chromatic restraint is identical. The pill-shape inherits from Linear’s playbook, but the inheritance from the in-product voice-tag chip is what makes it feel native rather than borrowed.
Studio-dark serious-tool register: Vercel’s near-black canvas, Anthropic’s quiet conversational dark mode, the recording-studio interior aesthetic. ElevenLabs picks the studio-dark register specifically for product-demo bands, where the precision-engineering register is the right voice. The lime accent reads against #0a0a0a like a green LED on a recording deck.
Voice-wave product-DNA: the audio-waveform glyph is the brand’s most direct product-to-marketing inheritance. The waveform appears as a glyph on voice-tag chips, as the demo widget visualisation, and as decorative motifs in feature illustrations. The wave doubles as the brand mark — a logo that looks like the product’s primary visual primitive.
What ElevenLabs rejects: warm cream grounds (Anthropic), broadcast-loud yellow (beehiiv), serif accents (Notion), hand-drawn primitives (tldraw, Excalidraw), and any chromatic system involving more than one saturated accent. The lime is the discipline; the dual-surface (studio-dark + editorial-light) is the discipline; the pill CTA is the discipline.
Named influences
- Linear (linear.app) — Pill CTAs and the discipline of a single confident accent over a quiet neutral canvas.
- Stripe (stripe.com) — Single-brand-colour-as-action discipline; ElevenLabs replaces blue with lime but keeps the chromatic restraint.
- Inter / Rasmus Andersson (rsms.me/inter) — InterDisplay sets the headline tone; a tighter cut tuned for large-scale display use.
- Anthropic (anthropic.com) — Adjacent AI-brand reference; Anthropic chooses warm-cream restraint, ElevenLabs chooses studio-dark precision.
- Vercel (vercel.com) — Near-black ground discipline; studio-dark surface as serious-tool register.
14. Do’s and Don’ts
Do
- Keep the action palette to a single lime (
#9fe870); secondary actions use the outlined pill or white pill, never a different hue. - Use the pill shape for every primary CTA; the pill is inherited from the in-product voice-tag chip and is the brand’s signature interaction primitive.
- Lean on InterDisplay 700 with
-2.4pxto-3.6pxtracking at hero scale (96–128px); that compression is the marketing voice. - Pair the studio-dark band with product demos and voice-generation showcases; pair the editorial-light band with documentation and pricing.
- Use tonal-contrast depth on the studio surface (no shadows) and soft two-layer ambient shadows on the editorial surface.
- Reserve the studio-glow effect for the audio-demo widget only — it is the lime literally lighting up a moment of voice generation.
- Use voice-tag chips as the recurring primitive across product demos, voice selection, and feature highlights.
- Honor
prefers-reduced-motion: reduce— collapse hover lifts, audio-waveform pulses, and page slides to opacity-only. - Run hero copy at 96–128px on desktop with
-0.025emto-0.04emtracking; the studio-scale is the brand register. - Use
tnum(tabular numerals) on every data surface — pricing, voice counts, API stats — so numerals lock-step align across cards.
Don’t
- Don’t mix the lime (
#9fe870) with another saturated accent — the chromatic restraint is what makes the brand legible at a glance. - Don’t apply heavy drop-shadows to studio-band cards; tonal contrast is the depth strategy on
#0a0a0a. - Don’t introduce a serif into the system — voice-tech here is technical, and serif breaks the precision register.
- Don’t use the lime as a body-text colour; it is reserved for action and brand identity.
- Don’t run hero copy below 64px on desktop; the broadcast register requires headline scale.
- Don’t soften the negative tracking below
-0.018emat H1+ — the compression carries the voice. - Don’t replace the pill CTA with a rounded rectangle; the pill inherits from the voice-tag chip and dropping it breaks the product-DNA.
- Don’t add humanist warmth (rounded sans like SF Pro Rounded, hand-drawn cues, pastel surfaces) — the precision register requires structural type.
- Don’t let the studio-glow effect appear outside the audio-demo widget; it is reserved for that one moment.
- Don’t follow
prefers-color-scheme: darkto flip every page to studio-dark — the dual-surface logic depends on contextual band placement.
15. Agent Prompt Guide
Quick Color Reference
bg: #ffffff
bg-studio: #0a0a0a
surface: #ffffff
surface-studio: #161616
text: #0a0a0a
text-on-studio: #ffffff
text-muted: #525252
brand: #9fe870
brand-hover: #8ad65e
border: #0000001a
border-studio: #ffffff14Example Component Prompts
-
“Create a marketing hero in the ElevenLabs editorial-light style:
#ffffffcanvas, InterDisplay 700 / 96px headline in#0a0a0awith-0.025emtracking, 18px subhead at Inter 400 in#525252, primary lime pill CTA (#9fe870background,#0a0a0atext at Inter 600 / 16px,14px 28pxpadding, full pill 9999px radius), and an outlined secondary pill (1px solid #0a0a0a).” -
“Design a studio-band hero in the ElevenLabs style: full-bleed
#0a0a0aground, InterDisplay 700 / 96px headline in#ffffff, voice-demo widget at center with audio waveform in#9fe870, studio-glow shadow (0 0 60px rgba(159,232,112,0.18)), primary lime pill CTA below.” -
“Render a voice-tag chip in the ElevenLabs style:
#1f1f1fbackground,1px solid #ffffff14border, 9999px pill radius,6px 12pxpadding, Inter 500 / 13px label in#ffffff, optional SVG waveform glyph at left in#9fe870.” -
“Create an editorial card in the ElevenLabs style:
#ffffffbackground,1px solid #0000001ahairline, 16px radius, 32px padding, two-layer ambient shadow (rgba(0,0,0,0.04) 0 1px 2px, rgba(0,0,0,0.03) 0 1px 4px), InterDisplay 600 / 24px H4 title, body at Inter 400 / 16px in#0a0a0a. Hover: shadow lifts to raised,translateY(-1px).” -
“Design a studio-band card in the ElevenLabs style:
#161616background,1px solid #ffffff14border, 16px radius, 32px padding, NO drop shadow (depth via tonal contrast), InterDisplay 600 / 24px H4 title in#ffffff, body at Inter 400 / 16px in#ffffffb3.” -
“Render a pricing tier card in the ElevenLabs editorial style:
#ffffffbackground,1px solid #0000001ahairline, 16px radius, 32px padding, raised shadow, tier name in InterDisplay 600 / 20px, price in InterDisplay 700 / 64px withtnumenabled in#0a0a0a, feature list at Inter 400 / 16px with#9fe870checkmark bullets, primary lime pill CTA at the bottom.”
Iteration Guide
- Decide the band first: is this section a product-demo (studio-dark) or content / pricing (editorial-light)? The band choice drives every subsequent decision.
- Verify the type voice: hero headlines should hit 96–128px at 700 weight with negative tracking around
-0.025emto-0.04em. If the headline reads competent rather than broadcast-grade, tighten the track and scale up. - Audit the action colour: there should be exactly one
#9fe870lime per module — usually the primary CTA. Pastel-lime (#d4f0c2) is for selection backgrounds only. - Check the elevation strategy: editorial cards use the soft two-layer ambient shadow; studio cards use tonal contrast (no shadow). If your studio card has a drop shadow, you’ve drifted to the editorial register.
- Confirm the pill discipline: every primary CTA should be a full-pill (9999px). Rectangle CTAs read as secondary or as a different brand entirely.
- Verify the voice-tag chip: if the design has any voice / speaker / preset selection, use the voice-tag chip primitive — pill shape, optional waveform glyph, three variants (studio / lime / light).
- Test the studio-glow placement: the lime-tinted glow should appear only around the audio-demo widget. If you see it elsewhere, remove it.
- Check the reduced-motion path: hover lifts, audio-waveform pulses, and page slides should all collapse to opacity-only when
prefers-reduced-motion: reduceis set.
Drop elevenlabs into your project, then ship the actual sections in an afternoon.
1 · install design
npx design-md add elevenlabs 2 · ship landing page
npx agentkit init --design elevenlabs light editorial
Anthropic
Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay…
Docs
Install
Anthropic
webdesignhot
dark sans
Hugging Face
AI community canvas — deep blue-black ground, Source Sans Pro headlines, pill auth + 8px…
Docs
Install
Hugging Face
webdesignhot
light dark
Replicate
AI-API marketing — light page chrome, dark hero canvas, rb-Freigeist Neue display, JetBr…
Docs
Install
Replicate
webdesignhot