ElevenLabs

:root {
  /* Color — canvas + ink + acentos */
  --color-canvas: #FDFCFC;        /* eggshell */
  --color-surface: #F5F3F1;       /* superficie tibia */
  --color-surface-elevated: #FFFFFF;
  --color-ink: #000000;           /* negro marca */
  --color-ink-soft: #44403B;      /* texto secundario tibio */
  --color-muted: #767676;
  --color-primary: #000000;       /* CTA negro */
  --color-primary-hover: #1C1C1C;
  --color-secondary: #FF885C;     /* coral acento */
  --color-accent: #FDE9BC;        /* crema solar */
  --color-border: #E0DFDD;
  --color-on-primary: #FDFCFC;

  /* Typography */
  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Scale — valores reales del CSS del sitio */
  --f-display-01: 700 48px/100% var(--font-display);
  --f-heading-01: 300 36px/105% var(--font-display);
  --f-heading-04: 400 20px/130% var(--font-display);
  --f-body-01: 400 17px/140% var(--font-body);
  --f-description-01: 400 18px/130% var(--font-display);
  --f-label: 400 14px/140% var(--font-body);

  /* Radius + shadow */
  --radius-xl: 20px;       /* cards, inputs */
  --radius-2xl: 28px;      /* hero blocks */
  --radius-full: 9999px;   /* CTA, badges */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.04);

  /* Spacing — base 4px */
  --space-1: 4px; --space-2: 8px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px;
  --space-16: 64px; --space-20: 80px;

  /* Motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 140ms; --duration-base: 180ms; --duration-slow: 240ms;
}

@theme {
  /* Color */
  --color-canvas: #FDFCFC;
  --color-surface: #F5F3F1;
  --color-surface-elevated: #FFFFFF;
  --color-ink: #000000;
  --color-ink-soft: #44403B;
  --color-muted: #767676;
  --color-primary: #000000;
  --color-primary-hover: #1C1C1C;
  --color-secondary: #FF885C;
  --color-accent: #FDE9BC;
  --color-border: #E0DFDD;
  --color-on-primary: #FDFCFC;

  /* Font families */
  --font-display: 'Hanken Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* Font sizes (rem) */
  --text-display: 3rem;       /* 48px */
  --text-heading: 2.25rem;    /* 36px */
  --text-heading-sm: 1.25rem; /* 20px */
  --text-body: 1.0625rem;     /* 17px */
  --text-description: 1.125rem; /* 18px */
  --text-label: 0.875rem;     /* 14px */

  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Radius */
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.04);

  /* Spacing */
  --spacing-1: 4px; --spacing-2: 8px; --spacing-4: 16px;
  --spacing-6: 24px; --spacing-8: 32px; --spacing-12: 48px;
  --spacing-16: 64px; --spacing-20: 80px;

  /* Easing */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
}

{
  "color": {
    "canvas": "#FDFCFC",
    "surface": "#F5F3F1",
    "surfaceElevated": "#FFFFFF",
    "ink": "#000000",
    "inkSoft": "#44403B",
    "muted": "#767676",
    "primary": "#000000",
    "primaryHover": "#1C1C1C",
    "primaryActive": "#3D3D3D",
    "secondary": "#FF885C",
    "secondaryHover": "#FF6E3D",
    "accent": "#FDE9BC",
    "accentSoft": "#FFF9F5",
    "border": "#E0DFDD",
    "borderSubtle": "#E5E5E5",
    "onPrimary": "#FDFCFC",
    "info": "#0A59D2",
    "error": "#9C161C",
    "success": "#022C20",
    "warning": "#966812"
  },
  "font": {
    "display": { "family": "Hanken Grotesk", "substituteOf": "Waldenburg/WaldenburgFH" },
    "body": { "family": "Inter", "real": true },
    "mono": { "family": "IBM Plex Mono", "substituteOf": "ui-monospace" }
  },
  "fontSize": {
    "display01": { "rem": "3rem", "px": 48, "weight": 700, "lineHeight": "100%" },
    "heading01": { "rem": "2.25rem", "px": 36, "weight": 300, "lineHeight": "105%", "tracking": "-0.03em" },
    "heading04": { "rem": "1.25rem", "px": 20, "weight": 400, "lineHeight": "130%", "tracking": "-0.01em" },
    "body01": { "rem": "1.0625rem", "px": 17, "weight": 400, "lineHeight": "140%" },
    "description01": { "rem": "1.125rem", "px": 18, "weight": 400, "lineHeight": "130%", "tracking": "-0.02em" },
    "label": { "rem": "0.875rem", "px": 14, "weight": 400, "lineHeight": "140%", "tracking": "0.01em" }
  },
  "radius": { "sm": "4px", "md": "8px", "lg": "12px", "xl": "20px", "2xl": "28px", "full": "9999px" },
  "spacing": { "base": "4px", "sm": "8px", "md": "16px", "lg": "24px", "xl": "32px", "2xl": "48px", "3xl": "64px", "4xl": "80px" },
  "shadow": {
    "none": "none",
    "xs": "0 1px 2px 0 rgba(0,0,0,0.04)",
    "sm": "0 1px 2px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.04)",
    "md": "0 0 0 1px rgba(0,0,0,0.06), 0 4px 12px 0 rgba(0,0,0,0.06)"
  },
  "motion": {
    "ease": "cubic-bezier(0.16, 1, 0.3, 1)",
    "durationFast": "140ms",
    "durationBase": "180ms",
    "durationSlow": "240ms"
  }
}

