Color makes up the world around us. It adds so much beauty to our lives, but it’s also a powerful communication tool—both in life and in design. We've pulled together six tips to keep in mind when you’re creating a design system and using color in your product pages.

Be intentional.

As Apple says, color should be used judiciously. It should call attention to important content. Be careful to not overuse color as that can have the opposite impact and end up distracting users instead of guiding them.

Be consistent

Color can be used to create patterns and associations for users. Using the same color to signify similar actions, categories, or components can help users quickly recognize those actions, categories, or components even when they appear in different contexts.

For example, in a news app, all “read more” CTAs should be the same color. Different colors might signify a distinction between the CTAs and make the user unsure of what will happen when they tap one CTA vs. another.

Be Meaningful

We all associate different colors with different meanings in day-to-day life. Red means stop; Green means go, etc. You should use those associations in your digital designs too.

When there is an error in your app or a delete button, red would be a good color to use. When your user has succeeded, green would be a better choice. These colors should stay consistent with user associations and should be different for different actions to avoid confusion.

Be accessible

Contrast is critical to making sure your design is legible, both for the average user and for someone who may have a color perception disability. You should aim to increase the contrast between your content and background to avoid visibility issues. Check out this contrast checker to make sure your designs are accessible!

Use hierarchy

Using different tones of the same color can differentiate levels of hierarchy by drawing the user’s eyes to the most important content first.

You’ll often see UI cards where the title is black and the subtitle is gray. that’s a great example of using shades of gray to create a hierarchy.

Plan for dark mode

If your app or website has a dark mode option, then you should also have a dark mode version of your color palette. Dark mode colors should be darker and more vibrant than light mode colors.

Now you’re ready to make informed decisions about color in your design. Keep these tips in mind when creating your design system, but don’t forget that experimenting with color can be fun too!