Light/Dark mode

Dark Mode puts the focus on the content areas of the interface. We had to ensure that the content remained comfortably legible in Dark when adjusting colors.

Colors
Since there are so many colors we have to keep them organized, for this project we had to build a Light theme that we didn't have at that time.
Once we built it we made use of semantic colors, these are a palette of colors that have a name that explains what they signify. By creating these dynamic labels switching from light to dark is easier.

In light theme, we make use of shadows to understand depth. In dark mode shadows don't make any sense so we make use of lighter background to hierarchize them. The deeper the background is, the darker is going to be.

We use this idea of hierarchy for text as well, this let us emphasize which elements are important relative to others.

Brand
Given the poor contrast between green and black, we tweak our branded yellow to fit with the other colors (lowering brightness) and by doing that we keep our branding alive.

A project developed by the Customer cluster and designed by Julia Lidoy.
https://www.behance.net/julialidoy