---
name: Javier Yranzo
description: Marca oscura donde la profundidad se construye con capas translúcidas de blanco y celeste, nunca con grises fijos
colors:
  background: "#121216"
  card: "#1C1C22"
  popover: "#1C1C22"
  secondary: "#25252D"
  muted: "#25252D"
  border: "#2E2E38"
  input: "#2E2E38"
  foreground: "#FAFAFA"
  muted-foreground: "#A1A1AA"
  body-text: "#D4D4D8"
  primary: "#17AEE0"
  primary-foreground: "#121216"
  accent: "#17AEE0"
  accent-foreground: "#121216"
  ring: "#17AEE0"
  gradient-end: "#67E8F9"
  spotify: "#1DB954"
  whatsapp: "#25D366"
  destructive: "#7F1D1D"
  destructive-foreground: "#FAFAFA"
  overlay: "#0A0A0C"
  whatsapp-hover: "#22C35E"
  warning: "#8A6410"
  warning-border: "#D4A026"
  paper: "#FFFFFF"
  paper-surface: "#F7F7F9"
  paper-border: "#E2E2E8"
  ink: "#121216"
  ink-muted: "#6B6B76"
  primary-on-paper: "#0F7FB0"
typography:
  display:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "clamp(2.5rem, 5.2vw, 4.25rem)"
    fontWeight: 800
    lineHeight: 1.02
    letterSpacing: "-0.035em"
  headline:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "clamp(2.125rem, 5vw, 3rem)"
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: "-0.02em"
  title:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "1.5rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "-0.01em"
  subtitle:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "1.125rem"
    fontWeight: 700
    lineHeight: 1.55
    letterSpacing: "normal"
  body-large:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "1.125rem"
    fontWeight: 400
    lineHeight: 1.56
    letterSpacing: "normal"
  body:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "1rem"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "normal"
  label:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "0.875rem"
    fontWeight: 500
    lineHeight: 1.43
    letterSpacing: "normal"
  button:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "1.0625rem"
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: "normal"
  eyebrow:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "0.75rem"
    fontWeight: 700
    lineHeight: 1.33
    letterSpacing: "0.125em"
  tag:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: "0.625rem"
    fontWeight: 700
    lineHeight: 1.5
    letterSpacing: "0.1em"
---

# Design System: Javier Yranzo

Versión pública del sistema de diseño de la marca Javier Yranzo. Página visual: https://javieryranzo.com/brand

## En una línea

Una sala oscura donde lo único que brilla es el celeste, y el celeste significa "esto se toca" o "esto está activo".

## Reglas

- **Fondo `#121216`**, lo único opaco de verdad. Todo lo demás se apoya encima con transparencia (blanco al 2%, 5% o 10%; celeste al 5%, 10% o 20%). La profundidad es opacidad, no gris ni sombra.
- **Celeste `#17AEE0`** solo para acción, foco, estado activo y la palabra clave del titular. Nunca decorativo.
- **Texto:** titulares `#FAFAFA`, párrafos `#D4D4D8`, y `#A1A1AA` solo para lo corto y secundario (fechas, contadores, rótulos). Nunca un párrafo en ese gris.
- **Una sola familia: Inter.** La jerarquía se hace con peso y tamaño. Monospace solo para código.
- **Gradiente de titular:** `linear-gradient(to right, #17AEE0, #67E8F9)` recortado al texto, sobre UNA palabra o frase clave de un H1 a H3. Nunca en párrafos, botones ni texto chico.
- **Radios:** 16px base, 24px en contenedores grandes, píldora completa en los botones de acción. Nada con esquina viva.
- **Botones:** píldora de 52px, texto de 17px bold. Un solo CTA principal por vista, celeste sólido con glow celeste.
- **Etiqueta de sección:** 12px, bold, mayúsculas, dentro de un chip celeste con borde y punto.
- **Medidas:** contenido a 1104px, secciones separadas 112px (80px en mobile), margen lateral 24px (16px en mobile).
- **Iconos:** Lucide, trazo de 2px.
- **Colores de canal:** Spotify `#1DB954` y WhatsApp `#25D366`, solo en el botón que lleva a esa plataforma.
- **Modo papel (PDF y reportes):** fondo `#FFFFFF`, superficie `#F7F7F9`, borde `#E2E2E8`, tinta `#121216`, tinta apagada `#6B6B76`, acento `#0F7FB0`. En papel no hay transparencias.

## Logo

- Sobre oscuro: Javier en blanco, Yranzo en celeste.
- Sobre negro absoluto o foto: blanco puro.
- Sobre claro: Javier en oscuro, Yranzo en celeste.