Pular pro conteúdo
Bea Miranda
Voltar para home

Case · 2025

Paleta de Cores para Dataviz no Animalia Design System

Paleta de Cores para Dataviz no Animalia Design System — capa

01

Resumo

Tipo de produto
Design System multimarca — paleta de dataviz
Segmento
DesignOps / B2B
Ano de realização
2025
Papel
Product Designer — pesquisa de dataviz, paletas, documentação, integração no Figma

Um sistema de cores para visualização de dados (dataviz) em um Design System multimarca robusto e agnóstico. O projeto tinha o propósito de melhorar a clareza e a legibilidade dos dados, considerando as melhores práticas de mercado sob o tema, otimizando a rotina dos designers e a interpretação das pessoas usuárias.

02

Desafios

  1. Foi preciso atender aos critérios de acessibilidade da WCAG sem comprometer o padrão visual das marcas que faziam uso do Animalia, equilibrando contraste e estética.
  2. O sistema de cores deveria ser versátil para cobrir diferentes tipos de gráficos e dados. Foi desafiador criar variações (tanto em temas quanto quantidade) que fossem coerentes e intuitivas.
  3. A implementação precisava ser escalável para garantir a adoção, além de facilitada para manutenção, portanto também houve um esforço para integrar as cores na biblioteca.

03

Processo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in libero vel turpis pellentesque egestas. Sed iaculis turpis nec urna eleifend, in aliquet enim aliquet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in libero vel turpis pellentesque egestas. Sed iaculis turpis nec urna eleifend, in aliquet enim aliquet.

04

Resultados

3 tipos de paletas

Categóricas, sequenciais e divergentes em light + dark.

Regras documentadas

Guia de uso e boas práticas pra aplicação consistente.

Integração no Figma

Toda a paleta como variables, multimarca sem perda.

05

Aprendizados

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Paleta de cores aplicada
Paleta de cores aplicada