Our color system was designed to establish a flexible range of colors that support our brand, comms, and product teams. Wonderflow products relies on a full ranged color palette which includes ten shades for each color.
These basic color tokens can be used for multiple purposes and they don't have a specific meaning. For example the Wanda's light theme uses red-60 as background for dangerous situations, like the dangerous Snackbar.
Themes serve as an organizational framework for color in Wanda, with each theme based on a specific combination of colors. There is a default “light” theme and a default “dark” theme. The light theme uses support-white as background and primary-70 as global foreground, and the dark theme uses support-black as background and primary-5 as global foreground.
It's important to use colors from themes whenever possible to keep consistency across products and to allow users to switch the theme based on the situation or system settings.
To learn more about themes and how to use them check the Themes section.
Using various forms of contrast is the most important consideration when making user-friendly color and interface choices. Awareness of standards and best practices is the key to accessible color selection.
The color families in the Wanda palette contain twelve values from 0 to 100, with a single half-step of 5. Black text is WCAG AA accessible on colors ranging from 0 to 30 while white text is accessible on colors from 40 to 100.
Beyond black and white, the Wanda color palette provides a range of accessible combinations. Subtracting the foreground value from the background value (or vice versa) helps determine whether that color combination meets the WCAG AA contrast ratio success criteria. If the difference between two values is 50 or greater, the colors are accessible. Anything below a difference of 50 may fail accessibility standards. This method is useful only if the size of the font is 18px or greater.
To easily check the contrast ratio you can use this interactive widget.