---
version: "1.0"
name: "ElevenLabs"
description: "Sistema visual de investigación de audio IA: canvas eggshell casi blanco, negro absoluto como tinta y CTA, tipografía grotesk alemana (Waldenburg) en pesos ligeros, y un acento coral cálido que aparece solo en momentos de producto. Minimalismo tech preciso, casi monocromático, con aire editorial."
colors:
  primary: "#000000"
  primary-hover: "#1C1C1C"
  primary-active: "#3D3D3D"
  secondary: "#FF885C"
  secondary-hover: "#FF6E3D"
  accent: "#FDE9BC"
  accent-soft: "#FFF9F5"
  neutral: "#767676"
  background: "#FDFCFC"
  surface: "#F5F3F1"
  surface-elevated: "#FFFFFF"
  surface-brand: "#FDE9BC"
  text-primary: "#000000"
  text-secondary: "#44403B"
  text-muted: "#767676"
  text-on-primary: "#FDFCFC"
  text-on-secondary: "#1C1C1C"
  border: "#E0DFDD"
  border-subtle: "#E5E5E5"
  success: "#022C20"
  success-bg: "#CEF8EF"
  warning: "#966812"
  warning-bg: "#FCFCEA"
  error: "#9C161C"
  error-bg: "#FEF3F2"
  info: "#0A59D2"
  info-bg: "#F2F5FC"
typography:
  display-lg:
    fontFamily: "Hanken Grotesk"
    fontSize: "48px"
    fontWeight: 700
    lineHeight: "100%"
    letterSpacing: "0em"
  display-md:
    fontFamily: "Hanken Grotesk"
    fontSize: "40px"
    fontWeight: 700
    lineHeight: "100%"
    letterSpacing: "0em"
  heading-lg:
    fontFamily: "Hanken Grotesk"
    fontSize: "36px"
    fontWeight: 300
    lineHeight: "105%"
    letterSpacing: "-0.03em"
  heading-md:
    fontFamily: "Hanken Grotesk"
    fontSize: "32px"
    fontWeight: 300
    lineHeight: "110%"
    letterSpacing: "-0.03em"
  heading-sm:
    fontFamily: "Hanken Grotesk"
    fontSize: "28px"
    fontWeight: 300
    lineHeight: "120%"
    letterSpacing: "-0.02em"
  body-lg:
    fontFamily: "Inter"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: "140%"
  body-md:
    fontFamily: "Inter"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "140%"
    letterSpacing: "0.01em"
  label-md:
    fontFamily: "Inter"
    fontSize: "14px"
    fontWeight: 400
    lineHeight: "140%"
    letterSpacing: "0.01em"
  description-lg:
    fontFamily: "Hanken Grotesk"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "130%"
    letterSpacing: "-0.02em"
rounded:
  sm: "4px"
  md: "8px"
  lg: "12px"
  xl: "20px"
  2xl: "28px"
  full: "9999px"
spacing:
  base: "4px"
  sm: "8px"
  md: "16px"
  lg: "24px"
  xl: "32px"
  2xl: "40px"
  3xl: "48px"
  4xl: "64px"
  5xl: "80px"
  gap: "20px"
  section-padding: "80px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.text-on-primary}"
    typography: "{typography.label-md}"
    rounded: "{rounded.full}"
    padding: "13px 22px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.secondary}"
    borderColor: "{colors.secondary}"
    rounded: "{rounded.full}"
    padding: "13px 22px"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.text-secondary}"
    rounded: "{rounded.full}"
    padding: "10px 16px"
  card:
    backgroundColor: "{colors.surface-elevated}"
    borderColor: "{colors.border}"
    rounded: "{rounded.xl}"
    padding: "24px"
---

# DESIGN.md - ElevenLabs

> Sistema de diseño extraído de `https://elevenlabs.io` (sitio de marketing, junio 2026) siguiendo el skill `url-inspiration-styleguide`.
> Valores observados del HTML + CSS del sitio (variables CSS nombradas, escalas tipográficas, recetas de componentes). Estados y colores semánticos no expuestos en el marketing se derivan de la familia real, marcados con `(derivado para completar el sistema)`.

---

## 1. Tema Visual y Atmósfera

