Tokens,
recetas &
contraste.
Acá no "elegimos un azul lindo": armamos relaciones entre fondo, tinta y acento. Las recetas son combos cerrados — si los respetás, el contraste ya vino en el paquete.
Dos capas,
una dirección.
Primero el inventario de hex (primitivos). Arriba, las recetas empaquetan roles que la interfaz sí puede nombrar. Nunca un hex suelto en un componente: siempre un token de receta.
Primitives
Valores hex sin contexto. Son el inventario de la marca. Solo existen para ser mapeados por la capa semántica.
--chimi-primitives-color-patagonia-base
--chimi-primitives-color-lemon-base Recipes
Seis recetas activas (canvas-quiet, canvas-signal, paper, energy-loud, cool-fresh, critical). Cada una define surface, ink, em, accent, warn — el "plato armado" que consume la UI.
--recipe-surface · --recipe-ink
--recipe-em · --recipe-accent El inventario.
Cinco familias de primitivos. Son el único lugar donde existen hex "crudos" — todo lo demás los referencia a través de recetas.
Las dos variantes son casi idénticas a propósito. Base es el ivory canónico que usa toda la UI. Cream existe solo como override de high-contrast sobre dark theme. Si dudás, usá Base.
Seis recetas,
seis contextos.
Cada receta es un combo cerrado: surface + ink + em + accent. El componente solo sabe de roles — nunca de hex. Activás una receta con data-recipe="<id>" en el contenedor.
canvas-signal en surface e ink; cambia el em (Lemon) y la fuente display: usar Chaney para titulares y At Aero para cuerpo.Texto de cuerpo sobre este fondo — contrastes verificados WCAG AA.
canvas-quiet; cambia el em (Wada, rojo) y la fuente del número: usar Thunder para cifras (44–128px) y At Aero para el cuerpo. Si no estás mostrando una métrica protagonista, usá canvas-quiet.Dato contextual con énfasis Wada sobre fondo oscuro.
critical — ver más abajo).Lectura cómoda — ivory sobre charcoal con énfasis Patagonia.
ceba después.
Charcoal sobre Lemon — contraste alto, energía clara.
Decidí.
Charcoal sobre Patagonia — fresco, sin agresividad.
no es la respuesta.
Surface Plasma + ink Ivory. "Atención" es solo el texto del eyebrow — no una receta aparte.
data-recipe="canvas-quiet" Poné el atributo en el contenedor padre (página, sección o componente). Las variables --recipe-* se resuelven en cascada automáticamente — cero props adicionales.