Beeble

:root {
  /* color */
  --color-primary: #00D084;
  --color-primary-hover: #00B873;
  --color-primary-active: #008C5A;
  --color-secondary: #000000;
  --color-accent: #FBD315;
  --color-accent-mint: #A1EABF;
  --color-background: #00D084;
  --color-surface: #000000;
  --color-surface-void: #121814;
  --color-surface-forest: #022116;
  --color-surface-paper: #F5F5F5;
  --color-text-primary: #000000;
  --color-text-secondary: #005939;
  --color-text-muted: #008C5A;
  --color-text-on-dark: #00D084;
  --color-text-on-primary: #000000;
  --color-text-inverse: #F5F5F5;
  --color-border: #000000;
  --color-border-forest: #005939;
  --color-shadow-green: #008C5A;
  --color-shadow-ink: #04291E;
  --color-success: #00B873;
  --color-success-bg: #A1EABF;
  --color-warning: #FBD315;
  --color-info: #008C5A;
  --color-info-bg: #022116;

  /* type */
  --font-display: "Poppins";
  --font-body: "Poppins";
  --font-mono: "Space Mono";
  --font-label: "Space Grotesk";
  --font-numeral: "PT Mono";
  --tracking-hero: -0.05em;
  --tracking-display: -0.02em;
  --tracking-numeral: -0.04em;
  --tracking-label: 0.02em;

  /* shape: el sistema no tiene radios */
  --radius-none: 0;
  --radius-control: 0;
  --radius-card: 0;

  /* elevación: sombra dura, blur 0, spread 0 */
  --shadow-button: 5px 5px 0 0 #008C5A;
  --shadow-button-lift: 8px 8px 0 0 #008C5A;
  --shadow-card: 6px 6px 0 0 #121814;
  --shadow-card-forest: 6px 6px 0 0 #04291E;
  --shadow-frame: 10px 10px 0 0 #008C5A;

  /* spacing */
  --space-base: 4px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-section: 80px;
  --space-section-lg: 120px;
}

@theme {
  --color-primary: #00D084;
  --color-primary-hover: #00B873;
  --color-primary-active: #008C5A;
  --color-secondary: #000000;
  --color-accent: #FBD315;
  --color-accent-mint: #A1EABF;
  --color-background: #00D084;
  --color-surface: #000000;
  --color-surface-void: #121814;
  --color-surface-forest: #022116;
  --color-surface-paper: #F5F5F5;
  --color-text-primary: #000000;
  --color-text-secondary: #005939;
  --color-text-muted: #008C5A;
  --color-text-on-dark: #00D084;
  --color-text-inverse: #F5F5F5;
  --color-border: #000000;
  --color-shadow-green: #008C5A;
  --color-shadow-ink: #04291E;
  --color-success: #00B873;
  --color-warning: #FBD315;
  --color-info: #008C5A;

  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Poppins", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;
  --font-label: "Space Grotesk", system-ui, sans-serif;
  --font-numeral: "PT Mono", ui-monospace, monospace;

  --radius-none: 0px;
  --radius-control: 0px;
  --radius-card: 0px;

  --shadow-button: 5px 5px 0 0 #008C5A;
  --shadow-button-lift: 8px 8px 0 0 #008C5A;
  --shadow-card: 6px 6px 0 0 #121814;
  --shadow-frame: 10px 10px 0 0 #008C5A;

  --spacing-base: 4px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 48px;
  --spacing-section: 80px;
  --spacing-section-lg: 120px;
}

{
  "colors": {
    "primary": "#00D084",
    "primary-hover": "#00B873",
    "primary-active": "#008C5A",
    "secondary": "#000000",
    "accent": "#FBD315",
    "accent-mint": "#A1EABF",
    "background": "#00D084",
    "surface": "#000000",
    "surface-void": "#121814",
    "surface-forest": "#022116",
    "surface-paper": "#F5F5F5",
    "text-primary": "#000000",
    "text-secondary": "#005939",
    "text-muted": "#008C5A",
    "text-on-dark": "#00D084",
    "text-on-primary": "#000000",
    "text-inverse": "#F5F5F5",
    "border": "#000000",
    "border-forest": "#005939",
    "shadow-green": "#008C5A",
    "shadow-ink": "#04291E",
    "success": "#00B873",
    "success-bg": "#A1EABF",
    "warning": "#FBD315",
    "error": "#FF4D2E",
    "info": "#008C5A",
    "info-bg": "#022116"
  },
  "typography": {
    "numeral": {
      "fontFamily": "PT Mono",
      "fontSize": "150px",
      "fontWeight": "400",
      "lineHeight": "1",
      "letterSpacing": "-6px"
    },
    "display": {
      "fontFamily": "Poppins",
      "fontSize": "76px",
      "fontWeight": "500",
      "lineHeight": "1",
      "letterSpacing": "-1.52px"
    },
    "hero": {
      "fontFamily": "Poppins",
      "fontSize": "64px",
      "fontWeight": "400",
      "lineHeight": "0.9",
      "letterSpacing": "-3.2px",
      "textTransform": "uppercase"
    },
    "h2": {
      "fontFamily": "Poppins",
      "fontSize": "48px",
      "fontWeight": "500",
      "lineHeight": "1",
      "letterSpacing": "-0.96px",
      "textTransform": "uppercase"
    },
    "lead": {
      "fontFamily": "Poppins",
      "fontSize": "18px",
      "fontWeight": "400",
      "lineHeight": "1.3",
      "letterSpacing": "-0.18px"
    },
    "body": {
      "fontFamily": "Poppins",
      "fontSize": "15px",
      "fontWeight": "400",
      "lineHeight": "1.3"
    },
    "ui": {
      "fontFamily": "Poppins",
      "fontSize": "13px",
      "fontWeight": "600",
      "lineHeight": "1.2",
      "letterSpacing": "-0.13px"
    },
    "mono": {
      "fontFamily": "Space Mono",
      "fontSize": "15px",
      "fontWeight": "400",
      "lineHeight": "1.3"
    },
    "label": {
      "fontFamily": "Space Grotesk",
      "fontSize": "11px",
      "fontWeight": "500",
      "lineHeight": "1.2",
      "letterSpacing": "0.22px",
      "textTransform": "uppercase"
    }
  },
  "rounded": {
    "none": "0",
    "control": "0",
    "card": "0",
    "frame": "0"
  },
  "shadow": {
    "button": "5px 5px 0 0 #008C5A",
    "button-lift": "8px 8px 0 0 #008C5A",
    "card": "6px 6px 0 0 #121814",
    "card-forest": "6px 6px 0 0 #04291E",
    "frame": "10px 10px 0 0 #008C5A",
    "none": "none"
  },
  "spacing": {
    "base": "4px",
    "xs": "4px",
    "sm": "8px",
    "md": "12px",
    "lg": "16px",
    "xl": "24px",
    "2xl": "32px",
    "3xl": "48px",
    "section": "80px",
    "section-lg": "120px"
  }
}

