Design tokens: el pegamento que mantiene unido tu sistema de diseño
Cómo estructuramos nuestros tokens en tres capas para que el sistema de diseño sobreviva rebrandings, modo oscuro y múltiples plataformas.
Laura Castillo
Design Systems Lead
24 Mar 2025
6 min lectura
El problema que los tokens resuelven
Sin design tokens, un rebranding requiere buscar cada valor de color hardcodeado en el código. Con tokens bien estructurados, cambias el color primario en un lugar y el cambio se propaga a todos los componentes automáticamente.
Pero los tokens mal estructurados crean su propio problema: tienes 200 tokens con nombres como color-blue-500 y color-blue-600 y nadie sabe cuál usar en cada situación.
Las tres capas
La arquitectura que nos ha funcionado tiene tres niveles:
- Primitivos: Valores absolutos.
blue-500: #6366f1,spacing-4: 16px. Nunca se usan directamente en componentes. - Semánticos: Dan significado.
color-action-primary: {blue-500},color-text-muted: {gray-400}. Estos son los que usan los componentes. - Específicos de componente: Opcionales, para casos donde un componente necesita un token que no aplica globalmente.
Modo oscuro sin dolor
Con esta estructura, implementar modo oscuro es redefinir los tokens semánticos en el tema oscuro: color-text-muted apunta a gray-400 en light y a gray-500 en dark. Los componentes no cambian — solo cambia qué primitivo usa cada token semántico.
Los tokens no son una convención de nomenclatura. Son un contrato entre diseño e ingeniería.