ElevenLabs se siente como un laboratorio de investigación que decidió vestirse de editorial. El canvas no es blanco puro: es un eggshell tibio (`#FDFCFC`) que le quita la frialdad clínica al sistema y lo acerca a un papel de revista. Sobre ese casi-blanco cae un negro absoluto (`#000000`) con la confianza de quien no necesita gritar: titulares display pesados en negrita, headings de sección en peso ligero (300, casi susurrando), y un cuerpo de texto en Inter que se mantiene neutral y legible sin pedir protagonismo.

La personalidad está en la restricción. No hay gradientes, no hay blobs, no hay mesh-gradients. La profundidad viene de capas de superficie tibia (`#F5F3F1` para secciones, `#FFFFFF` para cards elevadas) y de sombras casi invisibles. El acento coral (`#FF885C`) aparece en franjas de producto puntuales, no como baño general: es el momento humano en un sistema que por lo demás se siente de ingeniería. Un acento crema cálido (`#FDE9BC`) acompaña al coral en bloques de marketing, dando un tono solar controlado.

La traducción digital debe conservar esa mezcla de precisión técnica y aire editorial: estructuras limpias, mucho margen, titulares cortos y contundentes en la grotesk alemana, cuerpo Inter discreto, y color usado como golpe puntual, nunca como relleno. Cuando el sistema se ve bien, parece el cruce entre una publiación de investigación, un producto SaaS premium y un carefolio de agencia mínima.

**Palabras clave de personalidad**: preciso, research-forward, editorial, monocromático, tibio, escultórico, minimal-tech

**Densidad del layout**: cómoda (mucho aire entre bloques, ritmo editorial)

**Modo preferido**: claro

**Nivel de ornamentación**: minimal (tipografía protagonista, color puntual, sin decoración superficial)

**Audiencia visual objetivo**: desarrolladores, equipos de producto y empresas que buscan IA de audio seria, no juguete consumer

---

## 2. Paleta de Colores y Roles Semánticos

La paleta real del sitio se organiza en tres gestos: un eggshell tibio como canvas, un negro absoluto como tinta y CTA, y una familia de acentos cálidos (coral, crema solar) que aparece solo en franjas de producto. Los neutros tibios (`#F5F3F1`, `#E0DFDD`, `#44403B`) sostienen el sistema sin introducir gris frío. La rampa blue y cyan del CSS pertenece al UI del producto (dashboards), no al marketing; se conserva como referencia semántica `info`.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Negro marca | `--color-primary` | `#000000` | CTA principal, titulares display, texto principal, iconos | `#FDFCFC` |
| Negro hover | `--color-primary-hover` | `#1C1C1C` | Hover del CTA y elementos interactivos oscuros (derivado de `--neutral-950`) | `#FDFCFC` |
| Negro activo | `--color-primary-active` | `#3D3D3D` | Pressed state del CTA (derivado de `--neutral-900`) | `#FDFCFC` |
| Coral acento | `--color-secondary` | `#FF885C` | Acento cálido de producto, franjas de marketing, highlights de sección | `#1C1C1C` |
| Coral hover | `--color-secondary-hover` | `#FF6E3D` | Hover del coral (derivado para completar el sistema) | `#1C1C1C` |
| Crema solar | `--color-accent` | `#FDE9BC` | Fondos promocionales tibios, badges suaves, bloques de apoyo | `#1C1C1C` |
| Crema clara | `--color-accent-soft` | `#FFF9F5` | Superficie cálida muy sutil, secciones de transición | `#1C1C1C` |

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Fondo base | `--color-bg` | `#FDFCFC` | Fondo general del sitio, `--eggshell` real del CSS |
| Superficie tibia | `--color-surface` | `#F5F3F1` | Secciones alternas, paneles, `--white-200` real del CSS |
| Superficie elevada | `--color-surface-elevated` | `#FFFFFF` | Cards, modales, popovers, `--white-50` real del CSS |
| Superficie de marca | `--color-surface-brand` | `#FDE9BC` | Franja de apoyo cálido, secciones destacadas de producto |
| Borde cálido | `--color-border` | `#E0DFDD` | Divisores tibios, inputs, bordes de card |
| Borde sutil | `--color-border-subtle` | `#E5E5E5` | Separación en tablas, chips, hairlines (`--neutral-100` real) |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto principal | `--color-text` | `#000000` | Headings, body, labels importantes, `--black` real del CSS |
| Texto secundario | `--color-text-secondary` | `#44403B` | Descripciones, captions, apoyo editorial tibio |
| Texto muted | `--color-text-muted` | `#767676` | Metadata, placeholders, notas largas (`--neutral-500` real) |
| Texto sobre negro | `--color-text-on-primary` | `#FDFCFC` | Texto sobre el CTA negro, usa eggshell para tono cálido |
| Texto sobre coral | `--color-text-on-secondary` | `#1C1C1C` | Texto sobre coral y crema, tinta oscura tibia |

### Colores de estado

> El sitio de marketing no expone estados formales (success/warning/error/info). Estos tonos se derivan de las familias cálidas y neutras reales para completar el sistema sin romper la paleta.

