Shape
Color Systems
Giving colors consistent roles across a product, so each color means one thing.
What is Color Systems?
Giving colors consistent roles across a product, so each color means one thing.
What you learn
Give each color one meaning, and never rely on color alone.
When it helps
the same color means different things, or brand colors fail contrast checks.
Use it at work
- Give each color one role: action, error, success, warning or brand.
- Check text and background pairs for enough contrast.
- Add text or icons wherever color carries meaning.
- Write the roles down and share them.
Your output
List the colors in your product and the one meaning each has. Fix any color with two meanings, and any meaning shown by color alone.
Watch for
Using one color for two meanings, or low-contrast color pairs.
Related practices
Sources
Enable JavaScript to try the interactive activity.