---
version: "1.0"
name: "Beeble"
description: "Sistema visual de Beeble (video AI / VFX): verde spring #00D084 a pantalla completa como fondo dominante, negro puro #000000 como tinta, y una arquitectura de cajas rectas sin un solo border-radius. La decisión que define el sistema es la sombra dura desplazada (0px de blur, offset de 5 a 10px en verde profundo #008C5A o en negro humo #121814): profundidad de serigrafía, no de Material. Poppins para display y UI, Space Mono para labels técnicos, PT Mono a 150px para los numerales de sección. Brutalismo alegre, alto voltaje, laboratorio de VFX."
source: "https://beeble.ai"
theme: "light"
color-family: "green"
sections: "Colores Vibrantes, Creativo, Dirección de Arte"
colors:
  primary: "#00D084"
  primary-hover: "#00B873"
  primary-active: "#008C5A"
  primary-deep: "#008C5A"
  secondary: "#000000"
  accent: "#FBD315"
  accent-mint: "#A1EABF"
  neutral: "#121814"
  background: "#00D084"
  surface: "#000000"
  surface-void: "#121814"
  surface-forest: "#022116"
  surface-paper: "#F5F5F5"
  surface-alert: "#FBD315"
  text-primary: "#000000"
  text-secondary: "#005939"
  text-muted: "#008C5A"
  text-on-dark: "#00D084"
  text-on-dark-muted: "#008C5A"
  text-on-primary: "#000000"
  text-on-accent: "#000000"
  text-inverse: "#F5F5F5"
  border: "#000000"
  border-forest: "#005939"
  shadow-green: "#008C5A"
  shadow-ink: "#04291E"
  shadow-void: "#121814"
  success: "#00B873"
  success-bg: "#A1EABF"
  warning: "#FBD315"
  warning-bg: "#FFF3B8"
  error: "#FF4D2E"
  error-bg: "#FFDCD4"
  info: "#008C5A"
  info-bg: "#022116"
typography:
  display-hero:
    fontFamily: "Poppins"
    fontSize: "64px"
    fontWeight: 400
    lineHeight: "57.6px"
    letterSpacing: "-3.2px"
    textTransform: "uppercase"
  display-product:
    fontFamily: "Poppins"
    fontSize: "76px"
    fontWeight: 500
    lineHeight: "76px"
    letterSpacing: "-1.52px"
  numeral:
    fontFamily: "PT Mono"
    fontSize: "150px"
    fontWeight: 400
    lineHeight: "150px"
    letterSpacing: "-6px"
  h2:
    fontFamily: "Poppins"
    fontSize: "48px"
    fontWeight: 500
    lineHeight: "48px"
    letterSpacing: "-0.96px"
    textTransform: "uppercase"
  lead:
    fontFamily: "Poppins"
    fontSize: "18px"
    fontWeight: 400
    lineHeight: "23.4px"
    letterSpacing: "-0.18px"
  body:
    fontFamily: "Poppins"
    fontSize: "15px"
    fontWeight: 400
    lineHeight: "19.5px"
    letterSpacing: "normal"
  ui:
    fontFamily: "Poppins"
    fontSize: "13px"
    fontWeight: 600
    lineHeight: "15.6px"
    letterSpacing: "-0.13px"
  mono-lead:
    fontFamily: "Space Mono"
    fontSize: "24px"
    fontWeight: 400
    lineHeight: "24px"
    letterSpacing: "-0.48px"
  mono:
    fontFamily: "Space Mono"
    fontSize: "15px"
    fontWeight: 400
    lineHeight: "19.5px"
    letterSpacing: "normal"
  label:
    fontFamily: "Space Grotesk"
    fontSize: "11px"
    fontWeight: 500
    lineHeight: "13.2px"
    letterSpacing: "0.22px"
rounded:
  none: "0"
  control: "0"
  card: "0"
  frame: "0"
spacing:
  base: "4px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  section: "80px"
  section-lg: "120px"
  gap: "12px"
shadow:
  button: "5px 5px 0 0 #008C5A"
  button-lift: "8px 8px 0 0 #008C5A"
  card: "6px 6px 0 0 #121814"
  card-forest: "6px 6px 0 0 #04291E"
  frame: "10px 10px 0 0 #008C5A"
  none: "none"
components:
  button-primary:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.primary}"
    typography: "{typography.ui}"
    rounded: "{rounded.none}"
    padding: "18px 40px"
    boxShadow: "{shadow.button}"
    textTransform: "uppercase"
  button-accent:
    backgroundColor: "{colors.accent}"
    textColor: "{colors.text-on-accent}"
    rounded: "{rounded.none}"
    padding: "18px 40px"
    boxShadow: "{shadow.card}"
  button-outline:
    backgroundColor: "transparent"
    textColor: "{colors.text-primary}"
    borderColor: "{colors.border}"
    rounded: "{rounded.none}"
    padding: "16px 38px"
  card:
    backgroundColor: "{colors.surface-void}"
    textColor: "{colors.text-on-dark}"
    borderColor: "{colors.border}"
    rounded: "{rounded.none}"
    padding: "28px"
    boxShadow: "{shadow.frame}"
  input:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.text-primary}"
    borderColor: "{colors.border}"
    rounded: "{rounded.none}"
    padding: "16px 18px"
