{"id":"031056ff-7af1-46db-8daa-115f731c5d26","name":"ElevenLabs","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/031056ff-7af1-46db-8daa-115f731c5d26","originalSiteUrl":"https://elevenlabs.io","capturedAt":"2026-04-11T22:12:51.895Z","colors":[{"name":"Eggshell","hex":"#fdfcfc","role":"Page background and primary surface — the near-white warmth distinguishes this from pure #ffffff, landing type with extra weight","group":"neutral","cssVariable":"--color-eggshell"},{"name":"Powder","hex":"#f5f3f1","role":"Secondary surface, hover states, subtle section backgrounds","group":"neutral","cssVariable":"--color-powder"},{"name":"Chalk","hex":"#e5e5e5","role":"All borders, dividers, card outlines, button outlines — the single border color used universally","group":"neutral","cssVariable":"--color-chalk"},{"name":"Fog","hex":"#b1b0b0","role":"Disabled states, placeholder elements, logo grid grayscale treatment","group":"neutral","cssVariable":"--color-fog"},{"name":"Gravel","hex":"#777169","role":"Secondary body text, nav items, subheadings, captions — warm stone undertone separates it from a cold gray","group":"neutral","cssVariable":"--color-gravel"},{"name":"Slate","hex":"#a59f97","role":"Tertiary text, icon strokes, deemphasized labels","group":"neutral","cssVariable":"--color-slate"},{"name":"Cinder","hex":"#57534","role":"Mid-tone text, secondary headings on light surfaces","group":"neutral","cssVariable":"--color-cinder"},{"name":"Obsidian","hex":"#000000","role":"Primary text, filled CTA buttons (background), logo mark — the absolute black against eggshell creates 20.5:1 contrast","group":"neutral","cssVariable":"--color-obsidian"},{"name":"Signal Blue","hex":"#0447ff","role":"ElevenAgents product dot / brand avatar accent — appears only in small circular UI elements, not in text or buttons","group":"accent","cssVariable":"--color-signal-blue"},{"name":"Ember","hex":"#ff4704","role":"ElevenCreative product dot / brand avatar accent — small circular UI indicator only","group":"accent","cssVariable":"--color-ember"},{"name":"Voice Spectrum","hex":"#3d75d8","role":"Logo mark conic gradient — the spinning blue-cyan wheel that is the ElevenLabs logomark","group":"brand","gradient":"conic-gradient(from 180deg, rgb(61, 117, 216) 11.5931deg, rgb(42, 104, 210) 26.317deg, rgb(117, 190, 229) 32.3924deg, rgb(82, 208, 233) 38.9146deg, rgb(33, 89, 186) 75.3508deg, rgb(58, 116, 218) 85.0388deg, rgb(108, 215, 236) 94.5293deg, rgb(90, 185, 241) 122.11deg, rgb(51, 161, 229) 129.967deg, rgb(31, 95, 207) 136.719deg, rgb(44, 84, 202) 144.313deg, rgb(58, 158, 207) 175.985deg, rgb(49, 103, 197) 183.869deg, rgb(173, 232, 243) 201.635deg, rgb(216, 241, 245) 224.865deg, rgb(165, 219, 230) 239.729deg, rgb(43, 157, 214) 268.165deg, rgb(174, 224, 233) 286.211deg, rgb(32, 186, 208) 329.654deg, rgb(30, 83, 176) 343.551deg, rgb(47, 64, 210) 359.255deg)","cssVariable":"--color-voice-spectrum"}],"typography":[{"role":"All display and section headlines. Weight 300 is the signature move — a light-weight custom serif for an AI platform inverts every SaaS convention of bold grotesque headlines. At 48px with -0.02em tracking the letters breathe and lean slightly classical. No substitute fully captures it.","sizes":"32px, 36px, 48px","family":"Waldenburg","weight":"300","lineHeight":"1.08–1.17","substitute":"Cormorant Garamond 300, or Libre Baskerville 300","letterSpacing":"-0.64px at 32px, -0.72px at 36px, -0.96px at 48px"},{"role":"Navigation product labels (ElevenCreative, ElevenAgents, ElevenAPI) and icon badges. The 0.05em wide tracking at weight 700 creates a compressed, stamp-like label style — tight caps energy in a small footprint.","sizes":"14px","family":"WaldenburgFH","weight":"700","lineHeight":"1.10","substitute":"Inter 700 with letter-spacing 0.7px","letterSpacing":"0.7px at 14px"},{"role":"All body copy, UI labels, navigation, buttons, captions, footer. Weight 400 for body and descriptive text; weight 500 for interactive labels and emphasis. The 0.01em letter-spacing is a subtle open tracking that keeps small sizes legible on eggshell.","sizes":"10px, 12px, 13px, 14px, 15px, 16px, 18px, 20px","family":"Inter","weight":"400, 500","lineHeight":"1.0–2.06","substitute":"Inter (Google Fonts)","letterSpacing":"0.1px–0.2px across all sizes","fontFeatureSettings":"\"kern\" 1"},{"role":"Code snippets, technical annotations, voice-text preview inline markers like [sarcastic] and [whispers]. Monospace signals machine-generated or technical content within prose.","sizes":"13px","family":"Geist Mono","weight":"400","lineHeight":"1.69","substitute":"JetBrains Mono 400, or IBM Plex Mono 400"}],"spacing":{"radius":{"tags":"9999px","cards":"16px","badges":"12px","inputs":"4px","modals":"24px","panels":"20px","buttons":"9999px"},"elementGap":"8-12px","sectionGap":"80-120px","cardPadding":"16-24px","pageMaxWidth":"1200px"},"radius":{"tags":"9999px","cards":"16px","badges":"12px","inputs":"4px","modals":"24px","panels":"20px","buttons":"9999px"},"shadows":{"philosophy":"ElevenLabs uses only hairline elevation: rgba(0,0,0,0.4) 0px 0px 1.143px with a secondary rgba(0,0,0,0.04) 0px 2px 4px. Cards barely detach from the eggshell surface — they hover rather than float. This flatness keeps all UI elements in the same perceptual plane, matching the editorial, text-first design intention. The inset shadow rgba(0,0,0,0.075) 0px 0px 0px 0.5px is used instead of border-color on white-on-eggshell surfaces.","surfaces":[{"hex":"#fdfcfc","name":"Page Ground","level":0,"purpose":"Base page background — all page-level content sits here"},{"hex":"#f5f3f1","name":"Powder Surface","level":1,"purpose":"Section highlights, active row states, nav hover backgrounds"},{"hex":"#ffffff","name":"Card White","level":2,"purpose":"Interactive demo cards and form inputs that need to pop off the eggshell ground"},{"hex":"#000000","name":"Obsidian","level":3,"purpose":"Primary CTA fill, logo mark, full-bleed dark sections"}]},"guidelines":{"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."],"dont":["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."]}}