Colores — Seim Seim DS

El sistema tiene 10 familias de color, cada una con 9 tonos (100 = más claro → 900 = más oscuro). La marca usa Rojo Ají 500 como color principal. Cada familia tiene un tono marcado como base — el color oficial según el guideline original.

Cómo usar los tokens

/* CSS */
background: var(--color-ss-aji-500);
color: var(--ss-color-text-primary);

<!-- Tailwind -->
<div class="bg-ss-aji-500 text-ss-piedra-100">...</div>

La paleta completa

Blanco y negro

Tinta base 900

--color-ss-tinta-*

100

#ECECEC

200

#D1D1D1

300

#AEAEAE

400

#858585

500

#616161

600

#424242

700

#2A2A2A

800

#141414

900

#000000

Piedra base 100

--color-ss-piedra-*

100

#FCF4D9

200

#F5E3A5

300

#ECCE6F

400

#DBB444

500

#B99330

600

#8E7022

700

#655017

800

#41330E

900

#1E1806

Principal

Rojo Ají base 500

--color-ss-aji-*

100

#FEE1E1

200

#FCB8B8

300

#F98585

400

#F65858

500

#F43131

600

#CA1B1B

700

#971010

800

#630808

900

#340303

Complementarios oscuros

Toldo base 800

--color-ss-toldo-*

100

#F5E0DD

200

#E6B6AF

300

#CF857C

400

#B15A50

500

#8D3A31

600

#6B251E

700

#5C1612

800

#540A0A

900

#2A0404

Asiento base 800

--color-ss-asiento-*

100

#E2F0E4

200

#BBDABF

300

#8BBE90

400

#5D9C66

500

#3E7A46

600

#2C5D33

700

#204625

800

#18331B

900

#0B1D0E

Tai base 800

--color-ss-tai-*

100

#D6D6EC

200

#A7A8CF

300

#7678B4

400

#4B4D9F

500

#2E3096

600

#212288

700

#1A1C7E

800

#181A72

900

#0A0B3A

Complementarios vibrantes

Tigre base 500

--color-ss-tigre-*

100

#FFE8CC

200

#FFCF8F

300

#FFB259

400

#FFA028

500

#FF9100

600

#D47500

700

#9E5700

800

#6B3B00

900

#371E00

Sol base 400

--color-ss-sol-*

100

#FFF8D1

200

#FFEE98

300

#FFE55B

400

#FFDE32

500

#E5C517

600

#B89B0B

700

#857006

800

#544802

900

#2A2301

Mantel base 500

--color-ss-mantel-*

100

#CCECFB

200

#99DAF8

300

#55C5F4

400

#1DB5F0

500

#00AEEF

600

#0087BB

700

#006389

800

#00425A

900

#00202D

Veranera base 400

--color-ss-veranera-*

100

#FDE5FB

200

#FAC0F5

300

#F789ED

400

#F252E6

500

#D52FC7

600

#A91F9D

700

#7B1573

800

#4E0D49

900

#270624

Aliases semánticos

Marca

El rojo de la identidad y sus variantes de interacción.

—ss-color-brand

—ss-color-brand-hover

—ss-color-brand-active

—ss-color-brand-soft

—ss-color-brand-contrast

Superficies

Fondos base de la app.

—ss-color-bg-base

—ss-color-bg-surface

—ss-color-bg-subtle

—ss-color-bg-inverse

Texto

Jerarquía tipográfica por color.

Primary — el texto principal en la mayoría de casos. —ss-color-text-primary

Secondary — metadatos, timestamps, info auxiliar. —ss-color-text-secondary

Muted — placeholders, estados vacíos, hints. —ss-color-text-muted

Brand — enlaces de marca, CTAs textuales. —ss-color-text-brand

Link — enlaces de navegación inline. —ss-color-text-link

Inverse — texto sobre fondos oscuros. —ss-color-text-inverse

Bordes

Cuatro pesos de borde, del más sutil al más intenso.

border-subtle

border-default

border-strong

border-brand

Estados

Los cuatro estados de feedback. Cada uno combina un color, un fondo suave y un color de texto.

Success — operación completada correctamente.
—ss-color-success

Warning — atención, algo requiere revisión.
—ss-color-warning

Error — algo falló, acción requerida.
—ss-color-error

Info — información neutra, tip o sugerencia.
—ss-color-info

Acentos decorativos

Para elementos gráficos, ilustraciones y splash pages — nunca para UI funcional.

accent-sun

accent-pink

accent-night

accent-deep

Reglas de uso

Migración desde el sistema v1

El DS y los proyectos (site/, event/) todavía conviven con los tokens viejos --color-seim-cream/red/dark. La migración completa queda como proyecto aparte — implica decidir canónicos (Rojo Ají 500 #F43131 vs rojo viejo #c41e1e, Piedra 100 #FCF4D9 vs crema viejo #f5e6c8).