name: elevenlabs-design
version: alpha
description: >
  A quiet, near-white editorial canvas (#FDFCFC) with pure-black ink, built on
  a restrained type pairing: Waldenburg (a humanist grotesque, run LIGHT at
  weight 300 for display) for headlines and Inter for body. The brand is almost
  entirely monochrome — black pill buttons, white outline buttons, and a thin
  underline-link button — letting the one signature flourish carry the color:
  soft, grainy, multi-hue gradient orbs and blocks (peach/blue/green/violet).
  Geometry is soft (pill buttons, rounded cards) and the page is flat, divided
  by faint dotted corner-tick rules.
colors:
  # Brand / action
  primary: '#000000'          # black pill buttons + ink
  on-primary: '#ffffff'
  # Text
  on-surface: '#000000'
  on-surface-secondary: '#6b6b6b'  # muted section labels / captions (approx)
  # Surface
  surface: '#fdfcfc'          # page background (--page-background-color)
  surface-card: '#f2f1f1'     # feature cards / panels (warm light gray, approx)
  # Hairlines
  hairline: '#e5e5e5'
  # Accent (gradient art only — not UI)
  gradient-peach: '#ff8a5c'   # the warm orange orb (approx)
  gradient-violet: '#b9b3e6'  # lavender orb (approx)
  gradient-blue: '#a9c2e8'    # blue orb (approx)
  gradient-green: '#bcd6c4'   # green orb (approx)
  # Accent eyebrow (occasionally warm)
  accent-eyebrow: '#ff7a45'   # warm "section" label tint (approx)
typography:
  font-display: '"Waldenburg", "Waldenburg Fallback", sans-serif'   # OSS sub: "Neue Haas Grotesk" / Inter Display
  font-display-hf: '"WaldenburgHF", "WaldenburgHF Fallback", sans-serif'  # a heavier "headline" cut used on some buttons
  font-body: '"Inter", "Inter Fallback"'   # body — Inter IS open source
  font-mono: '"Geist Mono", "Geist Mono Fallback"'  # code blocks — Geist Mono IS open source
  display:                    # hero "Bringing technology to life"
    fontFamily: '{typography.font-display}'
    fontSize: 48px            # scales up responsively
    fontWeight: 300
    lineHeight: 52px
    letterSpacing: -0.02em    # -0.96px
  section-title:              # "Two platforms built on the same research foundation"
    fontFamily: '{typography.font-display}'
    fontWeight: 300
    letterSpacing: -0.02em
  body:
    fontFamily: '{typography.font-body}'
    fontSize: 17px
    fontWeight: 400
    lineHeight: 23.8px
  card-title:                 # "ElevenCreative" / "ElevenAgents"
    fontFamily: '{typography.font-body}'
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
  eyebrow:                    # section/card labels ("Music", "SFX", "Highlights")
    fontFamily: '{typography.font-body}'
    fontSize: 16px
    fontWeight: 400
    color: '{colors.on-surface-secondary}'
  code:
    fontFamily: '{typography.font-mono}'
rounded:
  card: 24px                  # feature cards (approx)
  pill: 9999px                # buttons, chips, inputs
spacing:
  base: 8px
  scale: [4px, 8px, 12px, 16px, 20px, 24px, 32px, 48px, 64px, 96px]
components:
  button-primary:             # "Sign up"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    rounded: '{rounded.pill}'
    padding: '~12px 22px'
  button-secondary:           # "Contact sales" / "Get started"
    backgroundColor: '{colors.surface}'
    textColor: '{colors.on-surface}'
    borderWidth: 1px
    borderColor: '{colors.hairline}'
    rounded: '{rounded.pill}'
  button-underline:           # text action with a 2px bottom border
    backgroundColor: 'transparent'
    textColor: '{colors.on-surface}'
    fontWeight: 700
    borderWidth: '0 0 2px'
    borderColor: '{colors.primary}'
    rounded: '{rounded.none}'
  card-feature:               # "Music / SFX / Voices / Image & Video" tiles
    backgroundColor: '{colors.surface-card}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.card}'
    iconChip: 'small rounded-square monoline icon, top-left'
  gradient-orb:               # the signature grainy gradient circle/block
    note: 'soft noise-textured radial/linear gradient (peach/violet/blue/green); used as hero carousel art and feature backdrops'
motion:
  # Calm. Carousel of gradient orbs with prev/next chevrons; subtle fades.
icons:
  style: outline
  stroke: ~1.5px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color-rules: 'Monoline black, each sat in a small rounded-square chip. The wordmark "llElevenLabs" uses the bar-glyph "ll". Up-right "↗" marks external links.'

ElevenLabs

elevenlabs-design — version alpha

Surfaces studied via Playwright (elevenlabs.io home): computed styles + a small :root (the site exposes --page-background-color: #FDFCFC and the --font-inter / --font-geist-mono families; Waldenburg is applied via classes). High-confidence on type families and the near-white page; gradient-orb hues and the warm card gray are nearest-hex approximations from the grainy art.

Overview

ElevenLabs presents a quiet, near-white editorial canvas — {colors.surface} (#FDFCFC), a hair off pure white — with pure-black ink. The type system pairs Waldenburg (a humanist grotesque) run light (weight 300) for big display headlines ("Bringing technology to life") with Inter for body and Geist Mono for code. The brand is almost entirely monochrome: actions are black pill buttons, white outline pills, and a distinctive thin underline-link button (a 2px bottom border). The single color flourish is the soft, grainy, multi-hue gradient orb — peach/violet/blue/green noise-gradients used as hero carousel art and feature backdrops — which keeps the page calm while still feeling "alive" (fitting for an audio brand). Geometry is soft (pill buttons, ~24px cards) and the layout is flat, segmented by faint dotted corner-tick rules between sections.

Colors

• Black — {colors.primary} #000. Ink and primary action (the "Sign up" pill). Pure black, not warm.
• Near-white page — {colors.surface} #FDFCFC. A deliberately warm-neutral off-white, softer than #FFF. Feature cards sit on a slightly darker warm gray {colors.surface-card}.
• Muted text — {colors.on-surface-secondary} ~#6b6b6b. Section/card eyebrow labels ("Music", "SFX", "ElevenCreative") and descriptions; occasionally a section label warms to {colors.accent-eyebrow} (~#ff7a45).
• Hairlines — {colors.hairline} #e5e5e5. Borders on white pill buttons and dividers.
• Gradient art (not UI). Grainy gradient orbs in peach {colors.gradient-peach}, lavender {colors.gradient-violet}, blue {colors.gradient-blue}, green {colors.gradient-green}, plus richer red→blue noise blocks behind editor mockups. These are illustration, never text/button fills.

Typography

• Waldenburg — display/headlines. Closest open-source substitute: Neue Haas Grotesk or Inter Display. Defining choice: weight 300 at large sizes with -0.02em tracking — airy and premium. A heavier cut (WaldenburgHF) appears on some buttons.
• Inter — body (17px/400) and UI. (Open source.)
• Geist Mono — code samples. (Open source.)

Token	Family	Size	Weight	Line-height	Tracking	Usage
display	Waldenburg	48px+	300	52px	-0.02em	Hero / section titles
body	Inter	17px	400	23.8px	normal	Body copy
card-title	Inter	16px	500	24px	normal	Card names
eyebrow	Inter	16px	400	—	normal	Muted section/card labels
code	Geist Mono	—	400	—	normal	API code blocks

Layout

Base rhythm 8px. The page is a vertical stack of full-width sections separated by faint dotted corner-tick rules. Patterns include: a hero with a gradient-orb carousel (chevron prev/next), a grayscale trust-logo grid, two-column "title + product mockup" rows, and 2-up feature card grids ("Music / SFX", "Voices / Image & Video"). Product UI is shown in clean rounded app mockups. Whitespace is generous; the mood is understated and content-forward.

Elevation & Depth

Flat. No meaningful shadows on buttons or cards (box-shadow: none); cards are distinguished by the warm-gray fill on near-white. Depth comes from the grainy gradient art and clean product mockups, not elevation. No glass, no heavy shadows.

Shapes

Soft and friendly: full pills ({rounded.pill}) for buttons, chips and inputs; ~24px rounded feature cards; small rounded-square chips behind icons. The one sharp element is the underline-link button (no radius, 2px bottom border).

Components

• Primary button {components.button-primary} — solid black pill, white label ("Sign up").
• Secondary button {components.button-secondary} — white pill with a #e5e5e5 hairline ("Contact sales", "Get started").
• Underline button {components.button-underline} — bold text with a 2px black bottom border, no radius.
• Feature card {components.card-feature} — warm-gray fill, ~24px radius, a monoline icon in a small rounded-square chip top-left, muted label + body.
• Gradient orb {components.gradient-orb} — the signature grainy multi-hue circle/block used as hero and section art.

Motion

Calm and minimal: the hero gradient-orb carousel advances via chevrons; product mockups and sections fade in subtly. No bounce, no parallax — restraint suits the premium, audio-research positioning.

Iconography

Thin outline monoline icons, each in a small rounded-square chip (speaker, sparkle/SFX, waveform/voices, image+play). Black, ink-inherited. The wordmark is "llElevenLabs" with the signature double-bar "ll" glyph; external links use "↗". Sizes 16/20/24px.

Do's and Don'ts

• Do keep the page on warm near-white #FDFCFC with pure-black ink.
• Do set display headlines in Waldenburg light (300) with slight negative tracking; body in Inter.
• Do keep UI monochrome — black pill, white outline pill, and the underline-link button.
• Do let the grainy gradient orbs carry all the color.
• Do seat icons in small rounded-square chips.
• Don't use the gradient hues as text or button fills.
• Don't bold the big headlines — lightness is the signature.
• Don't add drop shadows; keep cards flat on the warm canvas.

Known Gaps

• Waldenburg / WaldenburgHF are proprietary; weight axis names beyond 300/500/700 not enumerated.
• Card gray, muted text and gradient-orb hues are nearest-hex approximations (the art is noise-textured, and few semantic color vars are exposed in :root).