5. Arquitectura de tokens en tres niveles
| Nivel | Qué es | Ejemplo |
|---|---|---|
| Primitivo | El valor crudo, sin significado de uso | azul-600 = oklch(51.6% 0.223 264.6) |
| Semántico | El propósito, no el valor | color.accion.primaria → {azul-600} |
| Componente | El uso puntual en un elemento | boton.fondo → {color.accion.primaria} |
Regla de oro: en código y en diseño nunca se referencia un primitivo directamente. Se usa el token semántico. Cambiar la marca es cambiar una sola línea, y un sistema generativo puede razonar sobre color.accion.primaria porque el nombre lleva significado.
La fuente de verdad es tokens.json (formato DTCG). De ella derivan meridiano-tokens.css para web y meridiano-tailwind-preset.js para proyectos React + Tailwind.
Theming multimarca por semilla (nuevo en v3.1, lección de Material You): un tema es un re-mapeo de la capa semántica, nunca de la primitiva. Para crear una variante de marca basta declarar una semilla (un tono OKLCH) y derivar por fórmula los tres roles del acento manteniendo la luminosidad y el croma del original: primaria oklch(51.6% 0.223 H), primaria-activa oklch(44.2% 0.196 H) y primaria-suave oklch(95.2% 0.02 H), donde H es el matiz de la semilla. Como OKLCH es perceptualmente uniforme, el contraste medido se conserva para cualquier matiz y la variante hereda la validación de accesibilidad del tema original. Los neutros y funcionales no cambian entre marcas.