Fundamentos

Colores

Sistema de color — 10 familias con 3 tonos cada una y aliases semánticos para roles de UI.

El sistema tiene 10 familias de color, cada una con 3 tonos seleccionados (un claro, un medio y un oscuro — los números varían por familia: 100/400/500/800/900). 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
500
#616161
900
#000000
Piedra base 100
--color-ss-piedra-*
100
#FCF4D9
500
#B99330
800
#41330E

Principal

Rojo Ají base 500
--color-ss-aji-*
100
#FEE1E1
500
#F43131
800
#630808

Complementarios oscuros

Toldo base 800
--color-ss-toldo-*
100
#F5E0DD
400
#B15A50
800
#540A0A
Asiento base 800
--color-ss-asiento-*
100
#E2F0E4
400
#5D9C66
800
#18331B
Tai base 800
--color-ss-tai-*
100
#D6D6EC
300
#7678B4
800
#181A72

Complementarios vibrantes

Tigre base 500
--color-ss-tigre-*
100
#FFE8CC
500
#FF9100
900
#371E00
Sol base 400
--color-ss-sol-*
100
#FFF8D1
400
#FFDE32
800
#544802
Mantel base 500
--color-ss-mantel-*
100
#CCECFB
500
#00AEEF
800
#00425A
Veranera base 400
--color-ss-veranera-*
100
#FDE5FB
400
#F252E6
800
#4E0D49

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).