Una marca hecha para imprenta tiene que sobrevivir al papel. Una marca hecha para pantalla tiene que sobrevivir a un móvil de 320 píxeles, a una tarde con sol y a un lector que no distingue tu rojo de tu gris.
Lo que se suele entregar es un PDF. Un logo con su área de respeto, una paleta de seis muestras, dos tipografías, una página de lo que sí y lo que no, y un párrafo sobre los valores.
Luego eso llega a una web y empiezan las preguntas. Qué tamaño tiene el texto en un móvil. Cómo se ve un botón desactivado. Cuál de los seis colores es el enlace. Qué pasa con el logo sobre fondo oscuro. Nada de eso está en el PDF, así que lo decide un programador, a las cuatro de la tarde, y esa decisión pasa a ser la marca para todo el que entre.
Ahí está el hueco. No es mal diseño, son decisiones que faltan.
¿Qué incluye un sistema de marca digital?
Más allá del logo y la paleta, un sistema que funcione en pantalla tiene que fijar: una escala tipográfica con los tamaños en los dos extremos, no solo dos nombres de fuente; la relación de contraste de cada pareja de colores que se vaya a usar de verdad, y qué parejas están prohibidas; los estados de cada elemento interactivo, es decir normal, hover, foco, desactivado y error; cómo se comporta el movimiento, o sea duración, curva y qué ocurre con el movimiento reducido; y cómo se entrega todo eso, que deberían ser tokens de diseño en código y no un documento que alguien tenga que interpretar.
Un color no es un color, es un presupuesto de contraste
Aquí es donde más se rompen las marcas, y el fallo es casi siempre el mismo. El color que lleva la identidad acaba usándose para texto, porque es el color de la marca y el texto es un sitio donde va texto.
Nuestro acento es un burdeos oscuro. Esto es lo que hace, medido y no supuesto.
Un solo color, dos veredictos opuestos, y la diferencia es únicamente lo que hay detrás. Sobre el campo hueso supera el nivel AAA para texto corrido con margen. Sobre el campo oscuro es ilegible en cualquier tamaño pequeño, y por mucho que se insista en que es el color de la marca eso no cambia.
Por eso la norma de nuestro sistema está escrita como una prohibición y no como un permiso. El burdeos puede ir en botones, en caracteres de display muy grandes y en filetes y marcadores. Está prohibido en texto funcional pequeño sobre el campo oscuro, y prohibido en los contornos de foco de ese campo, donde el hueso hace el trabajo a 15:1.
Los umbrales que conviene saberse son pocos. El texto corrido necesita 4,5 a 1. El texto de 24 píxeles, o de 19 en negrita, necesita 3 a 1. Los componentes de interfaz y sus indicadores de foco, también 3 a 1. Un manual de marca que enumera colores sin enumerar estos números le ha pasado el problema a quien construya con él.
¿Puedo usar el color de mi marca para el texto?
Solo si llega a 4,5:1 contra el fondo sobre el que va a ir de verdad, cosa que muchos colores de marca no consiguen. El contraste es una propiedad de la pareja, no del color, así que el mismo acento puede ser perfectamente legible sobre un campo claro e inservible sobre uno oscuro. Lo práctico es medir todas las combinaciones que pienses publicar, dejar por escrito qué parejas están permitidas y darle al sistema un segundo color que sostenga el texto con contraste alto, para que el acento no tenga que hacerlo nunca.
La tipografía es una escala, no dos nombres de fuente
Elegir una fuente de display y otra de texto es la mitad fácil. La mitad que decide cómo se ve la marca de verdad son los tamaños, y esos se suelen dejar a quien esté montando la página.
El caso difícil es el rango. Un titular a 96 píxeles queda compuesto en un portátil y absurdo en un móvil, donde se convierte en cuatro palabras por línea y un scroll para él solo. Los tamaños fijos con un par de breakpoints resuelven esto a saltos, y los saltos se ven: el texto pega un brinco cuando la ventana cruza el umbral.
Una escala fluida quita el salto haciendo que el tamaño dependa del ancho de la ventana, con un suelo y un techo para que no se vuelva ilegible por ninguno de los dos lados.
/* mínimo, preferido, máximo */
font-size: clamp(2.2rem, 5.8vw, 7.2rem);
/* Por debajo de ~380px se queda en 2,2rem y deja de encoger.
Por encima de ~1990px se queda en 7,2rem y deja de crecer.
Entre medias sigue a la ventana sin escalones. */Lo que va en el sistema no es la técnica, es la decisión: para cada papel de la jerarquía, el tamaño en el extremo pequeño y en el extremo grande, más su interlineado y su espaciado. Con seis papeles suele bastar. Display, título, subtítulo, texto, texto pequeño y la etiqueta en mayúsculas.
El movimiento es una propiedad de marca que nadie escribe
Dos webs pueden compartir logo, paleta y tipografía y parecer empresas distintas, porque una se mueve en 180 milisegundos y la otra tarda 700 con una curva pesada. La velocidad y la curva se leen como carácter mucho antes de que nadie repare conscientemente en ellas.
Es una omisión rara, porque el movimiento es una de las pocas propiedades de marca que está actuando de forma continua mientras alguien está en la web. Con tres líneas se arregla.
- Una duración para la respuesta de la interfaz, que debe ser corta, y otra para el contenido que aparece, que puede ser más larga.
- Una o dos curvas para todo el sistema, con nombre, para que nadie se invente una tercera a medianoche.
- Qué pasa con el movimiento reducido, que es un ajuste real que usa gente real y no una nota al pie de accesibilidad. La respuesta casi siempre es que el cambio ocurre al instante, no que deje de ocurrir.
En lo último conviene ser tajante, porque la implementación habitual está mal. Desactivar la animación no puede desactivar el resultado: un elemento que iba a aparecer con un fundido tiene que estar ahí, no quedarse invisible para siempre.
El acento funciona porque está racionado
Hay un fallo típico en el que el color de marca se aplica a todo lo que podría beneficiarse de destacar, y el resultado es una página donde no destaca nada. Esto no es una cuestión de gusto, es aritmética. Destacar es una proporción, y una proporción que se acerca a uno ya no vale nada.
Por eso un sistema sirve más cuando dice dónde aparece el acento que cuando dice cuál es el acento. En esta web el burdeos tiene cuatro trabajos y ninguno más: el relleno de un botón principal, el punto final que cierra una línea de display, los marcadores de una lista y la cifra de un dato. Todo lo demás es hueso sobre casi negro.
El límite es el que está trabajando. Cuando aparece el acento significa algo, porque no se ha gastado en otro sitio.
Entrega tokens, no un documento
Un manual de marca en PDF tiene una vida previsible. Se sigue de cerca en el primer proyecto, de lejos en el segundo, y para el cuarto es un archivo que hay que pedirle a alguien.
El motivo no es la disciplina. Es que un documento obliga a que una persona lo traduzca cada vez, y cada traducción es una ocasión de desviarse. Los valores que viven en el código no hay que traducirlos.
/* Una definición, usada en todas partes. */
@theme {
--color-ink: #020612;
--color-bone: #E0DEDC;
--color-signal: #891A20;
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}El PDF sigue teniendo un trabajo, y es el que se le da bien: explicar el porqué. Por qué este color, por qué este tono de voz, que es la parte que un archivo de tokens no puede llevar y que un diseñador nuevo necesita de verdad. La referencia en el documento, los valores en el código.
¿Cuánto de una marca se puede decidir antes de que exista la web?
La identidad sí, el sistema casi no. Un logo, una paleta, una tipografía y un tono de voz se pueden cerrar de forma aislada. Las decisiones que mantienen coherente una marca, qué tamaños a qué anchos, qué parejas de color son legibles, cómo se comportan los componentes en cada estado, cómo se siente el movimiento, solo se pueden responder cuando hay una interfaz real contra la que responderlas. En la práctica el orden útil es identidad primero, después unas pocas pantallas de verdad, y después el sistema escrito a partir de lo que esas pantallas te obligaron a decidir.
La medida de un sistema de marca no es lo bien que queda la primera página. Es cuánto se sigue pareciendo a la misma empresa la página número quince, hecha por alguien que no estaba al principio.
