Dataviz Color Palette in Animalia Design System
01
Summary
A color system for data visualization (dataviz) within a robust and agnostic multi-brand Design System.
The project's purpose was to improve data clarity and readability, considering the industry's best practices on the subject, optimizing the designers workflow and the users interpretation.
02
Challenges
It was necessary to meet WCAG accessibility criteria without compromising the visual standards of the brands using Animalia, carefully balancing contrast and aesthetics.
The color system had to be versatile enough to cover different types of charts and data. It was challenging to create variations (in both themes and quantity) that were coherent and intuitive.
The implementation needed to be scalable to ensure adoption and easy to maintain, so an effort was also made to integrate the colors into the library.
03
Result
Created 3 types of palettes: categorical, sequential, and divergent, available in both light and dark modes.
Defined and documented usage rules and best practices, serving as a guide for the company to apply colors consistently and effectively.
The entire palette was implemented in the Figma component library via variables, allowing for variation across brands without losing quality and consistency.
