Sistema
Color
Paleta completa, ratios de contraste y guía de aplicación — qué color va en qué elemento.
Base de neutros cálidos que respiran, con un acento teal profundo que aporta inteligencia sin frialdad. El terracotta y el ocre funcionan como acentos secundarios para verticales y piezas editoriales.
Neutros base
Siete tonos de cálido a oscuro. Cada uno tiene un rol específico.
| Token | HEX | Rol |
|---|---|---|
--cream | #F6F2EC | Background principal en light |
--sand | #EDE8E0 | Background secundario, cards, borders sutiles |
--warm-gray | #C4BDB3 | Borders, divisores, líneas auxiliares |
--stone | #8A8279 | Texto auxiliar, labels, captions (solo tamaños grandes) |
--earth | #5C564E | Texto secundario, intro, párrafo lead |
--ink | #26221E | Texto principal sobre cream / sand |
--deep | #1A1714 | Background principal en dark, portadas, manifiesto |
Acento primario — Teal
Inteligencia editorial. Cuatro pasos, del más sutil al más denso.
| Token | HEX | Rol |
|---|---|---|
--accent-wash | #EEF5F5 | Fondos sutiles para callouts/highlights en light |
--accent-muted | #D4E4E5 | Backgrounds de tag/badge en light |
--accent-light | #3A7A7D | Acento sobre fondos oscuros (deep/ink) |
--accent | #2B5C5E | Acento principal sobre fondos claros (cream/sand) |
Acentos secundarios — Verticales
| Token | HEX | Uso |
|---|---|---|
--terracotta-muted | #F0DDD4 | Background suave de la vertical Diseño |
--terracotta-light | #D4815F | Variante clara (uso restringido) |
--terracotta | #B85C3A | Acento de la vertical Diseño |
--ocre-muted | #F2E8D0 | Background suave editorial |
--ocre | #C49A3C | Acento ocasional (futura vertical Educación) |
Contraste y accesibilidad
Las combinaciones de texto/fondo permitidas deben cumplir WCAG AA (4.5:1 para cuerpo, 3:1 para texto grande).
| Combinación | Ratio | Cuerpo | Título |
|---|---|---|---|
| Ink sobre Cream | 13.2:1 | AAA | AAA |
| Cream sobre Deep | 14.8:1 | AAA | AAA |
| Accent sobre Cream | 6.1:1 | AA | AAA |
| Accent-Light sobre Deep | 4.7:1 | AA | AA |
| Earth sobre Cream | 7.4:1 | AAA | AAA |
| Stone sobre Cream | 3.7:1 | Falla | AA grande |
| Terracotta sobre Cream | 4.6:1 | AA | AAA |
Stone en cuerpo
Stone no pasa AA para texto de cuerpo sobre cream. Solo usarlo en labels, captions y texto auxiliar en tamaños grandes (14px+).
Reglas del color
- Máximo 2 colores de acento por composición. Resto, neutros.
- No mezclar terracotta y teal en la misma pieza — verticales distintas, colapsan ópticamente.
- Stone no se usa como cuerpo sobre cream — solo etiquetas y texto auxiliar grande.
- Sin gradientes neón ni paletas tech-startup (violeta+cyan, cripto, web3).
- Sin gradientes entre dos acentos del sistema. Solo fundidos muy sutiles dentro de un mismo tono.
Aplicación — qué color va en qué elemento
Cada token tiene un rol concreto dentro del sistema. Esta guía resume dónde va cada uno.
Fondos estructurales
--cream— fondo default de la mayoría de secciones. Retira el blanco puro y fija el tono papel.--sand— pausa de ritmo. Secciones cortas de servicio (índice, referencias) para puntuar el libro.--ink— momentos íntimos como el manifiesto. Cálido pero sobrio.--deep— reservado para la tapa y aplicaciones máximas del isotipo. Único momento de contraste máximo.--accent-wash— una única pausa editorial en el tramo largo del libro (ej. tono de voz). No usar como fondo recurrente.
Texto
--ink— body primary y títulos sobre fondos claros.--earth— párrafos intro y body alterno con peso. Buen sustituto del ink cuando el título ya carga.--stone— labels, captions, numeraciones de sección, texto auxiliar. Solo en tamaños de 14px o más.--warm-gray— hairlines, bordes sutiles, elementos decorativos. No texto legible sobre cream.
Acento primario — Teal
--accent— énfasis controlado: links, hovers, elementos clave. Máximo 1–2 apariciones por vista.--accent-light— brillos y highlights sobre fondos dark (manifiesto, tapa). No usar sobre fondos claros: pierde presencia.--accent-muted— chips, tags, fondos de badges pequeños.--accent-wash— cuando el teal necesita estar en un fondo extenso sin protagonizar.
Acentos secundarios — Verticales
--terracotta(+ light + muted) — identifica una vertical temática. Usar como color de sub-línea, nunca como fondo extenso.--ocre(+ muted) — mismo criterio que terracotta, reservado para otra vertical.- Ambos sirven también para marcar estados negativos (errores, prohibición) con parsimonia.
- Nunca mezclar terracotta y ocre con teal en la misma composición — colapsan ópticamente.