Nombra los colores por función y cambia el tema sin rehacer la interfaz

En una maqueta es fácil acabar con azul-500 en el botón, el enlace y el foco. Todo parece ordenado hasta que cambia la marca, llega el modo oscuro o ese azul deja de cumplir contraste en uno de los fondos. Entonces el nombre describe el tono, pero no ayuda a decidir dónde debe aparecer.

Separa el color base de su trabajo

Conserva primero una paleta base: azul, gris o rojo con sus pasos de claridad. Sobre ella crea otra capa que nombre usos, por ejemplo texto-principal, fondo-superficie, borde-suave y accion-principal. Carbon trabaja así: el token mantiene su función y cada tema le asigna un valor distinto.

La distinción evita que el azul corporativo acabe resolviendo cualquier decisión. USWDS separa una paleta amplia de sistema de un conjunto menor adaptado al proyecto. Habrá menos muestras sobre la mesa, sí, pero será mucho más fácil discutir para qué sirve cada una.

Empieza por texto, fondo, borde y estado

No hace falta bautizar cien variables el primer día. Elige una pantalla real y marca cuatro familias: texto, superficies, bordes y estados como error o éxito. Añade niveles como principal, secundario o inverso sólo si la interfaz los necesita: texto-secundario aclara más que gris-600.

Documenta también las parejas. En Material 3, una superficie tiene colores “sobre superficie” para texto e iconos. Esa relación importa tanto como cada muestra aislada: al cambiar el fondo, debes saber qué texto, icono y borde viajan con él.

Cuándo necesita nombre propio un componente

Un botón puede usar accion-principal y texto-sobre-accion sin inventar tokens propios. Crea boton-peligro-fondo sólo si ese componente necesita una regla que no comparte con avisos, enlaces u otros controles. Inventar un nombre para cada componente infla el catálogo y borra el motivo de muchas decisiones.

Anota junto a cada token su uso, las combinaciones permitidas y los estados que cubre. Incluso un nombre claro puede acabar usado a ojo si falta esa ficha.

Prueba tres cambios incómodos

Monta una tarjeta, un formulario y un aviso con los mismos tokens. Cambia el color de marca, activa un tema oscuro y sustituye el fondo de una sección. Revisa contraste, foco, error, desactivado y paso del cursor; no te quedes con la captura limpia del estado inicial.

Si esos tres cambios se resuelven reasignando valores y corrigiendo pocas excepciones, la separación funciona. Si obligan a buscar hexadecimales por todo el archivo, la estructura sigue atada a colores sueltos.