| Estado | Variable CSS | Hex | Texto |
|--------|-------------|-----|-------|
| Éxito | `--color-success` | `#022C20` | `#CEF8EF` |
| Éxito (bg) | `--color-success-bg` | `#CEF8EF` | `#022C20` |
| Advertencia | `--color-warning` | `#966812` | `#FCFCEA` |
| Advertencia (bg) | `--color-warning-bg` | `#FCFCEA` | `#966812` |
| Error | `--color-error` | `#9C161C` | `#FEF3F2` |
| Error (bg) | `--color-error-bg` | `#FEF3F2` | `#9C161C` |
| Info | `--color-info` | `#0A59D2` | `#F2F5FC` |
| Info (bg) | `--color-info-bg` | `#F2F5FC` | `#0A59D2` |

> Nota: `--color-info: #0A59D2` es un azul real del sitio (63 ocurrencias en inline styles), pertenece al UI del producto (rampas `--blue-*` del CSS) y se conserva aquí como semántico info por fidelidad.

---

## 3. Reglas de Tipografía

```css
/* Display + Headings: Waldenburg / WaldenburgFH (custom KMR, no Google) ->
   sustituto Google: Hanken Grotesk (neo-grotesk con misma masa y proporciones) */
--font-display: 'Hanken Grotesk', 'Waldenburg', system-ui, sans-serif;
--font-heading: 'Hanken Grotesk', 'Waldenburg', system-ui, sans-serif;

/* Body: Inter (fuente REAL del sitio, var(--font-inter)), se conserva por fidelidad */
--font-body: 'Inter', system-ui, sans-serif;

/* Mono: ui-monospace system stack del sitio -> sustituto Google: IBM Plex Mono */
--font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
```

**Google Fonts (sustitutos):**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;700;800&family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
```

**Nota sobre sustitución**: el sitio carga dos familias custom vía `@font-face` desde su CDN: **Waldenburg** (KMR Waldenburg, pesos 300 Buch-light, 400 Normal, 700 Fett-bold) para headings y descripciones, y **WaldenburgFH** (peso 700 únicamente) para el display grande del hero. Ninguna está en Google Fonts. `Hanken Grotesk` es el sustituto operativo: conserva la masa neutra de una neo-grotesk alemana, tiene pesos 300-800 para cubrir el rango real (incluido el 300 ligero distintivo de los headings de sección), y su leve calidez humana encaja con el canvas eggshell. **Inter** es la fuente real del body (`var(--font-inter)`, weights 400/500/600/700) y se conserva sin sustitución por fidelidad, aunque aparezca en listas de AI-slop: el sitio la usa de verdad. Para mono, el sitio declara un stack `ui-monospace` del sistema; se sustituye por `IBM Plex Mono` en Google Fonts para consistencia visual entre plataformas.

### Escala tipográfica

> Token · rem · px · line-height · peso · tracking · uso. Valores reales del CSS (`--f-display-*`, `--f-heading-*`, `--f-body-*`, `--f-description-*`).

| Token | rem | px equiv. | Line height | Weight | Tracking | Uso |
|-------|-----|-----------|-------------|--------|----------|-----|
| `--f-display-01` | 3rem | 48px | 100% | 700 | 0em | Hero headline (WaldenburgFH) |
| `--f-display-02` | 2.5rem | 40px | 100% | 700 | 0em | Display secundario (WaldenburgFH) |
| `--f-heading-01` | 2.25rem | 36px | 105% | 300 | -0.03em | Titular de sección (Waldenburg light) |
| `--f-heading-02` | 2rem | 32px | 110% | 300 | -0.03em | Subtítulo de bloque |
| `--f-heading-03` | 1.75rem | 28px | 120% | 300 | -0.02em | Subtítulo medio |
| `--f-heading-04` | 1.25rem | 20px | 130% | 400 | -0.01em | Título de card |
| `--f-heading-05` | 1.125rem | 18px | 135% | 400 | 0em | Título pequeño |
| `--f-description-01` | 1.125rem | 18px | 130% | 400 | -0.02em | Descripción display (Waldenburg) |
| `--f-body-01` | 1.0625rem | 17px | 140% | 400 | 0em | Body general (Inter) |
| `--f-description-02` | 1rem | 16px | 140% | 400 | 0.01em | Body secundario (Inter) |
| `--f-description-04` | 0.875rem | 14px | 140% | 400 | 0.01em | Label, caption (Inter) |
| `--f-description-05` | 0.875rem | 14px | 140% | 400 | 0.01em | Label fino (Inter) |

### Pesos tipográficos

```css
--font-light: 300;     /* Headings de sección (Waldenburg/Hanken Grotesk) */
--font-normal: 400;    /* Body, descripciones, labels */
--font-medium: 500;    /* Énfasis medio, nav links */
--font-bold: 700;      /* Display del hero, CTAs */
```

### Letter spacing

```css
--tracking-tight: -0.03em;   /* Headings ligeros (distintivo de la marca) */
--tracking-snug: -0.02em;    /* Descripciones display */
--tracking-normal: 0em;      /* Body, display grande */
--tracking-wide: 0.01em;     /* Labels, body secundario */
```

**Regla clave**: los headings de sección van en peso 300 (ligero), no en bold. El contraste tipográfico se logra cambiando peso (display 700 vs heading 300), no subiendo tamaño indefinidamente. El cuerpo en Inter nunca compite con el headline; la marca gana por contraste de peso y por aire, no por densidad.

---

## 4. Estilos de Componentes

### Botones

**Primario (CTA negro, pill)**
```
Background: var(--color-primary) -> #000000
Color de texto: var(--color-text-on-primary) -> #FDFCFC
Padding: 13px 22px
Border-radius: var(--radius-full) -> 9999px (pill)
Font-family: var(--font-body) -> Inter
Font-weight: 500
Font-size: 14px
Letter-spacing: 0.01em
Transicion: background-color 180ms ease, transform 180ms ease

