Design system: a diferença entre um site bonito e um site que escala
Um site sem design system fica bonito na primeira versão e inconsistente na quinta página nova. Design system é o que permite crescer sem cada página virar uma decisão visual do zero.
A diferença entre um site que envelhece bem e um que começa a parecer costurado com retalhos não é o talento de quem desenhou a primeira página — é se existiu, desde o início, um sistema por trás das decisões visuais.
O que um design system realmente é
Não é um arquivo bonito no Figma. É um conjunto pequeno de decisões — cor, tipografia, espaçamento, componentes — documentadas o suficiente para que a décima página criada use exatamente a mesma lógica da primeira, mesmo que seja outra pessoa construindo.
Isso inclui, no mínimo:
- Uma paleta de cores com papel definido para cada tom — não "cores que ficam bonitas juntas", mas "essa cor é para texto secundário, essa é para estado de erro, essa é o único acento permitido".
- Uma escala tipográfica fechada — tamanhos, pesos e alturas de linha específicos para cada papel (título, corpo, legenda), não "o que parecer bom naquela tela".
- Uma escala de espaçamento — números fixos (4, 8, 16, 24, 32...) em vez de cada seção inventar seu próprio respiro.
- Componentes com estado definido — como um botão se comporta parado, em hover, em foco, desabilitado — decidido uma vez, reutilizado sempre.
Por que isso importa mais do que parece
Sem sistema, cada página nova é uma decisão de design do zero. Isso custa tempo (alguém precisa decidir de novo o que já foi decidido antes) e gera inconsistência (a decisão nova raramente é idêntica à anterior, mesmo quando a intenção é a mesma).
Com sistema, construir uma página nova vira montagem — os blocos já existem, já têm contraste verificado, já têm comportamento de hover definido. Sobra tempo pra pensar no que realmente muda de página pra página: o conteúdo e a hierarquia específica daquele conteúdo.
O sinal de que falta um sistema
Três ou mais tons de cinza quase iguais, usados sem critério, em páginas diferentes. Botões com cantos arredondados diferentes dependendo de quem fez aquela tela. Títulos que mudam de tamanho sem motivo entre páginas do mesmo nível hierárquico.
Nenhum desses erros é feio isoladamente — o problema é que, somados, eles comunicam descuido, mesmo quando cada peça individual foi feita com cuidado.
Como aplicamos isso
Todo projeto que construímos começa com um documento de sistema — paleta com contraste verificado, tipografia com escala fechada, componentes com todos os estados especificados — antes da primeira página ser desenhada. Isso não atrasa o projeto: evita que a quinta página precise desfazer decisão da segunda.
Um site bonito impressiona na primeira visita. Um site com sistema continua parecendo a mesma marca na página cem.