Un sistema que nace del logo
Antes de tener un design system, escribía código y creaba componentes sobre la marcha, tratando de que encajaran. Cada pieza nueva era una decisión aislada. Hoy, cada vez que quiero incorporar algo a la web, tengo una dirección clara.
Un mapa antes de construir
Un design system es, para mí, un mapa: una fuente de verdad a la que vuelvo cada vez que tengo que decidir. No es una colección de botones bonitos, es un criterio. Si una pieza nueva no cabe en el sistema, el problema suele ser la pieza.
El corte salió del logo
Mi logo es un monograma con mis iniciales, PJGR, unidas por una línea recta y firme que muestra el carácter que tengo hoy. Sus trazos solo usan ángulos de 0°, 45° y 90°, y la barra superior termina en un corte en diagonal.
La idea de llevar ese corte a toda la web no estaba al principio. Apareció en el proceso, al usar el logo y la marca para dar forma al diseño. Hoy el corte está en los botones, en las esquinas de las imágenes, en la entrada de algunas secciones y en un triángulo de color que aparece una vez por página. Es lo que más defiendo del sistema: le da identidad a la web incluso cuando el logo no está a la vista.
Lo que más costó: el color
Lo más difícil fue elegir el acento. Quería un color propio, no el azul genérico del sector, pero que me identificara, y me identifico con el negro y el azul. Así nació Azur: un azul luminoso sobre una base de negros y grises.
Con el color vino una regla que me obliga a elegir: Azur aparece una sola vez por pantalla, casi siempre dentro del corte. Si todo está encendido, nada destaca.
Una sola fuente de verdad
Todos los valores del sistema, colores, tamaños de letra, espacios y movimientos, viven en un único archivo. Desde ahí se generan las variables CSS, el tema de Tailwind y un formato que se puede importar en Figma. Si cambio un valor, cambia en todas partes.
Lo comprobé esta semana: cambié la fuente de los titulares, de Fraunces a Gloock. Gloock es más yo, va con mi personalidad y crea armonía con el logo. El cambio fueron unas pocas líneas en ese archivo y la web entera se actualizó, con la escala de tamaños ajustada a la nueva letra.
Yo pongo el criterio, la IA lo concreta
Para construir el sistema trabajé con herramientas de inteligencia artificial. El reparto es claro: yo pongo el criterio, la creatividad, las decisiones y la dirección. La IA toma mis ideas, las ordena y concreta el diseño que tengo en la cabeza en mucho menos tiempo.
De mi web a Drakkar y a mis clientes
Este enfoque ya lo estoy usando en Drakkar, la agencia que dirijo, que suele ser mi laboratorio. La idea es llevar el mismo proceso a los proyectos de mis clientes: partir de su marca, sacar de ella unas pocas reglas y construir con ese mapa, para entregar mejores productos en menos tiempo.