Colors
Our color palettes were built with a focus on accessibility and ease of use. Through them, it is possible to build accessible components and even dark UI by inverting the color levels.
Consistency
It is possible to change the primary color of the components by keeping the contrast proportion because all the scales were built with similar amounts of brightness on each level.
Accessibility
The scales are divided into 10 levels: the colors from 10 to 40 have a contrasting warranty of > 4.5:1 in white backgrounds, while the ones from 70 to 100 have the same warranty in dark backgrounds. In this way, our components respect the adequate contrast proportions for textual and interactive elements and non-interactive elements, in accordance with any palette.
Dark UI
All the palettes were built to work in an inverted way. In order to apply the dark mode just invert the colors from the center of the scale, what is 50 becomes 60, what is 40 becomes 70, and so it goes. For a practical example, just click the lamp on our header!