Design tokens

Las decisiones de diseño como variables, en capas.

GitHub
Storybook
Figma

Arquitectura en capas

Los tokens van de lo general a lo específico. Cada capa solo lee de la anterior, así un cambio de marca se hace en un lugar y llega a todos los componentes.

Primitive

Los valores crudos: escalas de color, tamaños. Ej. --color-blue-brand-700.

Alias

Nombres de marca sobre los primitivos. Ej. --color-brand-default.

Semantic

Para qué se usa cada color. Ej. --color-semantic-text-link.

Regla: un componente usa tokens semánticos, no primitivos de color directos.

Tokens por familia

Cuántas variables hay en cada familia.

Familia	Tokens
color-*	104
font-*	24
spacing-*	17
radius-*	8
size-*	8
shadow-*	6
border-*	4
duration-*	4
opacity-*	3
easing-*	2