---

# DESIGN.md - Beeble

> Sistema de diseño extraído de `https://beeble.ai` (home, julio 2026) siguiendo el skill `url-inspiration-styleguide`.
> Colores, familias tipográficas, tamaños, radios y sombras medidos sobre el DOM computado del sitio en vivo (framer, sin `:root` de tokens públicos). Todo lo que el sitio no expone y hubo que completar va marcado como *(derivado para completar el sistema)*.

---

## 1. Tema Visual y Atmósfera

Beeble no atenúa nada. El fondo del `body` es `rgb(0, 208, 132)`, un verde spring de saturación total, y ocupa la pantalla entera sin degradado, sin ruido, sin viñeta. Encima va negro puro, `rgb(0, 0, 0)`, que en cualquier otro sistema sería un error de gusto y aquí es la única tinta posible: sobre ese verde, el negro rinde 10.4:1, el blanco se queda en 2.0:1. La marca no eligió el negro por dureza, lo eligió porque es lo único que se lee.

El segundo hallazgo es la ausencia. En todo el barrido de elementos principales no aparece **un solo `border-radius` distinto de `0px`**. Botones, cards, frames de video, el badge del anuncio: todo es caja recta. La profundidad tampoco viene de blur: las cuatro sombras reales detectadas son `5px 5px 0px 0px`, `6px 6px 0px 0px` y `10px 10px 0px 0px`, todas con blur cero, en verde profundo `#008C5A` o en negro humo `#121814`. Es la lógica de la serigrafía: la caja no flota, está pegada a la pared y proyecta un bloque sólido. El botón START FREE del hero lo resume: rectángulo negro, texto verde, un bloque de sombra desplazado en diagonal.

La tercera capa es el contrapunto oscuro. Cuando el sitio pasa a producto (Canvas, SwitchX), el verde se retira al rol de tinta y el fondo baja a `#121814` o `#022116`, con los titulares en `#00D084` a 76px y el cuerpo en `#008C5A`. El mismo sistema, invertido. Y arriba de todo, la barra de anuncio en amarillo `#FBD315`, el único color que no pertenece a la familia verde, usada exactamente una vez.

Tipográficamente hay tres voces y ninguna decorativa. **Poppins** sostiene display, titulares y UI (más de 150 nodos), con tracking muy negativo en los tamaños grandes (`-3.2px` a 64px, es decir `-0.05em`). **Space Mono** ocupa los labels técnicos, las notas al pie y el ticker del anuncio. Y **PT Mono** aparece una sola vez pero decide el ritmo de la página: los numerales de sección (`01`, `02`, `03`) a **150px con `letter-spacing: -6px`**. Un contador de laboratorio, no una decoración.

**Palabras clave de personalidad**: brutalista, alegre, alto voltaje, técnico, ácido, laboratorio, VFX, sin filtro

**Densidad del layout**: alta en los bloques de producto (mono denso, listas de 15px), muy aireada en el hero (el verde vacío es contenido)

**Modo preferido**: claro (el fondo dominante `#00D084` rinde luminancia relativa 0.47 y pide tinta negra; los bloques oscuros son secciones, no el tema)

**Nivel de ornamentación**: cero ornamento, máximo gesto. La única "decoración" del sistema es la sombra dura y la escala del numeral

**Audiencia visual objetivo**: artistas de VFX, supervisores de post y estudios que evalúan una herramienta por su control, no por su suavidad. El sitio ganó un Webby 2026 y lo dice en Poppins 15px, sin fanfarria

---

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

Una sola familia (verde) recorrida de punta a punta, negro puro como tinta y estructura, y un amarillo que aparece una vez. No hay grises: los "neutros" del sistema son verdes desaturados hacia el negro.

### Colores de marca

| Nombre | Variable CSS | Hex | Rol | Texto sobre él |
|--------|-------------|-----|-----|----------------|
| Spring (verde Beeble) | `--color-primary` | `#00D084` | Fondo dominante del sitio (score 25.9M, el valor computado del `body`), tinta de titulares sobre oscuro | `#000000` |
| Negro puro | `--color-secondary` | `#000000` | Texto, borde, fondo de botón primario, fondo de sección (score 13.3M) | `#00D084` |
| Verde profundo | `--color-primary-deep` | `#008C5A` | Color de la sombra dura, texto secundario sobre oscuro, fondo de botón interno | `#000000` |
| Emerald | `--color-primary-hover` | `#00B873` | Estado intermedio de la rampa, hover del verde | `#000000` |
| Amarillo alerta | `--color-accent` | `#FBD315` | Barra de anuncio superior. Un uso en toda la home | `#000000` |

> **La regla del verde**: `#00D084` no es un acento, es el aire. Ocupa la superficie. Cuando el fondo baja a oscuro, el verde no desaparece: cambia de rol y se convierte en la tinta de los titulares. Es el mismo color haciendo los dos trabajos, y por eso el sistema se sostiene con una sola familia.

### Colores de superficie

| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Canvas spring | `--color-background` | `#00D084` | Fondo del `body`, hero, secciones de marca |
| Negro | `--color-surface` | `#000000` | Botones primarios, franjas de corte, bordes |
| Void | `--color-surface-void` | `#121814` | Superficie oscura principal (score 8.0M): secciones de producto, cards |
| Forest | `--color-surface-forest` | `#022116` | Superficie oscura teñida de verde (score 1.3M): paneles anidados dentro de Void |
| Spring 15% | `--color-tint` | `rgba(0, 209, 132, 0.15)` | Tinte real del sitio para hovers y separadores sobre oscuro |
| Paper | `--color-surface-paper` | `#F5F5F5` | Único claro no verde: logos de estudios, placas de prensa |
| Mint | `--color-accent-mint` | `#A1EABF` | Tinte claro del verde, estados positivos y highlights puntuales |

### Colores de texto

| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Tinta | `--color-text-primary` | `#000000` | Todo el texto sobre verde (479 nodos, el color de texto dominante) |
| Moss | `--color-text-secondary` | `#005939` | Bajadas y lede sobre verde (el `p` del hero es exactamente este color) |
| Pine | `--color-text-muted` | `#008C5A` | Cuerpo y listas dentro de las secciones oscuras |
| Spring sobre oscuro | `--color-text-on-dark` | `#00D084` | Titulares de producto (76px) y links sobre `#121814` |
| Paper | `--color-text-inverse` | `#F5F5F5` | Texto neutro sobre negro, cuando el verde sería demasiado |

### Contraste verificado

Ratios calculados sobre los pares que el sitio usa de verdad.

| Combinación | Ratio | Nivel |
|-------------|-------|-------|
| `#000000` sobre `#00D084` | **10.4:1** | AAA (el par firma del sitio) |
| `#000000` sobre `#FBD315` | 14.4:1 | AAA |
| `#F5F5F5` sobre `#121814` | 16.5:1 | AAA |
| `#FBD315` sobre `#121814` | 12.4:1 | AAA |
| `#00D084` sobre `#000000` | 10.4:1 | AAA |
| `#00D084` sobre `#121814` | 8.9:1 | AAA |
| `#00D084` sobre `#022116` | 8.4:1 | AAA |
| `#005939` sobre `#00D084` | 4.2:1 | AA solo texto grande (es el lede real del hero, a 18px) |
| `#008C5A` sobre `#121814` | 4.2:1 | AA solo texto grande (es el cuerpo real de las secciones de producto, a 15px) |
| `#FFFFFF` sobre `#00D084` | 2.0:1 | Falla. Nunca escribas en blanco sobre el verde |

> **Dos deudas reales del sitio, documentadas sin maquillar**: el lede del hero (`#005939` a 18px) y el cuerpo de las secciones de producto (`#008C5A` a 15px) se quedan en 4.2:1, por debajo del 4.5:1 que pide AA para texto normal. Si vas a reusar el sistema en producto, sube el lede sobre verde a `#00382A` (7.1:1) y el cuerpo sobre Void a `#00B873` (6.7:1). *(derivado para completar el sistema)*

### Colores de estado

| Estado | Variable CSS | Hex | Fondo | Texto |
|--------|-------------|-----|-------|-------|
| Éxito | `--color-success` | `#00B873` | `#A1EABF` | `#000000` |
| Advertencia | `--color-warning` | `#FBD315` | `#FFF3B8` *(derivado)* | `#000000` |
| Error | `--color-error` | `#FF4D2E` *(derivado para completar el sistema)* | `#FFDCD4` *(derivado)* | `#000000` |
| Info | `--color-info` | `#008C5A` | `#022116` | `#00D084` |

> El sitio no expone semánticos de error. El rojo propuesto es el complementario cálido del spring, elegido para sobrevivir sobre verde sin virar a marrón. Está marcado como derivado: no lo cites como color de marca.

---

## 3. Reglas de Tipografía

```css
/* Display / titulares / UI: Poppins (real del sitio, 153+ nodos,
   declarada como Poppins, "Poppins Placeholder", sans-serif) */
--font-display: 'Poppins', system-ui, sans-serif;
--font-body: 'Poppins', system-ui, sans-serif;

/* Labels técnicos, notas al pie, ticker: Space Mono (real, 38 nodos) */
--font-mono: 'Space Mono', ui-monospace, monospace;

/* Numerales de sección a 150px: PT Mono (real, 5 nodos) */
--font-numeral: 'PT Mono', ui-monospace, monospace;

/* Micro-labels de UI: Space Grotesk (real, 24 nodos) */
--font-label: 'Space Grotesk', system-ui, sans-serif;
```

**Google Fonts (las cuatro familias son reales y las cuatro están disponibles, no hay sustitución):**
```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=Poppins:wght@400;500;600;700&family=Space+Mono:wght@400;700&family=Space+Grotesk:wght@400;500;700&family=PT+Mono&display=swap" rel="stylesheet">
```

### Nota sobre Poppins (leer antes de "corregirla")

Poppins suele aparecer en las listas negras de tipografía generada por IA, y con razón: es la geométrica por defecto de medio internet. **Aquí no es una sustitución perezosa: es la fuente real del sitio**, medida en el DOM computado (`Poppins, "Poppins Placeholder", sans-serif`, en pesos 400 / 500 / 600 sobre más de 150 nodos, incluyendo el `h1` del hero a 64px y los titulares de producto a 76px).

La fidelidad manda sobre la fobia. Y hay una razón de diseño para que funcione: Beeble usa Poppins **en mayúsculas y con tracking muy negativo** (`-3.2px` a 64px, `-1.52px` a 76px, `-0.96px` a 48px). Comprimida así, la geométrica pierde su blandura de plantilla y se convierte en un bloque compacto que aguanta el verde ácido. Poppins con tracking normal a 16px sería genérica; Poppins a 64px con `-0.05em` en caja alta es otra fuente.

| Familia | Ocurrencias | Territorio | Sustitución |
|---|---|---|---|
| **Poppins** | 153 nodos | Display, h1, h2, lede, body, UI, nav | Ninguna: es la real |
| **Space Mono** | 38 nodos | Ticker de anuncio, notas al pie (`* Available on cloud plan only`), labels | Ninguna: es la real |
| **Space Grotesk** | 24 nodos | Micro-labels de 11-12px, chips de interfaz | Ninguna: es la real |
| **PT Mono** | 5 nodos | Numerales de sección a 150px / `-6px` | Ninguna: es la real |
| Inter | 4 nodos | Residual (peso 700, 18px), probablemente de un componente embebido | No forma parte del sistema |

### Escala tipográfica

> Tamaños reales medidos: 150px (5), 76px (2), 64px (1), 48px (1), 24px (16), 20px (17), 18px (33), 16px (9), 15px (49), 14px (2), 13px (6), 12px (56), 11px (6).

