El logotipo se estiraba un 17,8% y nadie lo había notado.

Durante un tiempo, el logotipo de Aguacatestudio estuvo estirado un 17,8%, y nadie lo vio.

No era una distorsión escandalosa. Era la clase de error que el ojo nota sin poder explicarlo: el logo se veía un poco raro y nadie sabía decir por qué. No había nada torcido, nada mal alineado, nada que señalar con el dedo. Solo un número, dentro de un archivo SVG, calculado sobre una tipografía que ya no era la que se estaba usando.

Ese número es textLength: el ancho exacto, en píxeles, al que el logotipo tiene que ajustarse para no desbordar su propio marco. Se midió una vez, contra la fuente que el navegador usaba de repuesto mientras la tipografía real todavía no estaba cargada en el sitio. Cuando esa tipografía (Instrument Sans, autoalojada) entró en producción, el ancho natural del texto cambió. El número viejo se quedó fijo. Y un número fijo, aplicado a una anchura que ya no existe, es exactamente lo que estira un logotipo sin que nadie toque nada a propósito.

Una palabra que se pliega sobre sí misma

Antes de llegar a ese número hay una decisión más simple, y es la que sostiene todo lo demás: el logotipo de Aguacatestudio no es un símbolo más una palabra puestos uno al lado del otro. Es una palabra que se pliega sobre sí misma.

“Aguacate” y “estudio” comparten una letra: la e que cierra la primera y abre la segunda. Aguacat-e-studio. En vez de escribir el nombre completo y añadir un icono al lado para que “signifique algo”, el wordmark aprovecha esa coincidencia real del español y pone justo esa e en el color de acento, marcando el punto exacto donde una palabra termina y la otra empieza, sin espacio, sin guion, sin ningún signo que las separe.

Es una decisión tipográfica, no decorativa: funciona porque el pliegue ocurre sobre una letra que las dos palabras comparten de verdad, no sobre una elegida porque quedaba bien en el centro.

La última letra no es una letra

El pliegue resuelve el nombre. La palabra sigue teniendo catorce letras, la última de las cuales es una “o” — y esa “o” es donde vive el aguacate: no al lado de la palabra, sino en su sitio, sustituyéndola. Aguacatestudi, y donde iría la última vocal, la marca.

La diferencia entre las dos versiones no es de gusto, es de lectura. Un símbolo pegado a una palabra completa se lee como dos cosas — el nombre, y aparte, un icono que lo decora. Un símbolo que ocupa el sitio exacto de una letra se lee como una cosa. La prueba está en quitar el espacio: si al pegar el símbolo contra la palabra cambia si se siente “dentro” o “al lado” del nombre, el espacio ya era parte del diseño del logotipo, no un detalle de maquetación.

Que sea precisamente la última “o” la que se sustituye no es casualidad: es la letra redonda, y el aguacate ya tiene una relación de forma con una vocal redonda que no tiene con ninguna consonante. Sustituir una “a” o una “t” habría sido forzado; sustituir la “o” final aprovecha un parecido que ya estaba ahí.

Encajar una figura donde antes había una letra exige la misma precisión que exigió el número del principio, solo que en dos ejes en vez de uno. En horizontal: el hueco entre la “i” y el aguacate se midió para que fuera igual al hueco natural entre la “d” y la “i” en esta misma palabra —4,92 píxeles a este tamaño—, no el hueco (más cerrado, 2,88px) que tendría una “o” normal ahí. Una forma ajena a las letras necesita algo más de aire que una vocal para no leerse como pegada de más. En vertical: el aguacate se dibuja un 8% más alto que una “o” real del mismo tamaño —34px la “o”, 36,72px la marca—, porque su silueta y su hueco interior no son los de una vocal redonda, y sustituir con el mismo tamaño matemático la habría dejado viéndose más pequeña de lo que es. Coincidir en tamaño no es lo mismo que coincidir a la vista.

El número que se quedó desfasado

Ese pliegue tiene que caber en un espacio exacto para no desbordarse, y ahí es donde entra el número que abre este artículo.

La primera vez que alguien midió el ancho del wordmark completo, el resultado fue 541. Esa medición se hizo mientras el sitio todavía caía en una tipografía de sistema, sin ninguna fuente propia cargada en el navegador, así que 541 era el ancho de esas letras en una fuente que ni siquiera iba a ser la definitiva.

Cuando Instrument Sans se autoalojó y pasó a ser la fuente real, el ancho natural del mismo texto pasó a ser 459. El número que fijaba el logotipo, sin embargo, seguía siendo 541: 82 píxeles de más repartidos sobre un texto que ya no los necesitaba. Eso es lo que produce un 17,8% de distorsión sin que nadie haya tocado el diseño a propósito. No es un error de diseño, es un número que dejó de describir la realidad y siguió aplicándose igual.

