Color

Paleta de marca y colores con intención: superficie, texto, acción y feedback.

Primitivos

Las escalas de la paleta. Son la materia prima: solo las usa la capa semántica.

neutral

50#fafafa

100#f5f5f5

200#e4e4e4

300#d4d4d4

400#8e8e8e

500#6b6b6b

600#525252

700#404040

800#262626

900#1a1a1a

950#0a0a0a

tomato

50#fff1f2

100#ffe1e3

200#ffc7ca

300#ff9fa5

400#ff6871

500#e30613

600#c20510

700#9a040d

800#85030d

900#610209

950#3d0106

sage

50#effbf2

100#ddf6e3

200#bcecc8

300#8bdea1

400#4fcb70

500#1a9139

600#15803d

700#126528

800#0e4f20

900#0a3917

950#06240e

green

50#f0fdf4

100#dcfce7

200#bbf7d0

300#86efac

400#4ade80

500#22c55e

600#16a34a

700#15803d

800#166534

900#14532d

950#052e16

yellow

50#fefce8

100#fef9c3

200#fef08a

300#fde047

400#facc15

500#eab308

600#ca8a04

700#a16207

800#854d0e

900#713f12

950#422006

red

50#fef2f2

100#fee2e2

200#fecaca

300#fca5a5

400#f87171

500#ef4444

600#dc2626

700#b91c1c

800#991b1b

900#7f1d1d

950#450a0a

blue

50#eff6ff

100#dbeafe

200#bfdbfe

300#93c5fd

400#60a5fa

500#3b82f6

600#2563eb

700#1d4ed8

800#1e40af

900#1e3a8a

950#172554

base

white#ffffff

black#141414

transparentrgba(255, 255, 255, 0)

alpha

black-50rgba(0, 0, 0, 0.5)

black-60rgba(0, 0, 0, 0.6)

white-10rgba(255, 255, 255, 0.1)

white-15rgba(255, 255, 255, 0.15)

white-30rgba(255, 255, 255, 0.3)

white-50rgba(255, 255, 255, 0.5)

white-80rgba(255, 255, 255, 0.8)

white-90rgba(255, 255, 255, 0.9)

Semánticos

Colores con intención. Son los que usan los componentes. Hacé clic en un nombre para copiar la variable.

brand

Muestra	Token	Valor	Uso
		#e30613	Logo, acentos de marca
		#c20510
		#9a040d
		#fff1f2

surface

Muestra	Token	Valor	Uso
		#fafafa	Fondo de página
		#ffffff	Cards, modales, header
		#f5f5f5	Secciones alternadas, hover neutro
		#e4e4e4	Skeletons, divisores gruesos
		#1a1a1a	Footer, secciones oscuras
		rgba(0, 0, 0, 0.5)	Detrás de drawers y modales
		rgba(0, 0, 0, 0.6)
		#e30613	Contador del carrito, bloques de marca
		#fff1f2
		#15803d	Barra superior, superficies verdes con texto (5.02:1)

text

Muestra	Token	Valor	Uso
		#1a1a1a	Texto principal (17.4:1)
		#6b6b6b	Gramaje, metadatos (5.33:1)
		#e4e4e4	Solo decorativo: numerales y flechas. Nunca información
		#d4d4d4
		#ffffff
		rgba(255, 255, 255, 0.8)
		#ffffff
		#e30613
		#c20510
		#e30613
		#15803d	Texto verde (5.02:1)

border

Muestra	Token	Valor	Uso
		#e4e4e4	Solo divisores y bordes decorativos. Controles usan form.border
		#1a1a1a	Hover y selección de chips y filtros
		#e30613	Campos en foco: reemplaza el color del borde
		#e30613
		#ffc7ca
		#15803d
		rgba(255, 255, 255, 0.3)

icon

Muestra	Token	Valor	Referencia
		#525252	var(--color-neutral-600)
		#6b6b6b	var(--color-neutral-500)
		#e30613	var(--color-tomato-500)
		#ffffff	var(--color-base-white)

action

Muestra	Token	Valor	Uso
		#e30613
		#c20510
		#9a040d
		#ffffff
		#1a1a1a
		#6b6b6b
		#ffffff
		#404040
		#fff1f2
		#ffe1e3
		#ffe1e3	Botón con foco de teclado dentro de un control (stepper). Ícono tomato.500 encima: ~4:1
		#ffffff
		#15803d
		#126528
		#ffffff
		#dc2626	Fondo de acciones destructivas (eliminar, vaciar carrito)
		#b91c1c
		#991b1b
		#ffffff	Texto sobre action.destructive.bg
		#fafafa
		#f5f5f5
		#e4e4e4
		#f5f5f5	Fondo de cualquier botón deshabilitado
		#d4d4d4	Texto e ícono deshabilitado. WCAG no exige contraste en deshabilitados
		#d4d4d4
		#c20510	5.75:1 sobre outline.bg-hover
		#9a040d	7.15:1 sobre outline.bg-active
		#1a1a1a
		#e4e4e4
		#e30613
		#c20510
		#9a040d

feedback

Muestra	Token	Valor	Uso
		#15803d
		#f0fdf4
		#16a34a	Borde de alertas y estados de éxito. 3.30:1 sobre blanco (1.4.11)
		#16a34a	Relleno: barras, íconos sobre fondo. No usar con texto blanco (3.30:1)
		#a16207
		#fefce8
		#fde047
		#ca8a04	Relleno: barras, íconos sobre fondo. No usar con texto blanco (3.30:1)
		#b91c1c	6.47:1 sobre blanco, 5.91:1 sobre error.bg
		#fef2f2
		#dc2626	Borde de alertas y estados de error. 4.83:1 sobre blanco
		#dc2626	Relleno: barras, íconos sobre fondo. Texto blanco OK (4.83:1)
		#1d4ed8
		#eff6ff
		#93c5fd
		#2563eb	Relleno: barras, íconos sobre fondo. No usar con texto blanco (3.30:1)

form

Muestra	Token	Valor	Uso
		#ffffff
		#8e8e8e	Borde de controles: 3.28:1 (WCAG 1.4.11)
		#525252
		#8e8e8e	Track de toggle apagado: 3.28:1
		#6b6b6b
		#1a1a1a	Foco de campos: 2px (border-width.focus) en neutral.900. El rojo queda solo para error
		#dc2626
		#fef2f2
		#f5f5f5
		#6b6b6b	5.33:1. Es el gris más claro que pasa AA para texto
		#fff1f2
		#1a1a1a	Etiqueta del campo
		#1a1a1a	Valor ingresado. Se distingue del placeholder por contraste
		#6b6b6b	Texto de ayuda debajo del campo
		#d4d4d4
		#d4d4d4
		#e30613
		#c20510
		#d4d4d4	Etiqueta de campo deshabilitado

focus

Muestra	Token	Valor	Uso
		#e30613
		#ffffff	Sobre fotos, superficies oscuras o de marca

commerce

Muestra	Token	Valor	Referencia
		#1a1a1a	var(--color-neutral-900)
		#6b6b6b	var(--color-neutral-500)
		#6b6b6b	var(--color-neutral-500)
		#ffffff	var(--color-base-white)
		#e30613	var(--color-tomato-500)
		#e30613	var(--color-tomato-500)
		#15803d	var(--color-sage-600)
		#ffffff	var(--color-base-white)
		#15803d	var(--color-green-700)