Colors

Consistent color usage boosts the brand recognition and conveys the right mood. It helps to guide users through the interface and highlight important areas.

Categorize and follow

Categorize the colors and share the exact palette you’ve documented with the team.

Guideline colors

Do

1. Brand color applied for secondary CTA
2. Minimum colors used.

Don't

1. Bad choice of color for CTA headline.
2. “Download” button uses the color that is not in the guidelines.

Contrast = visually different

Ensure a proper contract between colors. It is hard to navigate when colors blend into one.

Do

Good color combination

Don't

Bad color combination

Do

Create color combination by using multiple shades of one color

Don't

Bad color contrast

Make CTA stand out.

Use separate color for the component that contains a clear call to action.

Do

Button stands out, call to action is clear.

Don't

CTA button doesn’t stand out from the background, focus lost.

Do

Emphasized call to action. Easier decision for the user.

Don't

Two CTA buttons, focus lost.