Corregirlo fue mecánico: cambiar 541 por 459. Encontrarlo no lo fue. Nadie ve un 18% de más en una palabra cuando lleva viéndola así desde el principio. Hace falta medir, no mirar, y volver a medir cada vez que cambia la tipografía, porque el número deja de ser cierto en el momento exacto en que la fuente cambia, no cuando alguien se da cuenta.

Lo pequeño hasta que cabe en 16 píxeles

El wordmark completo, aguacate incluido, funciona en una cabecera. Pero un nombre no funciona a todos los tamaños: a 16 píxeles, en la pestaña de un navegador, no hay sitio para ninguna palabra, letra final o no.

Para eso la misma figura existe también sola: el cuerpo y el hueso del aguacate son una geometría única, definida una vez, que el wordmark usa como su última letra y que un icono cuadrado con fondo propio usa sin ninguna palabra alrededor. No son dos marcas que se parecen. Es una marca con dos aplicaciones, según el tamaño y el sitio donde tiene que funcionar — y las dos nunca aparecen juntas por el mismo motivo que la letra sustituye a la “o” en vez de sentarse a su lado: anunciar dos veces la misma figura no es reforzarla, es repetirla.

Reducida a ese icono, sin ningún detalle añadido para que sobreviva a 16 o 32 píxeles, es lo que aparece en la pestaña del navegador y en el icono de la aplicación. Un sistema de identidad digital tiene que asumir que la mayoría de las veces en que alguien lo ve, es así de pequeño, y diseñar para ese tamaño desde el principio en vez de recortar después lo que no cabe.

Un color no es una decisión de gusto

Elegir un verde bonito es fácil. Lo difícil es decidir qué hace cada color dentro de una interfaz real: cuál lleva el texto, cuál aguanta un fondo oscuro, cuál se reserva para lo poco que de verdad tiene que destacar.

La paleta de Aguacatestudio tiene diez colores aprobados, pero eso no significa que los diez se vean igual de a menudo. Cada uno tiene un papel fijo, y la mayoría de una pantalla cualquiera son solo tres de ellos:

Por qué Aguacate no está en todas partes

Verde aguacate es el color pensado para llamar la atención en el uso diario del sitio, y es exactamente por eso por lo que casi no aparece.

Medido contra el fondo, Aguacate da un contraste de 3,00:1 — válido para texto grande o para un elemento de interfaz, no para un párrafo. Blanco sobre Aguacate da 3,21:1, la misma limitación al revés. La regla no sale del gusto de nadie: Aguacate solo funciona como superficie con Tinta encima, o como acento puntual (una interacción, un estado, un dato que de verdad quiere destacar), nunca como texto pequeño ni como fondo con texto claro encima.

Verde flúor, el más intenso de los diez, tiene la misma restricción llevada al extremo: sobre el fondo mide 1,16:1, y blanco sobre él mide 1,24:1 — ninguno de los dos se acerca a servir como texto. Solo funciona con tinta oscura encima, y por eso su único uso hoy es una variante especial del wordmark, no un color de interfaz.

Esa restricción es la que mantiene a estos dos siendo acentos. Si aparecieran en titulares, en botones y en fondos grandes a la vez, dejarían de significar “esto es distinto” y pasarían a significar “así es como se ve la web”: un trabajo completamente distinto, y peor.

Hay una segunda regla, menos visible, que ordena todo lo anterior: en cualquier composición manda un único campo cromático dominante. No una proporción fija de colores, que obligaría a rellenar espacio por norma en vez de por necesidad, sino la garantía de que nunca compiten dos campos igual de saturados por la misma atención en la misma pantalla. Los grises y el crema que separan una sección de otra existen precisamente para que esa regla se pueda cumplir sin que la web se quede sin sitios donde respirar entre un color y el siguiente.

Lo que esto demuestra

Nada de esto se ve a simple vista, y esa es la idea: un sistema de identidad digital no está para impresionar en una presentación, está para seguir funcionando bien cuando nadie lo está mirando de cerca. Un número de más en un atributo SVG, un verde que se repite dos veces de más en la misma pantalla, un tono que no debería llevar texto pequeño encima: nada de eso rompe una web a la primera. Se va acumulando.

Es el mismo problema, más despacio, que describíamos hace poco sobre una empresa que ha cambiado más rápido que su web: no falta un logo nuevo ni una paleta más bonita. Falta que alguien decida, una vez, cómo se comportan los elementos que ya existen, y que esa decisión se aplique siempre igual, en vez de discutirse de nuevo cada vez que hay que maquetar una pantalla más.

Si tu marca ya tiene varias versiones de logo dando vueltas, un color que se usa distinto en cada página y nadie recuerda ya por qué se decidió así, el problema casi nunca es que la identidad sea mala. Es que todavía no se ha convertido en un sistema que la propia web pueda aplicar sola.