Design system: do logo ao componente
Um design system transforma uma identidade visual em algo escalável e consistente. Entenda o que ele inclui e como construir o seu por camadas.
Uma identidade visual define como a marca se parece. Um design system define como ela se constrói, peça por peça, de forma consistente e escalável. Ele é a ponte entre o logo na parede e o botão funcionando dentro de um produto — e é o que impede que cada tela, post ou material vire uma decisão improvisada.
Neste guia, você vai entender o que compõe um design system e como montá-lo em camadas, do mais fundamental ao mais visível.
Por que identidade visual não basta
Um manual de marca tradicional diz qual é o azul e qual é a fonte. Mas não diz qual azul usar no estado de erro de um formulário, nem qual o espaçamento padrão entre um campo e seu rótulo. Quando a marca cresce e várias pessoas produzem material, essas lacunas viram inconsistência.
Design system não é sobre regras. É sobre tomar boas decisões uma vez para não ter que tomá-las mil vezes.
O design system resolve isso transformando princípios em peças reutilizáveis. Em vez de recriar um botão toda vez, você usa o botão do sistema — e ele já carrega cor, espaçamento, tipografia e estados corretos.
As camadas de um design system
A melhor forma de construir é de baixo para cima, partindo das decisões mais fundamentais para as mais concretas.
Camada 1: tokens de design
Tokens são as decisões mínimas, nomeadas e reutilizáveis: cores, tamanhos de fonte, espaçamentos, raios de borda, sombras. Em vez de escrever "#1A73E8" em cem lugares, você define cor-primaria uma vez. Mudou a marca? Muda o token e tudo se atualiza.
Camada 2: fundações
Sobre os tokens vêm as regras de uso: grid e layout, princípios de tipografia, uso de cor, iconografia e tom da fotografia. É aqui que se define, por exemplo, que texto longo sempre usa a fonte neutra e nunca a display.
Camada 3: componentes
Componentes são os blocos prontos para montar interfaces e materiais: botões, campos, cards, menus, badges. Cada um documenta seus estados — normal, hover, foco, desabilitado, erro — e quando deve ou não ser usado.
Camada 4: padrões
No topo estão os padrões: combinações de componentes que resolvem tarefas recorrentes, como um formulário de cadastro completo ou um cabeçalho de site. É a camada que economiza mais tempo no dia a dia.
Como construir o seu, passo a passo
Não tente construir tudo de uma vez. Sistemas que nascem gigantes morrem cedo. Comece pequeno e cresça conforme a necessidade real.
Um design system é um produto vivo, não um documento fechado. Ele evolui com a marca e precisa de alguém responsável por mantê-lo coerente.
Erros que afundam design systems
Como saber que está funcionando
O sinal de um bom design system não é o tamanho da documentação. É a velocidade: novas telas e materiais saem mais rápido, com menos discussão sobre detalhes e mais consistência entre quem produz. Quando a equipe para de reinventar o botão, o sistema está cumprindo seu papel.
Por onde começar esta semana
Antes de pensar em ferramentas sofisticadas, abra uma página e liste todas as cores e todos os botões que sua marca usa hoje. Você quase certamente vai encontrar três tons de azul que deveriam ser um só e quatro estilos de botão que deveriam ser dois. Esse inventário é o embrião do seu design system — consolide essas decisões e você já terá dado o passo mais difícil.
