‍

Antes de qualquer prototipagem, era preciso conquistar o time.
Apresentamos o conceito de Design System de forma didática, com números, cases de sucesso e exemplos de benchmark para demonstrar o impacto real em velocidade e consistência.

Desde o início, fizemos questão de envolver engenheiros e desenvolvedores nas discussões, para que entendessem que o projeto não era apenas sobre design, mas sobre eficiência e colaboração entre áreas.

Realizamos uma reunião dedicada apenas a esse tema, com o objetivo de alinhar expectativas e mostrar que o Design System seria um produto vivo, evolutivo e coletivo.

Segundo Robert N. Charette, a quantidade estimada de tempo que os programadores gastam em retrabalhos e que poderiam ser evitados é de 50%.

‍

O início foi cheio de incertezas, afinal, cada Design System é único e deve refletir a cultura e o contexto do produto.

Iniciamos com uma fase intensa de desk research, buscando referências de construtores de página e empresas que haviam documentado o processo de criação dos seus sistemas.

Compartilhamos artigos, vídeos e webinars com o time para construirmos uma base de conhecimento comum. Aos poucos, as peças começaram a se encaixar: entendemos que mais do que componentes, precisávamos de princípios e processos claros.

‍

‍

Antes de construir algo novo, era preciso entender o que já existia.
Fizemos um inventário completo dos componentes atuais, mapeando todas as variações de botões, inputs, tipografias e padrões de layout usados na interface.

Analisamos:

• Como cada componente estava estruturado;
  
• As diferenças entre protótipos e o produto em produção;
  
• Problemas de acessibilidade e contraste de cores.
  

O inventário revelou o tamanho do desafio: dezenas de variações desnecessárias e padrões quebrados.

‍

Definir princípios de design foi o passo seguinte. Queríamos que o sistema refletisse os valores que acreditamos serem essenciais na construção de produtos digitais:

‍

• Consistência: garantir uma linguagem visual e de código unificada;
  
• Colaboração: promover um processo em que design e engenharia evoluam juntos;
  
• Usabilidade: criar interfaces intuitivas e acessíveis;
  
• Escalabilidade: permitir que o sistema cresça sem perder coerência;
  
• Linguagem acessível: comunicar de forma simples e inclusiva.

‍

Além dos princípios, criamos um guia de acessibilidade e definimos boas práticas de documentação, grids, espaçamentos e uso de cores.

Com o diagnóstico em mãos e os princípios definidos, iniciamos a construção dos componentes.

Durante o processo, a documentação tornou-se um ponto-chave. Cada novo elemento era documentado com propósito, regras de uso, variações e boas práticas.

‍

‍

Assim como a ponte Bifröst conecta os mundos da mitologia nórdica, o Bifröst Design System cria a ligação entre design e desenvolvimento, unindo diferentes universos em uma única estrutura harmoniosa. Inspirado na ponte que simboliza a passagem entre o terreno e o divino, o Bifröst DS é o elo que transforma a complexidade do produto em clareza visual e consistência.

Ele representa o caminho que conduz ideias à realidade, uma ponte sólida, construída com propósito, que guia designers e desenvolvedores na criação de experiências coesas e escaláveis.

O nome Bifröst foi escolhido por refletir a temática viking presente na cultura da empresa em que o projeto foi desenvolvido.

Cores

As cores foram categorizadas em primárias, secundárias e outras específicas (tags, alertas, sucessos, etc.). Eliminamos combinações de cores que não passaram nos testes WCAG (Web Content Accessibility Guidelines). Também incluímos variações para diferentes estados dos componentes, como hover, active e disabled, assegurando consistência e usabilidade.

‍

Tipografia

Padronizamos os tamanhos de tipografia para títulos, subtítulos, textos corridos e outros componentes. Definimos uma hierarquia tipográfica, com estilos específicos para diferentes níveis de informação e diretrizes para espaçamento e alinhamento.

‍

Ícones

A família de ícones escolhidos foi os ícones de IU do Material Design do Google. A escolha dessa família se baseia em seu design facilmente reconhecível e altamente simplificado, além de sua semelhança com os ícones já apresentados no sistema.

‍

Botões

Criamos botões com variações de preenchimento (fill, outline, text) e tamanhos (32px e 22px) para diferentes contextos. Também foi definido estados dos botões (ativo, inativo, hover, etc.), incluímos exemplos práticos de uso de botões em diferentes cenários.

‍

Demais itens que foram construídos

• Grids, espaçamentos e templates;
• Tooltips;
• Tags;
• Checkbox;
• Radio button;
• Switch;
• Selects;
• Dropdowns;
• Text box;
• Tabelas;
• Multiselects;
• Accordion;
• Transferlist;
• Upload;
• Loading;
• Scroll;
• Counter;
• Slideshow;
• Date picker;
• Calendar;
• Search;
• Cards;
• Gráficos.

‍

Após a primeira versão do sistema, realizamos sessões de validação com designers e desenvolvedores, para testar a adoção e identificar pontos de melhoria. Essas trocas foram essenciais para ajustar nomenclaturas, revisar tokens e refinar o fluxo de versionamento.

A partir daí, estruturamos um processo contínuo de evolução, semanalmente revisamos componentes, adicionamos novos padrões e mantemos o sistema sempre atualizado.

Hoje, o Design System funciona como um organismo vivo, que cresce junto com o produto.

‍

‍

Criar um Design System vai muito além de montar componentes no Figma.

Os resultados foram tangíveis:

• Maior velocidade nas entregas, com redução significativa no tempo de design e desenvolvimento;
  
• Consistência real entre diferentes frentes do produto;
  
• Engajamento crescente dos times, que passaram a contribuir ativamente para a evolução do sistema.
  
  

Mas o maior aprendizado foi humano: um Design System só funciona quando as pessoas acreditam nele.

Hoje, seguimos aprimorando esse sistema com o mesmo propósito que nos moveu desde o início, criar uma base sólida para que todos possam construir produtos melhores, juntos.