Design tokens: decisiones con nombre
Es fácil reducir los design tokens a un detalle técnico: variables que guardan colores y tamaños. Pero esa lectura se pierde lo esencial. Un token es una decisión de diseño con un nombre estable.
La diferencia está en el nombre. #1a1a1a es un dato. color-text-primary es una decisión: este es el color con el que hablamos con el usuario en primer plano. El valor puede cambiar; la decisión permanece.
Tres capas, tres responsabilidades
Un sistema de tokens sano suele organizarse en capas, y cada una responde a una pregunta distinta:
- Primitivos — ¿qué valores existen? Una paleta cruda:
gray-900,blue-500,space-4. No tienen significado por sí solos. - Semánticos — ¿qué significan?
color-text-primary,color-surface,space-inset. Aquí vive la intención. - De componente — ¿cómo se aplican aquí?
button-background,card-padding. Atan la intención a un contexto concreto.
La regla que mantiene todo en orden es simple: una capa solo puede referirse a la anterior. Los componentes nunca apuntan a un primitivo directamente.
El beneficio real: el modo oscuro que no diseñaste dos veces
Cuando los componentes consumen tokens semánticos, el modo oscuro deja de ser un rediseño y se convierte en un remapeo:
:root {
--color-surface: #ffffff;
--color-text-primary: #1a1a1a;
}
@media (prefers-color-scheme: dark) {
:root {
--color-surface: #101010;
--color-text-primary: #e9e9e7;
}
}Ningún componente cambió. Cambió lo que significan sus decisiones en un contexto distinto. Eso es un token haciendo su trabajo: absorber el cambio para que el resto no tenga que enterarse.