Color usage and palettes
The color system helps you apply color to your UI in a meaningful way. In this system, you select a primary and a secondary color to represent your brand, dark and light variants of each color, and apply it to your UI in different ways. This is even easier to do in Figma once we create color styles that allow us to manage color across the whole project easily and effectively.
Color themes are designed to be harmonious, ensure accessible text, and distinguish UI elements and surfaces from one another.
Color theme creation
Primary color
A primary color is the color displayed most frequently across your website’s pages and components. Your primary color can be used to make a color theme for your website, including light and dark variants.
Secondary color
This color provides more ways to accent and distinguish your website. Having this color is optional and should be applied sparingly to accent selected parts of your UI.
Secondary colors are best for:
Background and error/warning colors
These types of colors don’t represent a brand but need to fit with the overall UI.
Background colors appear behind scrollable content and are often neutral. Error/warning colors indicates errors and warnings in forms, such as invalid text in the text field. The baseline color used here is mostly red for errors and orange for warnings.
Accessible colors
To ensure an accessible background behind light or dark text, your background can use light or dark variants of your primary and secondary colors.
Alternatively, these colors can be used for typography that appears in front of the light and dark backgrounds.
Originally published at https://www.broworks.net.
