Foundations

Color

Communicate hierarchy, state and brand.

Overview

In web design, color serves these main purposes:

Brand identity: Establishes and reinforces a brand's identity through consistent use of specific colors.
Usability and user experience: Proper use of color can enhance the usability of a website. It can draw attention to important elements, create visual hierarchies, and guide users through a site intuitively.
Aesthetics: Enhances the overall visual appeal and attractiveness of the website.
Emotional and psychological impact: Evokes specific emotional responses or conveys particular moods, influencing how users feel.

Color roles

Given these purposes, each color can be viewed through a different lens and serve a different role:

Brand: The “Add to cart” button can be green on Dr.Max websites, but red on eDrogeria. This role takes precedence over semantics and importance.
Semantics: A “Create” button can be green because it conveys positive meaning. A “Delete” button can be red because it conveys destructive meaning. This role takes precedence over importance.
Importance: A button can be green, blue, or white depending on the importance of the action, such as primary or secondary.

Take these aspects into account when creating tokens for website color variations. The visual representation of some elements can coincide, but that does not mean they serve the same role. Each color token should remain within its original role.

Otherwise, changing variable values for a different brand can turn the green used for successful input validation into red, inadvertently changing its semantics and causing confusion.

Color scale

The scale covers values from 25 through 900, with 25 being the lightest and 900 the darkest. The colors were derived in the perceptually uniform HCT color space, where they follow a linear progression in lightness. As a result, Green 700 text on a Green 50 background should have roughly the same contrast as Yellow 700 text on a Yellow 50 background.

Primary palette

Green

--color-green-25

--color-green-50

100

--color-green-100

200

--color-green-200

300

--color-green-300

400

--color-green-400

500

--color-green-500

600

--color-green-600

700

--color-green-700

800

--color-green-800

900

--color-green-900

Red

--color-red-25

--color-red-50

100

--color-red-100

200

--color-red-200

300

--color-red-300

400

--color-red-400

500

--color-red-500

600

--color-red-600

700

--color-red-700

800

--color-red-800

900

--color-red-900

Neutral palette

Gray

--color-gray-0

12.5

--color-gray-12-5

--color-gray-25

--color-gray-50

--color-gray-75

100

--color-gray-100

150

--color-gray-150

200

--color-gray-200

300

--color-gray-300

400

--color-gray-400

500

--color-gray-500

600

--color-gray-600

700

--color-gray-700

800

--color-gray-800

850

--color-gray-850

900

--color-gray-900

950

--color-gray-950

1000

--color-gray-1000

Additional palette

Blue

--color-blue-25

--color-blue-50

100

--color-blue-100

200

--color-blue-200

300

--color-blue-300

400

--color-blue-400

500

--color-blue-500

600

--color-blue-600

700

--color-blue-700

800

--color-blue-800

900

--color-blue-900

Cyan

--color-cyan-25

--color-cyan-50

100

--color-cyan-100

200

--color-cyan-200

300

--color-cyan-300

400

--color-cyan-400

500

--color-cyan-500

600

--color-cyan-600

700

--color-cyan-700

800

--color-cyan-800

900

--color-cyan-900

Turquoise

--color-turquoise-25

--color-turquoise-50

100

--color-turquoise-100

200

--color-turquoise-200

300

--color-turquoise-300

400

--color-turquoise-400

500

--color-turquoise-500

600

--color-turquoise-600

700

--color-turquoise-700

800

--color-turquoise-800

900

--color-turquoise-900

Purple

--color-purple-25

--color-purple-50

100

--color-purple-100

200

--color-purple-200

300

--color-purple-300

400

--color-purple-400

500

--color-purple-500

600

--color-purple-600

700

--color-purple-700

800

--color-purple-800

900

--color-purple-900

Yellow

--color-yellow-25

--color-yellow-50

100

--color-yellow-100

200

--color-yellow-200

300

--color-yellow-300

400

--color-yellow-400

500

--color-yellow-500

600

--color-yellow-600

700

--color-yellow-700

800

--color-yellow-800

900

--color-yellow-900

Orange

--color-orange-25

--color-orange-50

100

--color-orange-100

200

--color-orange-200

300

--color-orange-300

400

--color-orange-400

500

--color-orange-500

600

--color-orange-600

700

--color-orange-700

800

--color-orange-800

900

--color-orange-900

Brown

--color-brown-25

--color-brown-50

100

--color-brown-100

200

--color-brown-200

300

--color-brown-300

400

--color-brown-400

500

--color-brown-500

600

--color-brown-600

700

--color-brown-700

800

--color-brown-800

900

--color-brown-900

Lip

--color-lip-25

--color-lip-50

100

--color-lip-100

200

--color-lip-200

300

--color-lip-300

400

--color-lip-400

500

--color-lip-500

600

--color-lip-600

700

--color-lip-700

800

--color-lip-800

900

--color-lip-900

Pink

--color-pink-25

--color-pink-50

100

--color-pink-100

200

--color-pink-200

300

--color-pink-300

400

--color-pink-400

500

--color-pink-500

600

--color-pink-600

700

--color-pink-700

800

--color-pink-800

900

--color-pink-900

Magenta

--color-magenta-25

--color-magenta-50

100

--color-magenta-100

200

--color-magenta-200

300

--color-magenta-300

400

--color-magenta-400

500

--color-magenta-500

600

--color-magenta-600

700

--color-magenta-700

800

--color-magenta-800

900

--color-magenta-900