> ## Content Index
> Fetch the complete content index at: https://vanta-es.planethemes.com/llms.txt
> Use this file to discover other available public pages before exploring further.

# Design tokens a escala: un sistema, cinco marcas
- URL: https://vanta-es.planethemes.com/design-tokens-at-scale/
- Published: 2026-07-15T09:00:00.000Z
- Updated: 2026-08-20T13:46:08.000Z
- Description: Cómo una arquitectura de tokens en tres niveles permitió que un solo design system sirva a cinco marcas sin un solo color hardcodeado.
- Author: Elena Rostova
- Tags: Sistemas de diseño

Cuando llegó la segunda marca, nuestro design system casi se viene abajo. Los componentes eran sólidos: probados en batalla, accesibles, documentados. El problema era que cada color, cada radio y cada sombra era una decisión horneada adentro de ellos. La marca dos quería calidez donde la marca uno quería austeridad, y la única herramienta que teníamos era un fork. Esta es la historia de la reconstrucción, y de la arquitectura de tokens en tres niveles que hoy sostiene cinco marcas desde un solo codebase.

## Por qué un solo nivel no alcanza

Una lista plana de tokens (brand-blue-500, spacing-4, radius-lg) parece ordenada hasta que alguien pregunta qué pasa cuando el color de acento tiene que cambiar según la marca. Los tokens planos nombran valores, pero los componentes necesitan referenciar intenciones. En cuanto la intención y el valor son el mismo token, cada diferencia de marca se vuelve un cambio de componente, y cada cambio de componente es un riesgo de regresión multiplicado por la cantidad de marcas.

## Tres niveles o nada

Los tokens primitivos nombran valores crudos y nada más: blue-600 es un código hex sin opiniones. Los tokens semánticos nombran intenciones: surface-raised, accent-primary, text-danger, border-subtle. Los tokens de componente nombran usos: button-primary-bg, card-border-radius. La dependencia va en un solo sentido: los componentes consumen tokens de componente, los tokens de componente referencian tokens semánticos y los tokens semánticos se resuelven en primitivos.

Las marcas sobrescriben exactamente una capa: el nivel semántico. La marca A mapea accent-primary a violet-600; la marca B lo mapea a amber-500\. Nada de lo que está más abajo cambia. En dos años con esta arquitectura no forkeamos ni un solo componente por cuestiones de marca: el nivel del medio absorbe todas las diferencias.

```css
:root {
  /* primitive */
  --violet-600: #7c3aed;

  /* semantic - the only tier brands override */
  --accent-primary: var(--violet-600);
  --surface-raised: var(--gray-50);

  /* component */
  --button-primary-bg: var(--accent-primary);
}
```

## Nombrar es gobernar

Lo más difícil no son las herramientas: es ponerse de acuerdo en qué significan los nombres de intención y defenderlos. Tenemos una constitución de una página: los tokens semánticos describen roles que un diseñador reconocería, nunca valores, nunca componentes. Para proponer un token nuevo hace falta un caso de uso que dos tokens existentes no puedan cubrir. Suena burocrático, pero es la razón por la que el sistema sigue teniendo 60 tokens semánticos y no 600.

## Automatizá las garantías

Cada override de marca pasa por un pipeline que chequea pares de contraste automáticamente: tokens de texto contra las superficies donde se permite usarlos, con WCAG AA como piso. Una marca no puede mergear una paleta que genere botones ilegibles, porque el CI falla antes de que un humano llegue a revisarlo. El mismo pipeline exporta los tokens como CSS custom properties, asset catalogs de iOS y recursos de Android, todo desde una única fuente de verdad.

## La recompensa

Hoy una marca nueva sale en días: un archivo de tokens semánticos, un reporte de contraste automático y cero forks de componentes. Los diseñadores prototipan variaciones de marca editando variables en el navegador. Y el equipo de design system dejó por completo de ser un cuello de botella para el trabajo de marca: el sistema dejó de ser una guía de estilo y pasó a ser infraestructura.