Design tokens

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

Arquitectura en 3 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.

Capa	Qué contiene	Quién la consume
Primitive	Valores crudos: escalas de color 50–950, spacing, radios, tipografía	Solo la capa semántica
Semantic	Intención: `text-secondary`, `surface-subtle`, `action-primary-bg`	Componentes y layouts
Component	Decisiones por componente: `button-primary-height`	Un componente específico

Un componente nunca usa un primitivo de color directo. Si falta un semántico, se crea.

--color-tomato-500: #e30613;                          /* primitive */
--color-action-primary-bg: var(--color-tomato-500);   /* semantic  */
--button-add-to-cart-bg: var(--color-action-primary-bg); /* component */

Nomenclatura

{categoría}-{grupo}-{rol}-{estado} → color-action-primary-bg-hover. Todo en kebab-case y minúsculas, sin prefijos repetidos.

Cómo usar

La instalación está explicada en Empezar.

Tokens por familia

Cuántas variables hay en cada familia.

Familia	Tokens
color-*	202
button-*	113
select-*	39
font-*	26
toggle-*	24
space-*	23
badge-*	17
chip-*	17
stepper-*	16
input-*	14
dropdown-*	14
typography-*	10
card-*	9
radius-*	8
z-*	8
layer-*	8
size-*	6
border-*	5
shadow-*	5
elevation-*	5
duration-*	4
breakpoint-*	3
opacity-*	3
easing-*	2
motion-*	2
carousel-*	1
divider-*	1