//Overview
Tokens

Design Tokens

Los design tokens son las decisiones de diseño del sistema expresadas como valores programáticos. Todo —colores, tipografía, espaciado, sombras— vive como un token con nombre, valor y propósito.

Jerarquía de 4 niveles

Extraído directamente de la página "System Variables" en Figma. Esta jerarquía garantiza que un cambio en un valor primitivo se propague automáticamente a todos los componentes que lo usan.

1

Primitive Tokens

extraído

Valores crudos. Son los bloques de construcción más básicos. No tienen semántica, solo valor.

Gray500 = #9E9E9ESystem Variables → Primitive Tokens
2

Semantic Tokens

extraído

Aliases con propósito. Mapean un valor primitivo a un nombre con significado contextual.

NeutralGray500 = Gray500System Variables → Semantic Tokens
3

Contextual Tokens

extraído

Tokens de uso. Definen para qué contexto UI se usa un token semántico.

BorderColor = NeutralGray500System Variables → Contextual Tokens
4

Mapped Tokens

extraído

Tokens de componente. Mapean un token contextual a un elemento específico de UI.

Field border = BorderColorSystem Variables → Mapped

Categorías de tokens

color

128

Paleta completa de colores

typography

33

Familias, tamaños, pesos

spacing

13

Escala de espaciado 4px-base

borderRadius

7

Radios de borde

elevation

6

Sombras y capas

grid

5

Breakpoints y columnas

Output CSS

Los tokens se generan automáticamente como CSS custom properties. Se importan una sola vez en el root.

:root {
  /* Color — Primitive */
  --ds-color-primitive-green-500: #008650;
  --ds-color-primitive-green-300: #52bd83;
  --ds-color-primitive-gray-900: #0a121b;
  --ds-color-primitive-gray-200: #c8c8c8;

  /* Color — Semantic */
  --ds-color-semantic-brand-primary: #008650;
  --ds-color-semantic-text-primary: #0a121b;
  --ds-color-semantic-background-primary: #ffffff;
  --ds-color-semantic-border-default: #c8c8c8;

  /* Elevation */
  --ds-elevation-card: 0 2px 8px 0 rgba(0,0,0,0.08);
  --ds-elevation-modal: 0 8px 32px 0 rgba(0,0,0,0.16);

  /* Spacing */
  --ds-spacing-4: 16px;
  --ds-spacing-6: 24px;

  /* ... 128 tokens total */
}

Limitaciones conocidas

Variables API de Figma no disponible

El plan de Figma actual no incluye acceso a la Variables API. Los tokens documentados aquí son derivados de la auditoría visual del archivo (estilos de texto, fills, efectos y la página "System Variables"). Cuando se migre a un plan con Variables, se actualizará la extracción automática.