Um sistema que nasce do logo
Antes de ter um design system, escrevia código e criava componentes à medida que avançava, a tentar que encaixassem. Cada peça nova era uma decisão isolada. Hoje, sempre que quero acrescentar algo ao site, tenho uma direção clara.
Um mapa antes de construir
Para mim, um design system é um mapa: uma fonte de verdade a que volto sempre que tenho de decidir. Não é uma coleção de botões bonitos, é um critério. Se uma peça nova não cabe no sistema, o problema costuma ser a peça.
O corte saiu do logo
O meu logo é um monograma com as minhas iniciais, PJGR, unidas por uma linha reta e firme que mostra o caráter que tenho hoje. Os seus traços só usam ângulos de 0°, 45° e 90°, e a barra superior termina num corte em diagonal.
A ideia de levar esse corte a todo o site não estava lá no início. Surgiu no processo, ao usar o logo e a marca para dar forma ao design. Hoje o corte está nos botões, nos cantos das imagens, na entrada de algumas secções e num triângulo de cor que aparece uma vez por página. É o que mais defendo no sistema: dá identidade ao site mesmo quando o logo não está à vista.
O que mais custou: a cor
O mais difícil foi escolher o acento. Queria uma cor própria, não o azul genérico do setor, mas que me identificasse, e identifico-me com o preto e o azul. Assim nasceu o Azur: um azul luminoso sobre uma base de pretos e cinzentos.
Com a cor veio uma regra que me obriga a escolher: o Azur aparece uma única vez por ecrã, quase sempre dentro do corte. Se tudo estiver aceso, nada se destaca.
Uma única fonte de verdade
Todos os valores do sistema, cores, tamanhos de letra, espaços e movimentos, vivem num único ficheiro. A partir dele geram-se as variáveis CSS, o tema do Tailwind e um formato que se pode importar no Figma. Se mudo um valor, muda em todo o lado.
Comprovei-o esta semana: mudei a fonte dos títulos, de Fraunces para Gloock. A Gloock é mais eu, combina com a minha personalidade e cria harmonia com o logo. A mudança foram poucas linhas nesse ficheiro e o site inteiro atualizou-se, com a escala de tamanhos ajustada à nova letra.
Eu ponho o critério, a IA concretiza-o
Para construir o sistema trabalhei com ferramentas de inteligência artificial. A divisão é clara: eu ponho o critério, a criatividade, as decisões e a direção. A IA pega nas minhas ideias, organiza-as e concretiza o design que tenho na cabeça em muito menos tempo.
Do meu site para a Drakkar e para os clientes
Já estou a usar esta abordagem na Drakkar, a agência que dirijo, que costuma ser o meu laboratório. A ideia é levar o mesmo processo aos projetos dos meus clientes: partir da marca deles, tirar dela umas poucas regras e construir com esse mapa, para entregar melhores produtos em menos tempo.