Hover:
  Background: var(--color-primary-hover) -> #1C1C1C
  Transform: translateY(-1px)

Active/Pressed:
  Background: var(--color-primary-active) -> #3D3D3D
  Transform: translateY(0)

Disabled:
  Background: var(--color-primary)
  Opacity: 0.4
  Cursor: not-allowed

Focus:
  Outline: 2px solid var(--color-secondary)
  Outline-offset: 3px
```

> Receta real del sitio: el CTA "Sign up" del nav es un pill negro sólido con texto eggshell, confirmado por muestreo de pixeles del hero (x=2472-2604, y=60-95 en captura 2x retina).

**Secundario (outline coral)**
```
Background: transparent
Color de texto: var(--color-secondary) -> #FF885C
Border: 1.5px solid color-mix(in srgb, var(--color-secondary) 45%, transparent)
Border-radius: var(--radius-full) -> 9999px
Padding: 13px 22px

Hover:
  Background: rgba(255, 136, 92, 0.08)
  Border-color: var(--color-secondary)
  Transform: translateY(-1px)
```

**Ghost / Texto**
```
Background: transparent
Color: var(--color-text-secondary) -> #44403B
Border: none
Padding: 10px 16px
Border-radius: var(--radius-full)

Hover:
  Color: var(--color-text) -> #000000
```

**Destructivo** (derivado para completar el sistema)
```
Background: var(--color-error) -> #9C161C
Color: var(--color-error-bg) -> #FEF3F2
Border-radius: var(--radius-full)
Padding: 13px 22px
```

### Inputs de texto

```
Background: var(--color-surface-elevated) -> #FFFFFF
Border: 1px solid var(--color-border) -> #E0DFDD
Border-radius: var(--radius-xl) -> 20px
Padding: 12px 16px
Font-family: var(--font-body) -> Inter
Font-size: 15px
Color: var(--color-text) -> #000000
Placeholder: var(--color-text-muted) -> #767676

Hover:
  Border-color: var(--color-border-subtle) -> #E5E5E5

Focus:
  Border-color: var(--color-primary) -> #000000
  Box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06)
  Outline: none

Error:
  Border-color: var(--color-error) -> #9C161C
  Box-shadow: 0 0 0 3px rgba(156, 22, 28, 0.10)

Disabled:
  Background: var(--color-surface) -> #F5F3F1
  Opacity: 0.6
```

### Cards

```
Background: var(--color-surface-elevated) -> #FFFFFF
Border: 1px solid var(--color-border) -> #E0DFDD
Border-radius: var(--radius-xl) -> 20px
Padding: 24px
Box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04), 0 2px 4px 0 rgba(0,0,0,0.04)

Hover (si es clickeable):
  Transform: translateY(-2px)
  Box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 4px 12px 0 rgba(0,0,0,0.06)
```

> El `border-radius: 20px` es el valor más frecuente del sitio (24 ocurrencias en el CSS), usado en cards, inputs y bloques de superficie.

### Badges / Chips

```
Padding: 5px 11px
Border-radius: var(--radius-full)
Font-family: var(--font-body) -> Inter
Font-size: 12px
Font-weight: 500
Letter-spacing: 0.01em

Default:
  Background: var(--color-surface-brand) -> #FDE9BC
  Color: var(--color-text-on-secondary) -> #1C1C1C

Dark:
  Background: var(--color-primary) -> #000000
  Color: var(--color-text-on-primary) -> #FDFCFC

Coral:
  Background: var(--color-secondary) -> #FF885C
  Color: var(--color-text-on-secondary) -> #1C1C1C
```

### Alertas / Toasts (derivados para completar el sistema)

```
Padding: 16px 20px
Border-radius: var(--radius-lg) -> 12px
Border-left: 4px solid currentColor
Font-family: var(--font-body) -> Inter
Font-size: 14px