| Token | Familia | px | Line height | Weight | Tracking | Uso |
|-------|---------|----|-------------|--------|----------|-----|
| `--f-numeral` | PT Mono | 150px | 150px (1.0) | 400 | -6px (-0.04em) | Numerales de sección `01` `02` `03` |
| `--f-display` | Poppins | 76px | 76px (1.0) | 500 | -1.52px (-0.02em) | Nombre de producto (Canvas, SwitchX) |
| `--f-hero` | Poppins | 64px | 57.6px (0.9) | 400 | -3.2px (-0.05em) | `h1` del hero, uppercase |
| `--f-h2` | Poppins | 48px | 48px (1.0) | 500 | -0.96px (-0.02em) | Titular de sección, uppercase |
| `--f-mono-lead` | Space Mono | 24px | 24px (1.0) | 400 | -0.48px | Cita técnica, dato destacado |
| `--f-lead` | Poppins | 18px | 23.4px (1.3) | 400 | -0.18px | Bajada del hero y de sección |
| `--f-body` | Poppins | 15px | 19.5px (1.3) | 400 | normal | Cuerpo, listas de features |
| `--f-ui` | Poppins | 13px | 15.6px (1.2) | 600 | -0.13px | Navegación, botones, UI |
| `--f-mono` | Space Mono | 15px | 19.5px (1.3) | 400 | normal | Notas al pie, metadata |
| `--f-mono-sm` | Space Mono | 12px | 14.4px (1.2) | 400 | 0.48px | Kickers en caja alta |
| `--f-label` | Space Grotesk | 11px | 13.2px (1.2) | 500 | 0.22px (0.02em) | Micro-labels, chips |

### Pesos tipográficos

```css
--font-regular: 400;   /* dominante: hero h1, lede, body, mono */
--font-medium: 500;    /* titulares de sección y de producto (48px, 76px) */
--font-semibold: 600;  /* navegación y UI (13px) */
--font-bold: 700;      /* Space Mono en el ticker: "CANVAS" y "node-based AI compositor" */
```

> No hay 800 ni 900. La masa de los titulares no viene del peso, viene de la **caja alta + el tracking negativo + la escala**. El `h1` real va en peso 400.

### Letter spacing

```css
--tracking-hero:   -0.05em;  /* -3.2px a 64px: la compresión que hace legible a Poppins en display */
--tracking-display:-0.02em;  /* -1.52px a 76px, -0.96px a 48px */
--tracking-numeral:-0.04em;  /* -6px a 150px, PT Mono */
--tracking-body:   -0.01em;  /* -0.18px a 18px */
--tracking-label:   0.02em;  /* +0.22px a 11px, Space Grotesk */
--tracking-kicker:  0.04em;  /* +0.48px a 12px, Space Mono en caja alta */
```

**Regla clave**: el tracking cambia de signo con el tamaño. Grande y en caja alta, negativo y agresivo. Pequeño y en mono, positivo. Si mantienes el tracking en cero, Poppins vuelve a ser Poppins y el sistema pierde el filo.

---

## 4. Estilos de Componentes

La regla que gobierna todo: **`border-radius: 0` y `box-shadow` con blur `0`**. Ningún componente se desvía.

### Botones

**Primario (el START FREE del hero, receta real)**
```
Background: #000000
Color de texto: #00D084
Border: none
Border-radius: 0                       <-- sin radio, en todo el sistema
Padding: 18px 40px
Font-family: Poppins
Font-weight: 600
Font-size: 13-16px
Text-transform: uppercase
Box-shadow: 5px 5px 0 0 #008C5A        <-- REAL: rgb(0,140,90) 5px 5px 0px 0px
Transición: transform 140ms, box-shadow 140ms

Hover:
  Transform: translate(-3px, -3px)
  Box-shadow: 8px 8px 0 0 #008C5A      (derivado: el sitio no expone hover, pero la
                                        mecánica de la sombra dura solo admite esta)
Active:
  Transform: translate(5px, 5px)
  Box-shadow: 0 0 0 0 #008C5A          (la caja aterriza sobre su propia sombra)

Focus:
  Outline: 3px solid #000000
  Outline-offset: 4px
```

> **La sombra es el componente.** Un rectángulo negro sobre verde es solo un rectángulo. Con `5px 5px 0 0 #008C5A` se convierte en un objeto físico. Quitar la sombra o suavizarla con blur destruye el sistema más rápido que cambiar el verde.

**Acento (amarillo)**
```
Background: #FBD315
Color de texto: #000000
Border: none
Border-radius: 0
Padding: 18px 40px
Box-shadow: 6px 6px 0 0 #121814        (real: rgb(18,24,20) 6px 6px 0px 0px)
```

**Outline (sobre verde)**
```
Background: transparent
Color de texto: #000000
Border: 2px solid #000000
Border-radius: 0
Padding: 16px 38px

Hover:
  Background: #000000
  Color: #00D084
```

**Ghost / link técnico**
```
Background: transparent
Color: #000000
Border: none
Border-bottom: 1px solid #000000
Font-family: Space Mono
Font-size: 15px

Hover:
  Color: #005939
```

### Inputs de texto

```
Background: #00D084                    (el input no se separa del canvas por color, se separa por borde)
Border: 2px solid #000000
Border-radius: 0
Padding: 16px 18px
Font-family: Poppins
Font-size: 15px
Color: #000000
Placeholder: #005939

Focus:
  Outline: none
  Box-shadow: 5px 5px 0 0 #000000      (derivado: el foco levanta la misma sombra dura del botón)
  Border-color: #000000
```

### Cards

```
Background: #121814                    (Void: la card es el contrapunto oscuro sobre el verde)
Color de texto: #00D084
Border: 2px solid #000000
Border-radius: 0
Padding: 28px
Box-shadow: 10px 10px 0 0 #008C5A      (real: rgb(0,140,90) 10px 10px 0px 0px, la sombra
                                        más larga del sitio, reservada a los frames grandes)

Numeral: PT Mono 150px, color #005939, line-height 1, tracking -6px
Titular: Poppins 500, 76px sobre desktop, color #00D084
Cuerpo: Poppins 400, 15px, color #008C5A
Nota al pie: Space Mono 15px, color #008C5A, prefijo "* "

Hover (si es clickeable):
  Transform: translate(-4px, -4px)
  Box-shadow: 14px 14px 0 0 #008C5A    (derivado)

Variante forest:
  Background: #022116, borde #005939, sombra 6px 6px 0 0 #04291E (real: rgb(4,41,30))
```

