Un sistema de diseño que cabe en 55 × 85 mm

Vivo de tres oficios que casi todo el mundo contrata por separado: diseño de producto, front-end y gráfica. En una reunión eso se explica en dos minutos. En un papel de nueve centímetros, no: o eliges uno y mientes por omisión, o los enumeras y la tarjeta se convierte en un currículum en miniatura.

La tarjeta tenía que resolver eso y una segunda cosa menos evidente: demostrar el oficio en el mismo objeto que lo anuncia. Quien la recibe no va a leer un caso de estudio; va a mirarla tres segundos y decidir si merece la pena entrar en la web. Los tres segundos son el encargo.

La tarjeta no representa el sistema de diseño: es una instancia impresa del sistema. Nada de lo que hay en ella se inventó para la ocasión. El fondo es --ink, el acento es --accent, los tres puntos de los roles son los tres colores de disciplina que el archivo ya usa en cada etiqueta, y las dos tipografías son las que estás leyendo ahora mismo.

De ahí salen dos decisiones que ordenan todo lo demás. Primera: la tarjeta es oscura, como el sitio, aunque una tarjeta oscura sea más cara de imprimir y más difícil de mantener limpia. Segunda: cada cara enseña un oficio en acción en lugar de nombrarlo —el anverso es un plano de construcción, el reverso es código— y el tercero, la gráfica, es el objeto entero.

El anverso enseña el logotipo a medio construir: retícula visible, marcas de registro en las cuatro esquinas, los círculos de trazado de la d y la G sin borrar y el pie que da la medida real del dibujo, 411 × 190. Es una tarjeta que enseña el andamio en lugar del edificio, porque el andamio es lo que se contrata.

Debajo, un diagrama de flujo —Landing, ¿login?, Onboarding, Catálogo, Ficha— dibujado en el azul de front-end. Cuatro cajas y dos ramas: lo justo para que alguien que trabaja en producto reconozca de qué va esto antes de leer una sola palabra, y lo justo para que quien no, lo lea como un patrón gráfico.

Cierra un filete de acento con el dominio a la izquierda y el año a la derecha. Ese filete es el mismo recurso que separa bloques en la web; aquí hace de línea de agua.

El reverso abre con nueve líneas numeradas de tokens.css con coloreado de sintaxis real: la declaración de --ink y --accent, y debajo una sección hero con su h1. No es decoración tipográfica con pinta de código: es el fragmento que de verdad abre la hoja de estilos de este sitio, y los dos valores que declara son los dos colores con los que está impresa la tarjeta que lo dice.

Después, el filete, y a partir de ahí manda la jerarquía clásica de una tarjeta: nombre grande en Archivo, tres roles en mono con su punto de color, contacto y un QR en verde acento que abre este portfolio —edegregorio.com, la misma web en la que estás—. Nombre, oficio, contacto, entrada. La parte experimental está arriba; la parte que tiene que funcionar en una mesa de reunión, abajo.

Los tres roles no llevan iconos ni etiquetas de colores inventadas para el papel. Llevan los mismos tres colores que el archivo de este sitio usa en cada ficha, cada chip de filtro y cada miga de pan. Quien primero recibe la tarjeta y luego entra en la web encuentra el código de color ya aprendido; quien lo hace al revés, también.

Un diseño bonito que llega a imprenta sin sangre, sin margen de seguridad o en RGB no es un diseño: es un problema del impresor. El arte final se cerró con las mismas comprobaciones que se le harían a un cliente.

Este proyecto —mi propio portfolio— está repartido en tres disciplinas y esta ficha es una de las tres. El diagnóstico y el diseño del sistema están en la auditoría de producto UX/UI; el sistema escrito y documentado, en la ficha del Design System de EdG, con sus 37 componentes y sus 57 tokens. Esta tarjeta es la tercera parte: ese mismo sistema salido de la pantalla.

Si quieres ver de dónde vienen el #0b0b0c y el #d9ff4b impresos en el reverso, están declarados —y se pueden copiar— en la librería. El control de la derecha salta entre las tres.