Una identidad visual suele llegar en forma de PDF: logo, paleta, dos tipografías y algunos ejemplos de aplicación. Es un buen punto de partida, pero en pantalla cubre muy poco. Un sitio tiene que decidir el color de un enlace, el aspecto de un botón deshabilitado, cómo aparece un error de formulario, qué pasa cuando un título mide el doble de lo previsto y cómo se ve todo eso en modo oscuro. Cuando nadie toma esas decisiones antes, las toma la prisa, página por página.
Este texto trata de ese paso: de la identidad como archivo a la identidad como sistema. Si estás empezando, con poco presupuesto y todavía sin el logo resuelto, el post sobre identidad visual para pequeñas empresas te va a servir más ahora.
Por qué el manual no llega solo a la pantalla
El manual de marca muestra la marca en condiciones ideales. La interfaz vive de la variación: pantallas de distintos tamaños, contenido real (nombres largos, fotos malas, listas vacías) e interacción (pasar el mouse, enfocar con el teclado, esperar a que algo cargue). Cada una de esas situaciones pide una decisión visual.
El trabajo de un sistema es tomar esas decisiones una sola vez, ponerles nombre y reutilizarlas en todas partes.
Tokens: decisiones con nombre
Los tokens son los valores básicos del sistema, cada uno con un nombre: colores, espaciados, tamaños de texto, radios de borde, sombras, duración de las animaciones. Suelo separarlos en dos capas:
- primitivos, que describen el valor ("naranja 500", "gris 900");
- semánticos, que describen el rol ("color de acento", "texto secundario", "borde", "fondo de error").
Los componentes solo usan los semánticos. Así, ajustar el tono de acento, o crear un tema oscuro, es cambiar un solo lugar y no andar buscando colores repartidos en cincuenta archivos. En el código se convierten en variables CSS; en Figma, en variables con los mismos nombres. Cuando diseño y código hablan el mismo idioma, desaparece buena parte del "en el diseño se veía distinto".
Tipografía: escala, no solo fuente
Elegir la fuente es la parte fácil. Lo que sostiene la lectura es la escala: cuántos tamaños existen (título, subtítulo, cuerpo, leyenda, etiqueta), con qué interlineado y cuál es el ancho máximo de línea para que el texto corrido no canse. Pocos niveles bien definidos funcionan mejor que un tamaño nuevo en cada sección.
También hay un lado técnico. Cada peso de fuente es un archivo más para descargar, así que dos familias con pocos pesos suelen bastar. Y una fuente de respaldo con proporciones parecidas evita que el texto "salte" cuando carga la fuente final, tema que aparece en el post sobre velocidad del sitio y Core Web Vitals.
Color: roles antes que tonos
La paleta de la marca no es la paleta de la interfaz. La interfaz necesita roles: fondo, superficie, texto, texto secundario, borde, acento, éxito, advertencia, error. El color de la marca ocupa algunos de esos roles, no todos.
Aquí entra el contraste. Las pautas de accesibilidad del W3C piden al menos 4,5:1 entre el texto normal y el fondo, y 3:1 para texto grande. Muchos colores de marca, sobre todo naranjas y amarillos, quedan muy bien en superficies grandes y fallan como color de texto pequeño.
En este sitio, por ejemplo, el naranja de acento tiene una variante solo para texto: más oscura en el tema claro y más clara en el tema oscuro, porque el mismo tono no alcanza el contraste necesario en los dos fondos.
Componentes y sus estados
Botón, campo de formulario, tarjeta, menú, aviso. Cada componente necesita todos sus estados diseñados, no solo el predeterminado:
- reposo, hover y presionado;
- foco visible para quien navega con el teclado;
- deshabilitado y cargando;
- error, éxito y vacío.
El foco visible no es un detalle estético: es lo que permite usar el sitio sin mouse. Y estados como "sin resultados" o "algo salió mal" también son identidad. Ahí aparece el tono de voz de la marca justo cuando la persona más lo necesita.
El modo oscuro no es invertir los colores
Un tema oscuro es un segundo conjunto de valores para los mismos tokens semánticos. Algunas reglas evitan los errores más comunes:
- las superficies se aclaran un poco a medida que "suben" respecto al fondo;
- los colores muy saturados necesitan suavizarse para no vibrar sobre el oscuro;
- las sombras pierden efecto y los bordes pasan a separar mejor;
- los logos e imágenes con fondo transparente pueden necesitar una versión propia.
El sitio puede seguir la preferencia del sistema operativo con prefers-color-scheme y ofrecer además el cambio manual. Si el presupuesto no alcanza para dos temas bien hechos, prefiero entregar un tema cuidado antes que dos a medias.
Íconos e ilustración de la misma mano
Íconos de bibliotecas distintas, con grosores y esquinas distintos, delatan improvisación. Conviene elegir una familia y fijar reglas: grosor de línea, retícula, contorno o relleno.
Para la ilustración la lógica es la misma: el estilo tiene que ser una regla, no una imagen suelta. La identidad de este sitio parte de un juego de planos técnicos. Cada sección abre con un rótulo numerado, como una hoja de un juego de planos, y las escenas isométricas siguen la misma perspectiva, la misma línea y el mismo tipo de anotación. Esa regla es la que permite dibujar una escena nueva sin que parezca de otro sitio.
Cómo lo llevo en un proyecto
Como hago el diseño y el código, los tokens se definen una vez y se usan con el mismo nombre en los dos lados. La documentación es una página sencilla con tokens, componentes y estados, no un manual de cien páginas que nadie abre. Y todo queda a nombre del cliente: archivos de diseño, repositorio, dominio y hosting. Explico cómo entra esto en un proyecto de sitio en la página de websites.
Si tu identidad todavía no se convirtió en un sistema en pantalla, puedes contarme en qué punto está desde la página de contacto.