### Barra de anuncio (componente firma, receta real)

```
Background: #FBD315                    (el único amarillo del sitio)
Color de texto: #000000
Padding: 12px 0
Border-radius: 0
Font-family: Space Mono
Font-size: 14px
Badge interno: caja blanca con borde negro, sin radio, con el wordmark del producto
Énfasis: Space Mono 700 ("CANVAS", "node-based AI compositor")
```

> Aparece una sola vez, arriba del todo, a ancho completo. Es el único momento del sistema en el que el verde cede la superficie. Si multiplicas el amarillo, el sistema se vuelve ruido.

### Navegación / Header

```
Background: #00D084                    (opaco, sin blur, sin transparencia)
Altura: ~56px
Border-bottom: 1px solid #000000
Border-radius: 0

Logo: wordmark "beeble" en negro + isotipo de cubo
Links: Poppins 600, 13px, color #000000, padding 0 8px 0 12px
Chevrons de dropdown en negro, 8px

CTA del nav (Log In):
  Border: 1px solid #000000
  Background: transparent
  Padding: 2px 8px (contenedor) / 10px 20px (área real de click)
  Sin radio, sin sombra
```

### Chips / Labels

```
Font-family: Space Grotesk
Font-size: 11px
Font-weight: 500
Letter-spacing: 0.22px
Text-transform: uppercase
Padding: 6px 10px
Border-radius: 0
Border: 1px solid #000000
Background: transparent

Variante activa:
  Background: #000000
  Color: #00D084
```

---

## 5. Principios de Layout

### Escala de espaciado

```css
--space-1: 4px;    /* base observada en los paddings de nav: 2px 8px, 0 8px 0 12px */
--space-2: 8px;
--space-3: 12px;   /* el padding real del ticker y del CTA del hero */
--space-4: 16px;
--space-6: 24px;
--space-8: 32px;
--space-12: 48px;
--space-20: 80px;  /* separación entre bloques de sección (derivado) */
--space-30: 120px; /* respiro del hero (derivado) */
```

> Base de 4px, confirmada por los paddings computados (2, 8, 12). Los saltos grandes (80, 120) son derivados: el sitio los resuelve con altura de viewport, no con tokens.

### Contenedores

```css
--site-max-width: 1440px;   /* el frame de contenido del hero llega casi a borde */
--container-pad: 40px;      /* desktop */
--container-text: 52ch;     /* la medida del lede: dos líneas cortas, centradas */
```

### Grid

```
Hero: una columna centrada. h1 en caja alta, lede de dos líneas, CTA, y debajo
      el frame de video a casi ancho completo con borde negro y sombra dura.
Producto: dos columnas asimétricas. Izquierda el numeral PT Mono de 150px + el
      nombre del producto a 76px + una lista de 3 bullets de 15px. Derecha, el
      frame de media.
Logos: fila de estudios sobre #F5F5F5 o sobre verde, en escala de grises.
Cierre: franja oscura #121814 a ancho completo.
```

### Filosofía de espaciado

El verde vacío **es** el contenido. El hero deja más de 200px de aire entre el CTA y el frame de video, y esa distancia es lo que hace que el verde se lea como una decisión y no como un fondo. Dentro de los bloques oscuros pasa lo contrario: el mono se aprieta, las listas van a 19.5px de line-height, y la densidad sube. Aire fuera, densidad dentro.

Las secciones no se separan con líneas: se separan con un cambio de superficie completo (verde → Void → verde) o con un numeral de 150px que actúa como marcador de capítulo.

---

## 6. Profundidad y Elevación

No hay elevación. Hay **desplazamiento**.

### Sistema de sombras (las cuatro son reales)

```css
--shadow-button:  5px 5px 0 0 #008C5A;    /* rgb(0,140,90) 5px 5px 0px 0px  (3 nodos) */
--shadow-card:    6px 6px 0 0 #121814;    /* rgb(18,24,20) 6px 6px 0px 0px  (1 nodo)  */
--shadow-forest:  6px 6px 0 0 #04291E;    /* rgb(4,41,30) 6px 6px 0px 0px   (2 nodos) */
--shadow-frame:  10px 10px 0 0 #008C5A;   /* rgb(0,140,90) 10px 10px 0px 0px (1 nodo) */
--shadow-none: none;
```

> **Blur radius: 0 en las cuatro. Spread: 0 en las cuatro. Offset: siempre en diagonal positiva (x = y).** No existe una sola sombra difusa en el sitio. El color de la sombra nunca es negro transparente: es un verde profundo opaco o un negro humo opaco, lo que la convierte en una segunda forma, no en una atmósfera.

### Niveles de elevación

| Nivel | Superficie | Sombra | Uso |
|-------|-----------|--------|-----|
| 0 - Canvas | `#00D084` | ninguna | Fondo del `body` |
| 1 - Control | `#000000` | `5px 5px 0 #008C5A` | Botones primarios |
| 2 - Panel | `#121814` | `6px 6px 0 #04291E` | Cards y paneles de producto |
| 3 - Frame | `#121814` / media | `10px 10px 0 #008C5A` | Frames de video, el objeto más importante de la vista |

### Radios de borde

```css
--radius-none: 0;   /* el único valor del sistema */
```

> El barrido de los elementos principales devolvió **cero radios**. No es un descuido: es la firma. Cualquier `border-radius` que introduzcas (incluso 4px) delata que el componente no es de Beeble.

---

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

### Sí hacer

