Design Tokens

Los tokens son las variables atómicas del sistema — colores, tipografía y espaciado definidos una sola vez y usados en Admin, Storefront y Mobile.

Colores

Primario — Indigo

50

#eef2ff

100

#e0e7ff

200

#c7d2fe

300

#a5b4fc

400

#818cf8

500

#6366f1

600

#4f46e5

700

#4338ca

800

#3730a3

900

#312e81

Semánticos

Token	Hex	Tailwind	Uso
color-primary	#4f46e5	indigo-600	Botones, links, acciones primarias
color-primary-hover	#4338ca	indigo-700	Hover de primarios
color-success	#16a34a	green-600	Éxito, stock disponible, badges activo
color-warning	#ca8a04	yellow-600	Advertencia, stock bajo
color-danger	#dc2626	red-600	Error, eliminar, cancelar
color-text	#111827	gray-900	Texto principal
color-text-secondary	#6b7280	gray-500	Texto secundario, placeholders
color-border	#e5e7eb	gray-200	Bordes, divisores
color-surface	#f9fafb	gray-50	Fondos de cards, rows

Escala de grises

50

#f9fafb

100

#f3f4f6

200

#e5e7eb

300

#d1d5db

400

#9ca3af

500

#6b7280

600

#4b5563

700

#374151

800

#1f2937

900

#111827

---

Tipografía

Heading 1 — Inter Bold 30px

Heading 2 — Inter Bold 24px

Heading 3 — Inter SemiBold 20px

Heading 4 — Inter SemiBold 16px

Body — Inter Regular 14px. Texto corrido para párrafos, descripciones y contenido general de la interfaz.

Label — Inter Medium 12px. Para etiquetas de formularios, metadata y texto secundario.

code — JetBrains Mono 13px

Rol	Font	Peso	Tamaño	Line Height
h1	Inter	700	30px	1.2
h2	Inter	700	24px	1.2
h3	Inter	600	20px	1.3
h4	Inter	600	16px	1.4
Body	Inter	400	14px	1.6
Label	Inter	500	12px	1.5
Code	JetBrains Mono	400	13px	1.5

---

Espaciado

Escala de 4px base (Tailwind):

Token	px	Tailwind	Uso
space-1	4px	p-1	Padding mínimo, gap inline
space-2	8px	p-2	Gap entre elementos pequeños
space-3	12px	p-3	Padding de badges, chips
space-4	16px	p-4	Padding de cards, cells
space-6	24px	p-6	Padding secciones, paneles
space-8	32px	p-8	Padding de página, modales
space-12	48px	p-12	Separadores de sección mayor

---

Bordes y Sombras

Token	Valor	Uso
radius-sm	4px (rounded)	Tags, chips
radius-md	8px (rounded-lg)	Cards, inputs, buttons
radius-lg	12px (rounded-xl)	Modales, drawers
radius-xl	16px (rounded-2xl)	Banners, hero sections
shadow-sm	0 1px 2px rgba(0,0,0,.05)	Cards en reposo
shadow-md	0 4px 6px rgba(0,0,0,.07)	Cards hover, dropdowns
shadow-lg	0 10px 15px rgba(0,0,0,.1)	Modales, tooltips

---

Uso en código

HTML / Tailwind

<!-- Botón primario -->
<button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm font-medium">
  Guardar cambios
</button>

<!-- Badge éxito -->
<span class="bg-green-50 text-green-700 text-xs font-medium px-2.5 py-0.5 rounded">
  Activo
</span>

<!-- Card -->
<div class="bg-white border border-gray-200 rounded-xl p-6 shadow-sm">
  Contenido
</div>

CSS Variables

:root {
  --color-primary:        #4f46e5;
  --color-primary-hover:  #4338ca;
  --color-success:        #16a34a;
  --color-warning:        #ca8a04;
  --color-danger:         #dc2626;
  --color-text:           #111827;
  --color-text-secondary: #6b7280;
  --color-border:         #e5e7eb;
  --color-surface:        #f9fafb;

  --radius-md: 8px;
  --radius-lg: 12px;

  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}