PUBLIC REFERENCE
ElevenLabs
Architect's blueprint on warm vellum — Waldenburg weight-300 headlines at 48px with -0.02em tracking anchored against an eggshell ground, pure black pill buttons as the only punctuation.
Colors
#fdfcfc Page background and primary surface — the near-white warmth distinguishes this from pure #ffffff, landing type with extra weight
#f5f3f1 Secondary surface, hover states, subtle section backgrounds
#e5e5e5 All borders, dividers, card outlines, button outlines — the single border color used universally
#b1b0b0 Disabled states, placeholder elements, logo grid grayscale treatment
#777169 Secondary body text, nav items, subheadings, captions — warm stone undertone separates it from a cold gray
#a59f97 Tertiary text, icon strokes, deemphasized labels
#57534 Mid-tone text, secondary headings on light surfaces
#000000 Primary text, filled CTA buttons (background), logo mark — the absolute black against eggshell creates 20.5:1 contrast
#0447ff ElevenAgents product dot / brand avatar accent — appears only in small circular UI elements, not in text or buttons
#ff4704 ElevenCreative product dot / brand avatar accent — small circular UI indicator only
#3d75d8 Logo mark conic gradient — the spinning blue-cyan wheel that is the ElevenLabs logomark
Do
- Use Waldenburg 300 with -0.02em letter-spacing for all headings at 32px and above — never substitute a heavier weight.
- Apply 9999px border-radius to every button and pill tag; use 16-20px for cards and panels; use 0px for bare input fields.
- Keep the entire color palette at near-zero saturation: #000000 text, #fdfcfc background, #e5e5e5 borders, #777169 secondary text. Reserve #ff4704 and #0447ff for product avatar dots only.
- Use the inset shadow rgba(0,0,0,0.075) 0px 0px 0px 0.5px inset on white UI surfaces that sit on eggshell — it replaces border outlines on cards without adding visual weight.
- Use Geist Mono 400 13px only for machine-generated or technical inline annotations (e.g. [whispers], [sarcastic]) and code snippets.
- Render all third-party logos in the social proof grid at #b1b0b0 (Fog) with no hover color change — chromatic logos break the achromatic discipline.
- Size section gaps at 80-120px vertical spacing between major content blocks; use 8-12px for element-level gaps within components.
Don't
- Never use a weight above 300 for Waldenburg display headlines — weight 700 belongs only to WaldenburgFH product-label contexts at 14px.
- Never introduce saturated color for text, background fills, or buttons — the Signal Blue #0447ff and Ember #ff4704 are reserved exclusively for 8-16px avatar/dot indicators.
- Never apply box-shadow elevation larger than rgba(0,0,0,0.4) 0px 0px 1.143px — ElevenLabs cards float by 1px shadow, not by depth layering.
- Never use a pure white #ffffff background for page surfaces — use #fdfcfc (Eggshell) for all base surfaces to preserve the warm papery ground.
- Never place Inter body text below 13px in product UI contexts or below 14px in marketing prose — the 0.01em tracking needs minimum size to work.
- Never use more than two button variants in the same visual cluster — one filled black pill (primary) + one white ghost pill (secondary) is the maximum combination.
- Never apply border-radius to input fields — inputs use 0px radius, creating an editorial underline-or-box distinction from the rounded interactive elements.