Los tres niveles
packages/design-tokens — la fuente única de verdad del lenguaje visual.
956 variables CSS, compiladas a artefactos para las dos plataformas.
| Nivel | Archivo | Qué contiene | Quién lo usa |
|---|---|---|---|
| 1 · Primitivos | primitives.ts | Rampas de 11 pasos, escala de 4 px, radios, tipografía, sombras, movimiento | Sólo los niveles 2 y 3 |
| 2 · Semánticos | semantic.ts | Propósito: surface, fgMuted, danger, focusRing — resueltos para claro y oscuro | Componentes de UI |
| 3 · Dominio | domain.ts | Vocabulario del CRM: estado de ticket, prioridad, canal, semáforo de KPI, segmento | Componentes de negocio |
Un componente nunca importa un primitivo. Si necesita un color que no existe como token semántico, se crea el token. Esa regla es lo que impide que el sistema se erosione con el primer «es que aquí necesitaba un verde un poco más claro».
La paleta
- Marca «Campo» — verde agrícola profundo. Único color de marca, y aparece sólo en botones primarios, navegación activa y logo.
- Acento «Cosecha» — ámbar. Realces y estados en curso. Nunca destructivo.
- Neutro «Niebla» — gris apenas frío, casi sin color propio.
El lienzo es blanco, no gris claro
El fondo de la aplicación y las tarjetas son blanco puro. La jerarquía la hacen un borde de un píxel y una sombra mínima. El gris se invierte: se reserva para lo que debe hundirse — barra lateral, cabecera de tabla, wells.
Relacionado: Paridad entre web y móvil · Accesibilidad · ADR-06 Un sistema de tokens compartido