Este projeto consistiu na criação de um Style Guide completo voltado especificamente para produtos de Data UX, desenvolvido para o cliente CLI com o objetivo de padronizar a construção de dashboards e produtos analíticos, garantindo consistência visual, usabilidade e acessibilidade em todas as telas criadas pela equipe, especialmente aquelas implementadas em Power BI.

Desafio

O principal desafio foi traduzir a identidade visual da marca CLI para um contexto técnico e analítico, no qual grande volume de dados precisa ser exibido de forma clara e organizada. Além disso, foi necessário lidar com uma limitação real de mercado: a fonte oficial da marca, Bozon, não está disponível no Power BI. Isso exigiu uma solução estratégica de tipografia híbrida, aplicando a fonte da marca apenas em elementos de capa (onde é possível inserir imagens) e utilizando Arial, por sua ampla compatibilidade e legibilidade, nos demais elementos construídos diretamente na ferramenta.

Estrutura e Entregáveis

O guia foi estruturado em seis grandes frentes, todas documentadas com especificações técnicas detalhadas, prontas para uso da equipe de desenvolvimento:

Grids e Espaçamentos, com definição de estruturas de alinhamento e um sistema de espaçamento baseado em múltiplos de 8, garantindo leitura visual mais confortável e responsividade entre diferentes tipos de tela, como capas de dashboard, menu lateral, tooltips e páginas de conteúdo.

Cores da Marca, incluindo uma paleta completa com variações de opacidade para verde, amarelo e vermelho, cada uma testada quanto à acessibilidade seguindo os padrões WCAG (AA e AAA), com indicação clara de contraste mínimo para textos pequenos e grandes. Também foram mapeadas aplicações específicas de cada cor em componentes reais da interface, como botões, breadcrumbs, gráficos e tabelas.

Tipologia, com regras específicas de tamanho, peso e cor de fonte para cada elemento textual do sistema, cobrindo desde títulos de capa até rótulos de gráficos, sempre considerando a diferença de renderização entre Figma e Power BI.

Botões e Ícones, detalhando estados de interação como ativo, hover e desabilitado, além de diretrizes de quantidade máxima de botões por tela e um passo a passo prático para a criação de novos ícones no estilo outline, mantendo a coerência visual do sistema.

Diversidade de Gráficos, apresentando um catálogo de tipos de visualização de dados, como gráficos de barras, barras duplas, barras empilhadas, dispersão, variação, bolhas, rosca e mapa, orientando a escolha do gráfico mais adequado para cada tipo de informação.

Comparativo de Layout, com uma validação lado a lado entre a versão prototipada em Figma e a implementação final em Power BI, assegurando fidelidade entre o design idealizado e o produto entregue.

Resultado

O Style Guide se tornou uma referência viva para a equipe de desenvolvimento de dashboards, reduzindo inconsistências visuais, agilizando o processo de criação de novas telas e assegurando que a experiência do usuário final permanecesse fluida, acessível e alinhada à identidade da marca CLI, independentemente de quem estivesse construindo a interface.