Skip to content
elevenlabs.io logo

ElevenLabs

elevenlabs.io

“ElevenLabs projects a sophisticated yet approachable tech-forward vibe, emphasizing innovation and capability. It feels like a platform built for serious creators and enterprises, but with an underlying sense of modern design and user-friendliness.”

AI-powered
innovative
professional
modern
accessible-tech
clean
high-fidelity

Color Palette

Colors

#000000

primary

#ffffff

background

#000000

text

#777169

secondaryText

#777169

muted

#7fffff

accent

Typography

Fonts

Inter

body
400
self-hosted

Inter Fallback

Waldenburg

heading
300
self-hosted

Waldenburg Fallback

Inter

heading
400
500
self-hosted

Inter Fallback

Geist Mono

mono
400
self-hosted

Geist Mono Fallback

body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

h4

The quick brown fox

Components

Design System

Subscribe
secondary
9999px
#ffffff#000000
card
box-shadow

rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px

card
box-shadow

rgb(255, 255, 255) 0px 0px 0px 0px inset, rgb(235, 232, 228) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px

card
box-shadow

rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.125) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px

card
box-shadow

rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px

element
box-shadow

rgba(0, 0, 0, 0.125) 0px 0px 0px 0.5px, rgba(0, 0, 0, 0.04) 0px 1px 1px 0px, rgba(0, 0, 0, 0.04) 0px 2px 4px 0px

gradient

linear-gradient(to right, rgb(245, 243, 241), rgba(0, 0, 0, 0))...

gradient

linear-gradient(to left, rgb(245, 243, 241), rgba(0, 0, 0, 0))...

gradient

linear-gradient(to top, rgb(255, 255, 255), rgba(255, 255, 255, 0))...

Voice & Tone

Personality

Visual Energy

6/10

Design Era

contemporary-minimal

Emotional Tone

empowering-efficient

Target Audience

Developers, content creators, enterprises, and individuals seeking advanced, high-quality AI voice generation and agent platforms.

Comparable Brands

OpenAI
Stripe
Vercel
Notion

Brand Rules

Dos & Don'ts

Do

  • Utilize a stark, high-contrast color palette with #000000 (black) as the primary and text color, #ffffff (white) as the background, and #7fffff (cyan) as a vibrant accent.
  • Employ Waldenburg (weight 300) or Inter (weights 400, 500) for headings, always in sentence-case.
  • Use Inter (weight 400) for body text with a line-height of 28.8px to ensure readability.
  • Style secondary buttons with a #ffffff background, #000000 text, a #e5e5e5 border, and a pill-shaped border-radius of 9999px, with 0px 12px padding.
  • Apply subtle, multi-layer shadows on cards, such as `rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px`.
  • Incorporate subtle linear gradients for background elements, specifically `linear-gradient(to right, rgb(245, 243, 241), rgba(0, 0, 0, 0))` and `linear-gradient(to left, rgb(245, 243, 241), rgba(0, 0, 0, 0))`.
  • Maintain a consistent base unit of 2px for all spacing and sizing, contributing to a precise layout.
  • Use Geist Mono (weight 400) specifically for all code blocks and monospace text elements.

Don't

  • Avoid using title case or all caps for headings; all headings should be in sentence-case.
  • Do not use emojis in any marketing or platform copy.
  • Refrain from using exclamations frequently; keep the tone largely matter-of-fact and serious.
  • Do not apply strong, opaque shadows; instead, use subtle, multi-layer shadows with low opacity.
  • Avoid sharp-cornered elements; all interactive elements and cards should feature either soft rounded corners or a pill-shaped border-radius (9999px).
  • Do not introduce additional primary or accent colors beyond #000000, #ffffff, and #7fffff to maintain brand consistency.
  • Avoid overly casual or playful language; the brand maintains a serious and enthusiastic tone.
  • Do not use serif fonts anywhere on the platform; the brand exclusively uses sans-serif and monospace typefaces.

Design Assets

Visual Elements

Design asset
svg44×44
Design asset
svg44×44
Design asset
svg44×44
Design asset
svg44×44
Design asset
svg44×44
Design asset
svg44×44
Design asset
svg114×40
Moderation
svg203×202
Accountability
svg202×202
Provenance
svg202×202

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

Download
DESIGN.md not yet generated for this brand.
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md
Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/elevenlabs.io \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.

Get started free