Abra três telas de um sistema qualquer. Numa, o botão de salvar é azul e fica embaixo. Na outra, é verde e fica no topo. Na terceira, chama "Confirmar" e é cinza. Ninguém decidiu isso. Aconteceu: cada tela foi feita num dia, por alguém com pressa, copiando o que estava mais perto. A equipe sente, mesmo sem saber explicar. O sistema parece remendado, e cada tela nova precisa ser aprendida do zero.
Design system é o remédio pra isso. O nome assusta, parece coisa de empresa grande. Não é. Este texto explica o que é, o que entra num e por que ele faz diferença justamente pra quem é pequeno.
O que é
Design system é o conjunto das peças que formam todas as telas e materiais de uma marca, com as regras de uso de cada uma. Botão, campo, janela, cartão, cor, letra, espaço, ícone. Cada peça existe uma vez só, desenhada e testada, e toda tela nova é montada com elas.
Pense numa obra. Se cada pedreiro fizesse o próprio tijolo, nenhuma parede ficaria reta. Com o tijolo padrão, qualquer pedreiro levanta uma parede que encaixa nas outras. Design system é o tijolo padrão das telas.
Manual de marca não é design system
Os dois andam juntos, mas não são a mesma coisa.
- Manual de marca diz como a marca aparece: o logo, as cores, a letra, o jeito de falar. Serve pra gráfica, pra quem faz post, pra fachada.
- Design system diz como a marca funciona numa tela: como o botão se comporta quando você toca, qual a altura de um campo no celular, onde fica o fechar de uma janela, que cor tem um erro.
O manual responde "como a gente é". O design system responde "como a gente faz".
O que entra num design system
- Cores com uso definido. Não só a paleta, mas pra que serve cada cor e com qual fundo ela tem contraste suficiente pra ser lida.
- Letras e tamanhos. Uma ou duas famílias, poucos tamanhos, cada um com função.
- Espaços. Uma régua de espaçamento, como múltiplos de 8, pra tudo respirar do mesmo jeito.
- Componentes. As peças prontas: botão, campo, janela, cartão, tabela, aviso.
- Regras de uso. Quando usar cada peça e quando não usar. "Vermelho só pra apagar." "Uma ação principal por tela."
- Documentação viva. Um lugar onde tudo isso está escrito e mostrado, que se atualiza junto com o sistema, e não um PDF esquecido numa pasta.
Por que empresa pequena precisa mais
Empresa grande tem equipe pra corrigir inconsistência. Empresa pequena não tem. Por isso o design system rende mais pra quem é pequeno:
- A equipe aprende uma vez. Se toda janela fecha do mesmo jeito, ninguém precisa reaprender a cada tela nova.
- Mudar fica barato. Trocou a cor do botão? Muda numa peça, e todas as telas mudam juntas.
- Você não fica refém de ninguém. Se um dia trocar quem cuida do sistema, quem chega encontra as peças e as regras escritas, e não um quebra-cabeça.
- A marca fica inteira. O sistema, o site e o material impresso falam a mesma língua visual.
O que a gente achou quando contou
Em outubro de 2026, a Apol fez uma varredura no próprio sistema: contamos quantos jeitos diferentes existiam de fazer a mesma coisa. O resultado foi um bom puxão de orelha.
Contagem da Apol no próprio sistema, outubro de 2026
Quantos jeitos diferentes de fazer a mesma coisa a varredura encontrou
- Janelas (modais)41 jeitos → 1 componente
- Fundos escurecidos25 jeitos → 1
- Espaçamentos de cartão20 jeitos → 1 cartão, 3 espaços
- Botões de fechar17 jeitos → 1
- Alturas de campo5 jeitos → 1 campo, 3 tamanhos
Quarenta e um desenhos de janela. Dezessete botões de fechar. Nenhum deles era errado sozinho. Juntos, faziam o sistema parecer feito por várias empresas. O sistema tinha crescido rápido, e cada tela nova copiava a vizinha com uma diferencinha.
Depois da varredura ficou uma peça de cada, com as variações que fazem sentido: a janela tem tamanhos, o campo tem três tamanhos, o cartão tem três espaçamentos. E entrou uma regra no processo de publicação: se alguém criar uma janela, um campo ou um botão de fechar fora do padrão, o sistema não publica. O padrão não depende de alguém lembrar.
Contamos isso porque é o que acontece com todo sistema que cresce rápido. Não é falta de capricho. É falta de um lugar onde as peças morem.
Documentação viva, na prática
No case do Alemão Auto Vidros, o manual da marca virou um site público, feito com as mesmas peças do site da loja. O que está no manual é o que está no ar, porque os dois saem do mesmo código. Quando a cor muda, muda nos dois.
Como começar sem gastar
Você não precisa de um design system completo pra ter os benefícios. Comece pelo mínimo:
- Escolha as cores e escreva pra que serve cada uma.
- Escolha uma letra pra título e uma pra texto.
- Defina um único botão principal e use em tudo.
- Guarde isso num documento que todo mundo que faz material da empresa recebe.
Faça hoje: tire print de cinco telas ou peças da sua empresa: o sistema, o site, um post, um orçamento, um cartão. Coloque lado a lado e circule cada botão, título e cor. Se você achar três jeitos diferentes de fazer a mesma coisa, já sabe o que padronizar primeiro.
Se quiser que a Apol organize as peças da sua marca e do seu sistema num design system que a sua equipe consiga usar, o próximo passo é uma conversa.