Design tokens: tu sistema de diseño en variables

Una variable suelta resuelve un valor repetido. Un SISTEMA de variables —los design tokens— resuelve la coherencia de todo un producto. Son las decisiones de diseño (colores, espaciados, tipografía, sombras) nombradas con intención y organizadas en escalas. Es lo que usan los equipos serios, lo que hace que un producto se vea "de una sola pieza"... y, sorpresa, es exactamente la mentalidad de Tailwind.

El set de LEGO con piezas definidas

Escalas, no valores sueltos

Los tokens se organizan en ESCALAS: en vez de espaciados al azar, una progresión; en vez de tamaños de texto arbitrarios, una escala tipográfica:

:root {
/* escala de ESPACIADO (base 4, la del blueprint de esta plataforma) */
--espacio-1: 4px;  --espacio-2: 8px;  --espacio-3: 16px;
--espacio-4: 24px; --espacio-5: 32px; --espacio-6: 48px;

/* escala TIPOGRÁFICA */
--texto-sm: 14px; --texto-base: 16px; --texto-lg: 20px;
--texto-xl: 28px; --texto-2xl: 40px;

/* RADIOS y SOMBRAS como sistema */
--radio-sm: 8px; --radio-md: 12px; --radio-lg: 16px;
--sombra-md: 0 4px 12px rgba(15, 23, 42, 0.1);
}

Con escalas, cada medida sale del sistema. Adiós al "24px aquí, 25px allá": usas --espacio-4 y punto. La coherencia deja de depender de tu memoria.

Primitivos vs semánticos: los dos niveles

Este es el concepto que separa un sistema amateur de uno profesional. Hay DOS capas de tokens:

:root {
/* NIVEL 1 — PRIMITIVOS: la paleta cruda, sin significado de uso */
--violeta-600: #6d28d9;
--gris-900: #0f172a;  --gris-500: #64748b;  --blanco: #ffffff;

/* NIVEL 2 — SEMÁNTICOS: decisiones con SIGNIFICADO, apuntan a primitivos */
--color-primary: var(--violeta-600);
--color-texto: var(--gris-900);
--color-texto-suave: var(--gris-500);
--color-superficie: var(--blanco);
}

/* los componentes usan SIEMPRE los semánticos, nunca los primitivos */
.boton { background: var(--color-primary); color: var(--color-superficie); }

Un componente 100% de tokens

<article class="tarjeta">
<span class="etiqueta">Plan Pro</span>
<h3>Todo lo que necesitas</h3>
<p class="precio">$29<span>/mes</span></p>
<button class="cta">Empezar ahora</button>
</article>

:root {
--violeta-600: #6d28d9; --gris-900: #0f172a; --gris-500: #64748b; --blanco: #fff;
--color-primary: var(--violeta-600); --color-texto: var(--gris-900);
--color-texto-suave: var(--gris-500); --color-superficie: var(--blanco);
--espacio-3: 16px; --espacio-4: 24px; --texto-2xl: 40px;
--radio-lg: 16px; --sombra-md: 0 8px 24px rgba(15,23,42,0.1);
}
body { font-family: system-ui; padding: 24px; background: #f1f5f9; }
.tarjeta { background: var(--color-superficie); border-radius: var(--radio-lg); padding: var(--espacio-4); max-width: 260px; box-shadow: var(--sombra-md); display: grid; gap: var(--espacio-3); }
.etiqueta { color: var(--color-primary); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
.tarjeta h3 { margin: 0; color: var(--color-texto); font-size: 18px; }
.precio { margin: 0; font-size: var(--texto-2xl); font-weight: 800; color: var(--color-texto); }
.precio span { font-size: 16px; color: var(--color-texto-suave); font-weight: 500; }
.cta { padding: 12px; border: 0; border-radius: 10px; background: var(--color-primary); color: var(--color-superficie); font-weight: 700; cursor: pointer; }

Cada color, espaciado y radio de esta tarjeta sale de un token. No hay ni un valor "mágico" suelto. Cambia --violeta-600 a #2563eb en tu cabeza: la etiqueta, el precio y el botón se re-marcan de azul a la vez, sin tocar sus reglas. Eso es un sistema.

Mini-reto

Diseña el set de tokens de "El Observador": define 5-6 primitivos de color (sus grises y su acento), una escala de espaciado base 4, una escala tipográfica de 4-5 tamaños, y 2-3 sombras. Luego crea la capa semántica (--color-texto, --color-primary, --superficie...) y reconstruye UNA tarjeta usando SOLO tokens semánticos. Si no queda ni un valor a mano, tu sistema está bien montado.

Qué sigue

Tienes el sistema de dos niveles. Su primera gran recompensa es el tema oscuro: la próxima lección lo construye re-apuntando solo los tokens semánticos, con prefers-color-scheme para respetar la preferencia del sistema y un toggle persistente. Un tema oscuro real, sin duplicar CSS.