Tokens Globales

Inferido por consistencia

Los tokens globales son los valores primitivos del sistema — la fuente de verdad de colores, tipografía, espaciado y sombras. No deben usarse directamente en componentes; se consumen a través de tokens semánticos.

Estructura de tokens

El sistema sigue 3 niveles: Global → Semántico → Componente.

Global

Valores primitivos: colores con escala numérica, valores de espaciado, tamaños tipográficos. Raramente usados directamente.

--color-primary-700
--space-4
--radius-sm

Semántico

Aliases con significado: text-primary, surface-card, border-subtle. Conectan valores globales con roles de UI.

--text-primary
--surface-card
--border-default

Componente

Tokens específicos de un componente. Se definen cuando el componente necesita valores únicos que no existen en global o semántico.

--btn-height-md
--input-border-focus

Tokens de color — Primario

Token	Valor	Figma name
`--color-primary-50`	#f0fdf6	—
`--color-primary-100`	#dff8eb	—
`--color-primary-200`	#bbf0d1	—
`--color-primary-300`	#96e8b8	—
`--color-primary-400`	#6fda9d	Rectangle 34624964
`--color-primary-500`	#52bd83	Ellipse 6771
`--color-primary-600`	#3a9a78	—
`--color-primary-700`	#2e7e62	Primario
`--color-primary-800`	#1c544d	Guía de colores
`--color-primary-900`	#0d3d2e	—

Tokens de color — Neutral

Token	Valor	Figma name
`--color-neutral-50`	#fafafa	—
`--color-neutral-100`	#f4f5f7	Libreria de tokens
`--color-neutral-200`	#e2e2e8	—
`--color-neutral-300`	#cbcbd1	—
`--color-neutral-400`	#b0b0b8	—
`--color-neutral-500`	#8e8e96	—
`--color-neutral-600`	#6b6b70	—
`--color-neutral-700`	#545457	—
`--color-neutral-800`	#3d3d3f	Paleta de colores
`--color-neutral-900`	#262322	Text
`--color-neutral-950`	#0e1223	Actualizar colores

Tokens de espaciado

Visual	Token	Valor
	`--space-1`	4px
	`--space-2`	8px
	`--space-3`	12px
	`--space-4`	16px
	`--space-5`	20px
	`--space-6`	24px
	`--space-8`	32px
	`--space-10`	40px
	`--space-12`	48px
	`--space-16`	64px
	`--space-20`	80px

Tokens de tipografía

Nombre	Tamaño	Peso	Line Height
`display`	48px	600	1.15
`headline-1`	36px	600	1.2
`headline-2`	28px	600	1.25
`headline-3`	24px	600	1.3
`title-1`	20px	600	1.35
`title-2`	18px	600	1.4
`body-1`	16px	400	1.5
`body-2`	14px	400	1.5
`caption`	12px	400	1.4
`label`	12px	600	1.4

Tokens de sombra

--shadow-sm

0 1px 2px rgba(14,18,35,0.08)

Cards planos, elementos sutiles

--shadow-md

0 4px 8px rgba(14,18,35,0.10)

Dropdowns, tooltips

--shadow-lg

0 8px 24px rgba(14,18,35,0.12)

Modals, popovers

--shadow-xl

0 16px 40px rgba(14,18,35,0.16)

Elementos flotantes de alto énfasis