1. **Deja que el verde `#00D084` ocupe la pantalla entera.** No es un acento sobre blanco: es el canvas. Un layout de Beeble con fondo blanco y el verde en los botones no es Beeble, es cualquier SaaS con un acento verde.
2. **Escribe en negro puro `#000000` sobre el verde.** Rinde 10.4:1 (AAA). Es el único par tipográfico correcto del sistema.
3. **Mantén `border-radius: 0` en todo**, botones, inputs, cards, frames y badges. La caja recta es la mitad de la identidad.
4. **Usa la sombra dura desplazada** (`5px 5px 0` en controles, `10px 10px 0` en frames), siempre con blur 0 y color opaco. Es la otra mitad de la identidad.
5. **Comprime el tracking en display**: `-0.05em` a 64px, caja alta. Es lo que salva a Poppins de sonar a plantilla.
6. **Invierte el sistema para producto**: fondo `#121814`, titular `#00D084` a 76px, cuerpo `#008C5A`, numeral PT Mono a 150px. El verde pasa de superficie a tinta sin cambiar de hex.
7. **Reserva el amarillo `#FBD315` a un solo elemento por vista** (la barra de anuncio). Su valor es la escasez.
8. **Deja aire alrededor del CTA del hero.** El verde vacío es la afirmación de marca.

### No hacer

1. **No escribas en blanco sobre el verde.** `#FFFFFF` sobre `#00D084` da 2.0:1 y es ilegible. Este es el error más frecuente al copiar la paleta.
2. **No redondees nada.** Ni 4px "para suavizar". El sistema no tiene un solo radio y esa ausencia es deliberada.
3. **No cambies la sombra dura por una sombra con blur** (`0 8px 24px rgba(0,0,0,.12)` y similares). Convierte el brutalismo en Material y borra la marca.
4. **No metas degradados, mesh ni glassmorphism sobre el verde.** El sitio es de color plano: la única gradación que existe es el borde entre dos superficies.
5. **No uses Poppins con tracking normal en titulares grandes.** Sin la compresión negativa, el display se vuelve genérico.
6. **No conviertas el amarillo en un color de acento repetido** (chips, links, iconos). Aparece una vez, arriba, y desaparece.
7. **No uses grises neutros.** El sistema no tiene ninguno: los oscuros son verdes desaturados (`#121814`, `#022116`), no grises de UI.
8. **No pongas el lede sobre verde en `#005939` a 15px o menos.** A 18px ya está en el límite (4.2:1); más pequeño incumple AA sin remedio.

---

## 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: 1440px) { }
```

*(derivado: el sitio resuelve el responsive con breakpoints de framer, que no expone en el CSS público)*

### Cambios por breakpoint

**Mobile (menos de 640px)**
- Nav: wordmark + botón de menú; los dropdowns se apilan
- Hero `h1`: baja de 64px a 34-40px, conserva la caja alta y el tracking `-0.04em`
- Numeral de sección: de 150px a 64px (sigue siendo el elemento más grande del bloque)
- Sombra dura: de 5px a 4px en controles, de 10px a 6px en frames (a menor tamaño, menor offset)
- Frame de video: ancho completo menos 20px de margen
- Botones: ancho completo, padding 16px

**Tablet (640px a 1024px)**
- Los bloques de producto pasan de dos columnas a una: primero el media, después el texto
- Hero `h1`: 48px
- Numeral: 100px

**Desktop (más de 1024px)**
- Nav completa con los 5 dropdowns
- Bloques de producto en dos columnas asimétricas
- Hero `h1`: 64px, lede centrado a 52ch
- Numeral: 150px con `-6px` de tracking

### Touch targets (mobile)

- Botones: mínimo 48x48px (el control real de `18px 40px` con 13px de fuente ya cumple)
- Links de nav: altura mínima 44px
- Inputs: altura mínima 48px

### Filosofía responsive

Lo último que se sacrifica es la sombra dura y la caja recta. Antes de suavizar un componente en mobile, reduce el offset de la sombra: `10px` en desktop, `6px` en móvil. El gesto sobrevive; solo cambia de escala.

---

## 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 Beeble (video AI / VFX).

PALETA: el fondo dominante es el verde spring #00D084 y ocupa la pantalla entera.
La tinta es negro PURO #000000 (10.4:1 sobre el verde, AAA). Nunca blanco sobre
verde (2.0:1). Superficies oscuras: #121814 (Void) y #022116 (Forest); sobre ellas
el titular va en #00D084 y el cuerpo en #008C5A. Verde profundo #008C5A para las
sombras. Amarillo #FBD315: un solo uso por vista (barra de anuncio). Sin grises.

TIPOGRAFÍA: Poppins para display, titulares y UI (400/500/600). El display va en
CAJA ALTA con tracking NEGATIVO: -0.05em a 64px, -0.02em a 76px. Space Mono para
labels, notas al pie y metadata. Space Grotesk para micro-labels de 11px. PT Mono
a 150px con -6px de tracking para los numerales de sección (01, 02, 03).

FORMA: border-radius 0 en TODO. Sin excepciones.

PROFUNDIDAD: sombra dura desplazada, blur 0, color opaco.
  Controles: 5px 5px 0 0 #008C5A
  Cards:     6px 6px 0 0 #121814
  Frames:   10px 10px 0 0 #008C5A
Sin sombras difusas, sin glass, sin degradados.

MODO: claro (el verde es luminoso, la tinta es negra).
TOKENS: usa variables CSS; no hardcodees colores fuera del sistema.
```

### Prompt: Crear nueva pantalla

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

Requisitos:
- Fondo #00D084 a sangre, texto #000000
- Titular en Poppins uppercase, tracking -0.05em, peso 400-500
- CTA: caja negra, texto verde #00D084, sin radio, sombra 5px 5px 0 0 #008C5A
- Si hay un bloque de producto, inviértelo: fondo #121814, titular #00D084 a 76px,
  cuerpo #008C5A a 15px, y un numeral PT Mono de 150px como marcador de capítulo
- Aire generoso alrededor del CTA; densidad alta dentro de los bloques oscuros
- Cero border-radius, cero sombras con blur, cero degradados
- Responsive: en móvil baja el titular y el offset de la sombra, nunca el gesto
```

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

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

Debe:
- Usar solo tokens del DESIGN.md de Beeble
- border-radius: 0 (siempre)
- Si tiene elevación, usar sombra dura con blur 0 y color opaco (#008C5A o #121814)
- Tener default, hover (translate negativo + sombra más larga), active (translate
  positivo + sombra a 0), focus (outline 3px sólido negro, offset 4px) y disabled
- Sobre verde, el texto va en negro puro; sobre Void, en #00D084
- Los labels en Space Mono o Space Grotesk, en caja alta, tracking positivo
```

