Color
Una sola familia neutra, la escala Slate de Tailwind. El color cromático se reserva a estados funcionales. Mismo comportamiento en claro y oscuro.
No hay color de marca: ningún color compite por atención salvo cuando cumple una función. Nos apoyamos en la paleta de Tailwind, Slate para lo neutro y green/red/amber para los estados, elegida por probada y accesible en vez de inventar una propia.
Paleta
Estos swatches se pintan con var(--color-*) en vivo: lo que ves es el tema que tu sistema tiene activo ahora mismo. Cambia el modo de color del sistema y la página cambia con él. El mapa de ambos temas está en la tabla de abajo.
primary
Texto principal.
secondary
Texto secundario, metadata, captions.
background
Fondo principal.
surface
Superficies tintadas sobre el fondo.
surface-raised
Paneles elevados (bento surface). En dark es un lift, no una inversión.
border
Bordes por defecto. Separación sutil.
success
Solo estados funcionales.
error
Solo estados funcionales.
warning
Solo estados funcionales.
Claro y oscuro
| Token | Light | Dark |
|---|---|---|
| primary | Slate/900 | Slate/200 |
| secondary | Slate/500 | Slate/300 |
| background | White | Slate/700 |
| surface | Slate/50 | Slate/900 |
| surface-raised | = surface | primary al 4% sobre el fondo |
| border | Slate/200 | Slate/500 |
| success | Green/700 | Green/400 |
| error | Red/700 | Red/400 |
| warning | Amber/700 | Amber/400 |
La verdad de los valores es tokens.css; esta tabla es referencia. Si discrepan, gana el token.
Sobre media
Texto y scrim sobre imagen o vídeo no siguen al tema: la imaginería es arbitraria y la legibilidad no puede depender del modo de color.
on-media sobre media-scrim
| Token | Valor | Uso |
|---|---|---|
| --color-on-media | #FFFFFF, ambos temas | Texto sobre imagen/vídeo (label de BentoCaseCell; --hero-text deriva de él) |
| --media-scrim | rgba(0,0,0,0.7), ambos temas | Base del gradiente bajo títulos sobre media |
| --hero-overlay | rgba(0,0,0,0.2), ambos temas | Scrim suave del VideoHero: legibilidad sin apagar el metraje. No es --media-scrim a propósito. |
Reglas
La clicabilidad se comunica por forma (flecha o subrayado), no por color, para que sea legible con ratón, teclado y lector de pantalla. Dark mode se activa solo por prefers-color-scheme, sin toggle ni clase, con una excepción documentada: el negro del NavPill.