Dos capas: seis familias primitivas y siete recetas cerradas que las superficies invocan por nombre. Esta página también consume el sistema directamente — los swatches y las recetas de abajo renderean con los mismos tokens que corren en los decks y las webs.
El color no se elige: se invoca por su rol. Un layout pide color.surface.canvas, no “charcoal 100”. Cambiar la marca mañana toca un mapping, no 28 archivos.
Primitivos abajo, recetas arriba. Una superficie declara data-recipe="canvas-quiet" y consume cinco variables — --recipe-surface, --recipe-ink, --recipe-em, --recipe-accent, --recipe-warn. Los layouts nunca tocan un primitivo. Una surface, una receta — el resto deriva.
Los valores hex sin significado, agrupados por familia: charcoal, ivory, patagonia, lemon, red, plasma. Son el inventario, no la combinación.
--chimi-primitives-color-charcoal-100
--chimi-primitives-color-patagonia-base
--chimi-primitives-color-lemon-base
Siete combinaciones cerradas (canvas-quiet, canvas-signal, paper-warm, paper-cool, energy-loud, cool-fresh, critical). Cada una empaqueta cinco roles — surface, ink, em, accent, warn — en una sola unidad invocable por nombre.
--recipe-surface
--recipe-ink
--recipe-em
--recipe-accent
--recipe-warn
No es una escala continua 50→900. Cada familia tiene los tintes que el producto realmente usa — ni uno más. Charcoal necesita tres (canvas, raised, muted). Patagonia necesita dos (sobre claro, sobre oscuro). Ivory, lemon, red y plasma viven con uno solo.
Nota: el brand guide original listaba también slate, green, gold, y variantes ivory.light, *.deep. Nada de eso se usa en slides, así que quedó fuera del DS. Si aparecen, entran al JSON primero — ver design-system/docs/gaps.md.
Cada rol resuelve a un primitivo, pero las slides no lo saben. Si mañana color.surface.canvas deja de ser charcoal para ser navy, los 28 layouts heredan el cambio sin edición.
Fondos. Todas las slides declaran una surface; el resto del color del layout se elige en función de ella.
El color del texto default depende de la superficie. text.on-canvas es ivory; text.on-paper es charcoal; y así.
Accents son colores decorativos (bullets, borders, markers). Emphasis es el color del <em> italic editorial. Agrupados por color final — cada primitivo cubre varios roles según la superficie.
color.accent.primarybullets, kpi borders, rulescolor.marker.rulecitation border, section dividercolor.accent.primary-softeyebrow / citas sobre canvascolor.accent.energystat %, highlight, caretcolor.marker.caretstreaming-text caretcolor.marker.highlightmarcador fluorescente en quotescolor.emphasis.on-canvasem sobre charcoalcolor.accent.emphasisdestaque sobre light/energycolor.emphasis.on-paperem sobre ivorycolor.emphasis.on-accent-energyem sobre lemoncolor.emphasis.on-accent-coolem sobre patagoniacolor.accent.criticalvoz plasma sobre canvas oscurocolor.emphasis.on-accent-criticalem sobre plasmaLos nombres del sistema (raised, muted, mid) cuentan qué es cada variante, no cuándo usarla. Acá están las reglas prácticas, con las superficies reales lado a lado.
surface.canvas.surface.canvas-raised.Una superficie declara una receta. Cada una tiene un mood, un trabajo, y vecinos con los que no convive. La elección no es estética: la receta nace del rol que esa pieza cumple en el deck o en la web.
Ivory sobre charcoal con lemon como em editorial. El default del deck — la receta que sostiene el 70% del contenido.
de los deploys llegan a producción sin rollback después de adoptar trunk-based. Thunder en lemon como protagonista, eyebrow en patagonia.
Ivory como lienzo, charcoal como texto, red como em editorial. La única receta diurna — se usa como beat, no como estado.
Gemela fría de paper-warm. Mismo lienzo, distinto registro: el em pasa de red (acalorado) a patagonia (declarativo).
Lemon como fondo, charcoal como texto, red como em. La receta más alta en energía — la regla del 1 es estricta: una sola por página.
Capítulo en curso · accent en lemon, em en ivory porque la cool ya es cromática y no admite un segundo color saturado.
Plasma como fondo, ivory como texto, em en charcoal. Para alertas de scope, disclaimers legales, “esto duele” — máximo 2 por deck. Si aparece más, deja de funcionar como alerta.
En light theme las recetas canvas-* flipean a paper: surface pasa de charcoal a ivory.cream, ink de ivory a charcoal, em de lemon a red. Las recetas paper-* ya viven en ivory — no cambian. Es el mismo contrato visto desde el otro lado del día.
El default del deck. Charcoal de fondo, ivory para el texto, lemon para el em editorial.
En modo claro, el canvas se vuelve ivory.cream para evitar el sesgo amarillo en lecturas largas. El em pasa a red.
Implementación en web.css — un solo bloque :root[data-theme="light"] remapea --recipe-surface y --recipe-ink a las variantes de paper-warm. Las hairlines y muted bajan también su alpha porque charcoal sobre ivory lee más pesado que ivory sobre charcoal al mismo porcentaje.
En slides, las recetas paper-* usan charcoal como accent — la lectura editorial larga no quiere un CTA cromático. En webs, esa misma receta necesita un color de marca para que nav, links y botones se separen del body. Por eso en web --recipe-accent se remapea a patagonia solo sobre paper, dejando em/warn/ink/surface intactos.
En la web, el accent vuelve a patagonia para que nav, links y botones tengan presencia. Body y links de párrafo siguen en charcoal con underline (AA).
Como en tipografía: el contrato que mantiene la coherencia. Romperlas es legítimo, pero con razón.
Siempre color.surface.canvas, nunca primitives.color.charcoal.100. El primitivo es inventario; el rol es intención.
Si no hay rol, agregalo al semantic JSON.
No hay patagonia 300 ni lemon 700. Los que existen son los que el producto usa — ni uno más.
El tinte del medio se parece — pero nadie lo revisó, nadie lo validó, nadie garantiza su contraste.
El color del <em> lo decide el surface, no un default global. emphasis.on-canvas es lemon; on-paper es red.
Mirar la receta antes de elegir el em.
Los dos acentos principales peleando por atención se cancelan. Uno guía, el otro acompaña.
Ninguna de las dos palabras gana: cada mitad pelea con la otra por la misma cantidad de atención.
El deck vive mayoritariamente sobre surface.canvas. Light y accents son beats puntuales.
Cambiar a paper/lemon/patagonia es una decisión, no un rellleno.
Texto cuerpo ≥ 4.5:1, display grande ≥ 3:1. La receta lo garantiza; no re-tematizar afuera del sistema.
Lo que se lee acá, desde la fila 12 del auditorio es invisible.