Esta página no se limita a describir el sistema — lo consume. Todo lo que leés está compuesto con los mismos tokens semánticos que usan las slides.
El sistema tipográfico vive en design-system/tokens/type-style.semantic.json. Cada titular, subtítulo y eyebrow de esta página cita un type-style por nombre — nada se define aquí dos veces.
Primitivos abajo, recetas arriba. Cada surface declara una receta y consume cinco variables — --recipe-surface, --recipe-ink, --recipe-em, --recipe-accent, --recipe-warn. La receta también whitelistea qué familias tipográficas pueden aparecer (ver sección 07).
Los valores sin significado: hex, px, stacks de fuente, weight steps. Son el inventario, no la combinación. Las superficies nunca los tocan directo.
--chimi-primitives-color-patagonia-base
--chimi-primitives-size-font-4xl
--chimi-primitives-font-family-chaney
Siete recetas cerradas (canvas-quiet, canvas-signal, paper-warm/cool, energy-loud, cool-fresh, critical). Cada una empaqueta cinco roles de color + una whitelist de familias permitidas (display, body, editorial, data, code, numeral). Una surface, una receta — el resto deriva.
--recipe-surface · --recipe-ink
--recipe-em · --recipe-accent
--recipe-warn + type whitelist
Cada familia tiene un rol semántico. Se la invoca por el rol (font.family.display), no por el nombre del archivo — así cambiar una tipografía no toca ningún layout.
No es estética: cada familia tiene un trabajo. Display grita en cover, body sostiene el cuerpo, editorial siempre va en cursiva, data solo aparece para números protagonistas, mono firma metadata. Salirse del rol rompe la jerarquía sin avisar.
Para titulares cortos y enormes — covers, big-concept, hero de blog y techconf, transiciones de sección. Pensada para 3–10 palabras como mucho. Si el bloque pasa de 15 palabras, es un body disfrazado.
El caballo de batalla. Subtítulos, bullets, párrafos, UI de formularios, descripciones de evento, nav. Cualquier texto que el lector lea de corrido pasa por acá.
Casi exclusivamente como cursiva: el color del <em>, los subtítulos editoriales bajo display, los testimonios y quotes. Nunca como cuerpo recto — eso rompe el contrato del sistema.
Solo para numerales protagonistas. Hero stats, multiplicadores, KPI grids, big-stat. Nunca para cuerpo, nunca para títulos textuales — la condensación cansa la vista en cualquier otro contexto.
Mono para todo lo que es metadata: eyebrows, labels, código (block o inline), tokens, file names en tablas. Nunca como cuerpo — es una voz de anotación, no de lectura.
Cada familia trae los pesos y estilos que el sistema realmente usa. Si necesitás uno que no está acá, primero entra al JSON — no se cargan archivos extra desde un layout.
Las dos escalas usan Thunder, pero hacen cosas distintas. Data es el numeral protagonista — el héroe de la slide. Numeral es para listas: marcadores chicos al lado de un ítem, capítulos numerados, ranking. Confundirlas hace que la slide pierda jerarquía.
Los --chimi-type-* están tuneados para 1920×1080 — una slide es un cartel a 3 metros. Una web vive a 30 cm de la cara y se redimensiona. Por eso web.css publica composites paralelos --web-display-*, --web-body-*, --web-eyebrow con valores clamp() tuneados al canvas web. Usá uno u otro según el contexto.
Display.lg viene a 148px. Pensado para auditorio: visible desde la fila 12, tipografía dominante en el cartel.
Web-display.lg clampea entre 48 y 88px según viewport. Mismo carácter, otro fluido — no se siente subdimensionada en mobile ni gigante en 4K.
Brand y type usan slide-scale a propósito — esta página es un specimen del DS, así que muestra los valores canónicos. Las webs reales (blog, techconf, etc.) consumen web-scale via web.css.
Cada receta whitelistea las familias que pueden aparecer en su superficie. Energy-loud no admite editorial larga, paper-cool restringe data salvo en kpi-grid, critical bg permite solo display + body. El linter npm run check:recipes reporta violaciones.
Cada rol tipográfico tiene una escala t-shirt (sm, md, lg, xl, 2xl). El style completo — familia + tamaño + line-height + letter-spacing — está encapsulado en una sola variable --chimi-type-<rol>-<escala>. Un layout escribe font: var(--chimi-type-display-md) y listo.
No son reglas morales — son el contrato que hace que todo se vea coherente. Romperlas es posible; hay que tener una razón clara.
Display para titulares, body para texto, editorial para énfasis. El rol viene antes que el gusto.
Referenciá type-styles por nombre, no por tamaño.
Dos voces competing en la misma línea se neutralizan. Editorial va siempre adentro (como em), display afuera.
Editorial no reemplaza a display — lo acentúa.
Siempre color.surface.canvas, nunca primitives.color.charcoal.100.
Si no hay rol para lo que necesitás, agregalo al JSON.
Pensada para titulares cortos. Párrafos enteros en display cansan al lector en tres líneas.
Máxima ~15 palabras por bloque de display.