Success: background var(--color-success-bg), color var(--color-success)
Warning: background var(--color-warning-bg), color var(--color-warning)
Error:   background var(--color-error-bg), color var(--color-error)
Info:    background var(--color-info-bg), color var(--color-info)
```

### Navegación / Header

```
Background: rgba(253, 252, 252, 0.92)  -> eggshell con transparencia
Backdrop-filter: blur(12px)
Border-bottom: 1px solid var(--color-border-subtle) -> #E5E5E5
Height: 64px (128px en captura 2x retina)
Padding horizontal: 24px

Logo:
  Negro sólido (#000000), peso 700, display grotesk

Links de nav:
  Color: var(--color-text-secondary) -> #44403B
  Font-family: var(--font-body) -> Inter
  Font-size: 14px
  Font-weight: 500
  Hover: Color var(--color-text) -> #000000
  Active: Color var(--color-text), font-weight 600

CTA del nav:
  Pill negro, texto eggshell, 13px 22px (ver botón primario)
```

---

## 5. Principios de Layout

### Escala de espaciado

```css
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;
--space-12: 48px;
--space-16: 64px;
--space-20: 80px;
--space-24: 96px;
```

> Base de 4px (múltiplos de 4). El padding de sección predominante es 80px, con 96px en franjas full-bleed de producto.

### Contenedores

```css
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1080px;
--container-xl: 1280px;
--container-max: 1304px;  /* 81.5rem, observado en --container-width-absolute */
```

### Grid

```
Sistema: 12 columnas
Gutter: 24px
Margin lateral: 16px en mobile, 24px en tablet, auto en desktop
Patrones base: hero a una columna con titular display centrado o alineado a la izquierda,
franjas full-bleed de producto con bloque de copy + bloque visual, mosaicos 3xN para
secciones de características, y bandas de color cálido (coral/crema) que rompen el ritmo
eggshell sin saturar.
```

### Filosofía de espaciado

ElevenLabs necesita aire para que la tipografía grotesk y los titulares display respiren. No es una marca de dashboards densos: el espacio sirve para que cada titular ligero (300) se lea como una decisión editorial, no como ruido. Alterna secciones eggshell con paneles tibios (`#F5F3F1`) y franjas cálidas (coral/crema) en momentos de producto; ese cambio de ritmo y temperatura es parte del lenguaje, no solo decoración. El vertical rhythm es generoso: 80px entre secciones, 24-32px entre bloques dentro de una sección.

---

## 6. Profundidad y Elevación

La marca es **flat-first**. Su sensación premium no viene de sombras dramáticas ni glassmorphism, sino de la tipografía precisa, el contraste negro-sobre-eggshell y las capas de superficie tibia. Las sombras son casi invisibles: hairlines tibias y elevaciones de 1-4px con opacidad muy baja.

### Sistema de sombras

```css
--shadow-none: none;
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04), 0 2px 4px 0 rgba(0, 0, 0, 0.04);
--shadow-md: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 4px 12px 0 rgba(0, 0, 0, 0.06);
--shadow-lg: 0 24px 40px -12px rgba(0, 0, 0, 0.12);
```

> Las sombras `xs` y `sm` son recetas reales del CSS del sitio (8 y 5 ocurrencias respectivamente, con la firma `0 1px 1px rgb(0 0 0 / 0.04), 0 2px 4px rgb(0 0 0 / 0.04)`). `md` y `lg` se derivan para completar el sistema.

### Niveles de elevación

| Nivel | Token de sombra | Uso |
|-------|----------------|-----|
| 0 - Base | `--shadow-none` | Secciones de color, franjas editoriales, fondos |
| 1 - Raised | `--shadow-xs` | Inputs, botones sobre superficie |
| 2 - Card | `--shadow-sm` | Cards informativas, paneles |
| 3 - Floating | `--shadow-md` | Popovers, dropdowns, mini modals |
| 4 - Hero spotlight | `--shadow-lg` | Producto destacado, modal grande (derivado) |

### Radios de borde

```css
--radius-none: 0px;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 20px;   /* radio predominante, 24 ocurrencias en el CSS */
--radius-2xl: 28px;
--radius-full: 9999px;  /* CTA, badges, chips */
```

El radio predominante es `20px`: suficientemente suave para dialogar con el tono editorial y tibio, pero sin volverse infantil. Reserva el pill completo (`9999px`) para CTA y badges, y `28px` para bloques grandes y hero cards. El sistema evita radios mixtos aleatorios: cada radio tiene un rol.

---

## 7. Lo que Sí y lo que No

### Sí hacer

1. **Usa negro absoluto como CTA y titular display** - es el gesto de marca más reconocible; el pill negro sobre eggshell organiza toda la jerarquía visual.
2. **Mantén los headings de sección en peso 300 (ligero)** - el contraste entre display 700 y heading 300 es la firma tipográfica de la marca, no un error.
3. **Deja mucho aire entre secciones (80px+)** - la grotesk alemana necesita respirar; el espacio es parte del mensaje de precisión research-forward.
4. **Usa el coral `#FF885C` solo en momentos de producto** - franjas de marketing, highlights de sección, nunca como baño general; pierde fuerza si se riega.
5. **Apoya el sistema con superficies tibias (`#F5F3F1`, `#FDE9BC`)** - el calor sutil diferencia el sistema de un blanco-frío genérico y lo acerca a editorial.
6. **Usa Inter para body y Hanken Grotesk (sustituto de Waldenburg) para todo lo display** - dos familias con roles claros: la grotesk habla, Inter explica.

### No hacer

1. **No introduzcas grises fríos ni azules corporativos en el marketing** - rompen el calor tibio del sistema eggshell; el azul `#0A59D2` es solo para UI del producto.
2. **No uses sombras dramáticas ni glassmorphism** - la identidad es flat-first; la profundidad viene de capas de superficie y hairlines, no de blur pesado.
3. **No pongas titulares de sección en bold** - el peso 300 ligero es distintivo; subirlo a bold aplana la jerarquía y borra la firma editorial.
4. **No llenes el canvas de gradientes, blobs o mesh suaves** - el sistema es escultórico por restricción; un halo o degradado genérico destruye el minimalismo.
5. **No mezcles radios aleatoriamente** - 20px para cards/inputs, pill para CTA, 28px para hero blocks; la consistencia del radio es parte del lenguaje preciso.
6. **No uses tipografía decorativa, script ni serif de lujo** - la marca es una neo-grotesk alemana; cualquier adorno tipográfico la saca de su territorio research-forward.

---

## 8. Comportamiento Responsive

### Breakpoints

```css
/* Mobile first */
/* sm: */ @media (min-width: 640px) { }
/* md: */ @media (min-width: 768px) { }
/* lg: */ @media (min-width: 1024px) { }
/* xl: */ @media (min-width: 1280px) { }
```

> El CSS del sitio declara `--breakpoint: "sm"` y usa media queries en rem (`@media (min-width: 37.5rem)` = 600px para ajustes de tipografía). Los breakpoints principales siguen la convención Tailwind.

### Cambios por breakpoint

**Mobile (< 640px)**
- Navegación: logo + menú hamburguesa, CTA pill compacto
- Grid: 1 columna
- Display H1: 40px (display-02), no 48px
- Heading de sección: 28px (heading-03)
- Padding de contenedor: 16px
- Franjas de producto: apiladas, visual debajo de copy
- Touch targets: mínimo 44x44px

**Tablet (640px - 1024px)**
- Navegación: logo + links primarios visibles + CTA
- Grid: 2 columnas para producto + copy, 3 columnas para mosaicos
- Display H1: 48px (display-01)
- Padding de contenedor: 24px

**Desktop (> 1024px)**
- Navegación: full nav visible, links con hover sutil
- Grid: 3-4 columnas en galerías, hero a una columna con titular display, franjas full-bleed
- Display H1: 48px (display-01), capaz de crecer a 64px+ en hero editorial
- Padding de contenedor: auto con `max-width: 1304px`
- Sección padding: 80px vertical

### Touch targets (mobile)

- Botones mínimo: 44x44px (el pill CTA con 13px 22px de padding cumple)
- Links de navegación: altura mínima 44px
- Inputs: altura mínima 44px (12px 16px de padding + 15px font cumple)
- Iconos interactivos: hitbox mínimo 44x44px

### Filosofía responsive

Mobile-first, pero con ambición editorial. En pequeño formato la marca debe seguir sintiéndose como research publication, no como ficha de producto recortada. Prioriza un titular display contundente, un bloque de copy claro y un CTA pill negro por viewport. Las franjas cálidas (coral/crema) se apilan sin perder su carácter de golpe puntual.

---

## 9. Guía de Prompts para Agentes

### Prompt de inicialización de sesión

```text
Estás trabajando con el sistema de diseño de ElevenLabs.

PALETA: Canvas eggshell #FDFCFC, tinta negro absoluto #000000, superficie tibia #F5F3F1.
El CTA es un pill negro con texto eggshell. El acento coral #FF885C aparece solo en
momentos de producto, nunca como baño. Crema solar #FDE9BC para bloques cálidos.
TIPOGRAFÍA: Display + headings en Hanken Grotesk (sustituto de Waldenburg custom).
Headings de sección en peso 300 (ligero). Display del hero en 700. Body en Inter.
ESTILO: Minimal-tech, research-forward, editorial, monocromático con calor sutil.
Flat-first, sombras casi invisibles, mucho aire (80px entre secciones).
TOKENS: Usa siempre variables CSS; no hardcodees colores fuera del sistema.
MODO: Claro.
```

### Prompt: Crear nueva pantalla

```text
Crea una pantalla de [FUNCIONALIDAD] para ElevenLabs.

Requisitos:
- Debe sentirse como research publication premium, no como SaaS genérico
- Usa fondo eggshell #FDFCFC y deja que el negro #000000 sea el gesto principal (CTA pill, titulares)
- Titulares de sección en Hanken Grotesk peso 300 (ligero), no bold
- Mucho aire entre bloques (32-80px), ritmo editorial
- Si incluye color cálido, úsalo solo en una franja o bloque de producto (coral #FF885C o crema #FDE9BC)
- Responsive, con CTA principal pill negro
```

### Prompt: Añadir componente al UI kit

```text
Añade un componente de [TIPO] al sistema de ElevenLabs.

Debe:
- Usar solo tokens del DESIGN.md de ElevenLabs
- Mantener radios de 20px para cards/inputs, pill (9999px) para CTA y badges
- Tener versión default, hover, active, focus y disabled
- Sentirse preciso y editorial, no corporativo ni juguetón
- Sombras casi invisibles (flat-first), border tibio #E0DFDD
```

### Prompt: Revisión de consistencia

```text
Revisa esta interfaz y detecta qué no sigue el sistema de ElevenLabs.

Verifica:
1. Si el CTA es un pill negro con texto eggshell (no azul, no coral)
2. Si los headings de sección están en peso 300 (ligero), no bold
3. Si la interfaz conserva aire editorial (80px entre secciones)
4. Si los colores cálidos aparecen solo en momentos puntuales, no como baño
5. Si hay elementos demasiado fríos, genéricos o enterprise (grises azulados, sombras dramáticas)
```

### Prompt: Variante de campaña

```text
Genera una variante [producto / temporada / promo] para ElevenLabs manteniendo el sistema base.

Conserva:
- Negro absoluto #000000 como CTA y titulares
- Canvas eggshell #FDFCFC
- Hanken Grotesk peso 300 para headings de sección
- Flat-first, mucho aire

Puedes variar:
- El acento cálido entre coral #FF885C, crema #FDE9BC o un tono derivado de la familia solar
- El balance entre franjas de color y superficies eggshell
- El bloque visual de producto (captura, ilustración técnica, waveform)
```

---

## 10. Movimiento (Motion)

El sitio de marketing de ElevenLabs usa motion sutil y controlado: no hay animaciones cinematográficas pesadas. El movimiento apoya la lectura editorial, no la compite. La entrada de página es orquestada con reveals escalonados (titular, lede, flags, captura del hero), y los bloques aparecen con un fade-up corto al hacer scroll. Los hovers de botón son un micro-lift de 1-2px con cambio de color directo.

**Nivel de motion**: sutil

**Duraciones**: 140ms (fast, hover), 180ms (base, transiciones de color), 240ms (slow, fade-up de scroll reveal), 900ms (entrada orquestada del hero)

**Easings**: `ease-out`, `cubic-bezier(0.16, 1, 0.3, 1)` (ease suave de salida, usado en reveals)

**Propiedades animadas**: opacity, transform (translateY), background-color, color, filter

**Patrones de motion**:
- Entrada escalonada del hero con `animation-delay` (0.05s, 0.15s, 0.25s, 0.35s)
- Scroll reveal por sección (fade-up 26px, 800ms)
- Ken-burns lento en la captura del hero (26s, alternate, scale 1 -> 1.07)
- Micro-lift en hover de botones (translateY -1px o -2px)
- Cambio de color directo en links y badges (sin desplazamiento)

```css
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
--ease-out: ease-out;
--duration-fast: 140ms;
--duration-base: 180ms;
--duration-slow: 240ms;
--duration-reveal: 800ms;
--duration-entrance: 900ms;
```

> **Accesibilidad**: respeta `@media (prefers-reduced-motion: reduce)` y reduce todos los gestos a cambios de color sin desplazamiento. El ken-burns del hero y los reveals escalonados se desactivan; el contenido aparece estático.

---

## Anexo: Stack técnico detectado

- **Plataforma / builder**: Next.js (App Router, `data-dpl-id` y chunks `_next/static/` visibles en el HTML), desplegado con Vercel/Deploys (parámetro `?dpl=` en assets)
- **Framework CSS**: Tailwind CSS con prefijo custom (`tw-` en clases, variables `--tw-*` en inline styles), CSS-first con variables semánticas (`--f-display-*`, `--f-heading-*`, `--color-*` ramps)
- **Tipografía**: dos familias custom self-hosted vía `@font-face` desde `eleven-public-cdn.elevenlabs.io`: **KMR Waldenburg** (pesos 300/400/700, latin) y **WaldenburgFH** (peso 700). Body en **Inter** cargado desde Google Fonts o self-hosted. Mono: stack `ui-monospace` del sistema.
- **Animación**: no se detectaron librerías de motion pesadas (GSAP, Framer, Lottie) en el HTML del marketing. El motion es CSS-first (transitions y `@keyframes`), consistente con el tono minimal-tech.
- **3D / WebGL / Three.js**: no detectado en el marketing.
- **CDN / assets**: `eleven-public-cdn.elevenlabs.io` para fuentes y assets estáticos.
- **Comportamiento**: sitio de marketing de producto AI audio, estructura editorial de una columna con franjas full-bleed de producto, nav sticky con backdrop-filter, y secciones de research/empresa al final.