Cada pieza sale de tokens.json. Cambia la marca arriba: la gama, los botones y el texto encima se recalculan solos (el texto elige blanco o tinta por contraste WCAG).
Color
Semánticos (lo que se usa en las pantallas). En los componentes nunca va un color escrito a mano.
Gama de la marca
Generada del color del cliente.
Tipografía · Inter
Escala de 8 pasos; cifras con números tabulares.
Espaciado Fibonacci
Solo estos valores: p-f13, gap-f8, mt-f34… Excepción: los controles miden 44 px de alto (mínimo táctil).
Radios y sombras
Iconos · lucide, una línea, un solo color
Trazo 1,75 · tamaños 16 / 21 / 34 · siempre currentColor. Nada de emojis.
Botones
Campos e insignias
Así sale en el panel y en el login.
Falta el dominio del correo.
Se activa al tener las secuencias.
Casillas, opciones e interruptores
Componentes React reales (componentes/controles.tsx). Casilla con estado intermedio para «todos»; el interruptor es para lo que se aplica al instante. Toque de 44 px en todos.
Pestañas
Flechas izquierda y derecha, Inicio y Fin. En el teléfono la tira se desliza de lado.
Diálogo
Sobre el <dialog> nativo: el foco no sale, Esc cierra, el lector lo anuncia como modal y el foco vuelve al botón que lo abrió. En el teléfono, la hoja sube desde abajo.
Cifras clave
Gráficos
SVG propio. Una serie va en el color de la marca; la dona usa la paleta de gráficos (validada para daltonismo en claro y oscuro), máximo 6 trozos y el resto en «Otros». Pasa el ratón, el dedo o el teclado por encima; «Ver los datos» abre la tabla.
Superfiltro + tabla
Una sola barra: buscador + filtros que se combinan (cada opción dice cuántas filas daría) + contador + chips quitables + «Limpiar». El estado vive en la dirección. En el teléfono, un botón «Filtros» abre la hoja. Alineado con el de la Demo NovaCel.
En el teléfono
Hamburguesa arriba a la izquierda con todas las pantallas; nada de barra abajo; toques de 44 px. Pulsa el menú.