### Prompt: Revisión de consistencia

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

Verifica:
1. Si el fondo dominante es #00D084 (no blanco con verde de acento)
2. Si el texto sobre verde es #000000 (nunca blanco, que da 2.0:1)
3. Si TODOS los border-radius son 0
4. Si las sombras tienen blur 0, spread 0 y color opaco verde o negro humo
5. Si el display va en caja alta con tracking negativo (-0.05em a 64px)
6. Si el amarillo #FBD315 aparece una sola vez
7. Si hay grises neutros, degradados, glass o sombras difusas (no deben estar)
8. Si el cuerpo sobre Void usa #008C5A a 15px (marca la deuda de contraste: 4.2:1)
```

### Prompt: Variante de campaña

```text
Genera una variante [lanzamiento de producto / research / precios] para Beeble
manteniendo el sistema base.

Conserva:
- Verde #00D084 como superficie y como tinta sobre oscuro
- Negro puro para texto y controles
- Cero radios y la sombra dura desplazada
- Poppins comprimida en display, Space Mono en metadata

Puedes variar:
- La proporción verde / Void de la página
- La escala del numeral PT Mono (150px es el techo)
- El tamaño del frame de media (es el objeto que más puede crecer)
```

---

## 10. Movimiento (Motion)

El sitio es un producto de video: el motion real está **dentro** de los frames (loops de plate a comp, before/after), no en el chrome. La interfaz se mueve poco y de forma mecánica, coherente con la caja recta.

**Nivel de motion**: bajo en la UI, alto dentro del media. La página no se anima; el contenido sí

**Duraciones**: 140ms (press del botón, el aterrizaje sobre su sombra), 240ms (hover de links y chips), 800ms (scroll reveal, derivado), 26s (ken-burns del frame del hero, derivado)

**Easings**: `cubic-bezier(0.16, 1, 0.3, 1)` para entradas y reveals; `linear` o `ease-out` corto para el press del botón. **Nada de bounce**: el sistema es rígido, y un ease elástico contradice la caja recta

**Propiedades animadas**: `transform` (translate en diagonal, x = y), `box-shadow` (crece y se encoge el offset, nunca el blur), `color`, `background-color`

**Patrones de motion**:
- **Press físico** (el gesto firma): en hover la caja sube `translate(-3px, -3px)` y la sombra crece de `5px` a `8px`; en active la caja baja `translate(5px, 5px)` y la sombra se va a `0`. El botón aterriza exactamente sobre su propia sombra. *(derivado de la mecánica de la sombra real; el sitio no expone el hover en el DOM estático)*
- **Entrada escalonada** del hero con `animation-delay` de 0.05s a 0.45s *(derivado)*
- **Scroll reveal** por sección, fade-up de 26px, 800ms *(derivado)*
- **Ken-burns lento** en el frame del hero, 26s alternate, scale 1 a 1.06 *(derivado)*
- **Ticker** de la barra amarilla: texto estático en el DOM capturado, sin marquee detectado

```css
--ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
--ease-press: ease-out;
--duration-press: 140ms;
--duration-fast: 240ms;
--duration-slow: 800ms;
--duration-kenburns: 26s;
```

> **Accesibilidad**: respeta `@media (prefers-reduced-motion: reduce)`. Se desactivan el ken-burns, los reveals escalonados y el press físico (la sombra queda en su offset base). Sobreviven los cambios de color y el `:focus-visible`, que en este sistema es un outline negro sólido de 3px con 4px de offset, no un halo.

---

## Anexo: Stack técnico detectado

- **Plataforma / builder**: Framer. Las familias aparecen con el sufijo `"Poppins Placeholder"`, `"Inter Placeholder"` y `"Space Grotesk Placeholder"`, que es el mecanismo de fallback métrico de Framer mientras la webfont carga.
- **Sistema de tokens**: **no expuesto**. La única variable CSS en el `:root` es `--one-if-corner-shape-supported: 1` (una feature-query de Framer para `corner-shape`, no un token de marca). Todo el sistema vive en estilos computados por componente, no en un `:root` público. Las recetas de este documento están medidas sobre el DOM, no leídas de variables.
- **Tipografía**: cuatro familias reales, todas disponibles en Google Fonts: **Poppins** (400/500/600), **Space Mono** (400/700), **Space Grotesk** (400/500) y **PT Mono** (400). No hay ninguna fuente propietaria, así que **no hubo sustitución tipográfica**.
- **Radios**: cero. El barrido de `border-radius` sobre los elementos principales devolvió una lista vacía.
- **Sombras**: cuatro, todas con blur 0 y spread 0: `5px 5px 0 rgb(0,140,90)`, `6px 6px 0 rgb(4,41,30)`, `6px 6px 0 rgb(18,24,20)`, `10px 10px 0 rgb(0,140,90)`.
- **Animación**: no se detectaron librerías de motion (GSAP, Framer Motion expuesto, AOS, Lottie) en el HTML servido. El movimiento percibido viene de los `<video>` en loop de los frames de producto.
- **3D / WebGL**: no detectado en la home.
- **Artefacto a ignorar**: `rgb(0, 0, 238)` aparece como color de texto en varios `<a>` (45 nodos). **No es un color de marca**: es el azul de link por defecto del user agent en anchors cuyo color lo pinta un hijo. El color real percibido es el del `<p>` interno (negro o verde). No lo lleves a la paleta.
- **Comportamiento**: home de producto con barra de anuncio amarilla, hero centrado sobre verde a sangre con frame de video, sección de prueba social ("Powering the world's most ambitious VFX workflows", "2026 Webby Awards Winner"), y bloques de producto numerados (`01` Canvas, `02` SwitchX, `03`) sobre superficie oscura con el verde como tinta.
- **(no detectado)**: modo oscuro conmutable (los bloques oscuros son secciones, no un tema), breakpoints declarados en CSS público, colores semánticos de error, escala de spacing formal.