Semantic Colors

Semantic colors are base colors that have been given a role, or meaning. They will be the colors we use throughout our site. Semantic colors help us know when and where to use certain colors, rather than guessing what shade of grey you should use. They drastically improve consistency and infinitely simplify the building process for you and other designers/devs.

Neutral

Used across the entire design system and components for background fills, strokes and more. Inverse colors are useful for contrasting containers, like a dark container on top of a white page.

Surface Main

White

/

900

Surface Subtle

100

/

800

Surface Strong

200

/

700

[Inverse] Surface Main

900

/

White

[Inverse] Surface Subtle

800

/

100

[Inverse] Surface Strong

700

/

200

Stroke

200

/

700

[Inverse] Stroke

700

/

200

Primary / Brand

Used as the main salient color on your site for buttons, branded elements etc. By default it's using shades of grey, but you can change them to reflect your own brand colors.

Surface Subtle

50

/

950

Surface Strong

200

/

700

Main Default / Brand

500

/

400

Main Hover

600

/

300

Main Active

700

/

200

Main Strong

900

/

100

Secondary

Used as accents or additional colors if needed. They should be used sparingly. If you require secondary colours, choose from the base colours, or add your own colors.

Surface Subtle

50

/

950

Surface Strong

200

/

700

Main Default

500

/

400

Main Hover

600

/

300

Main Active

700

/

200

Main Strong

900

/

100

Tertiary

Used as additional accents or colors if needed. They should be used sparingly. If you require tertiary colours, choose from the base colours, or add your own colors.

Surface Subtle

50

/

950

Surface Strong

200

/

700

Main Default

500

/

400

Main Hover

600

/

300

Main Active

700

/

200

Main Strong

900

/

100

Success

Used to indicate a positive action, success or complete states.

Surface Subtle

50

/

950

Surface Strong

200

/

700

Main Default

500

/

400

Main Hover

600

/

300

Main Active

700

/

200

Main Strong

900

/

100

Warning

Used to indicate a warning or that an minor issue has occured.

Surface Subtle

50

/

950

Surface Strong

200

/

700

Main Default

500

/

400

Main Hover

600

/

300

Main Active

700

/

200

Main Strong

900

/

100

Danger

Used to indicate a negative / destructive action, an error or incomplete states.

Surface Subtle

50

/

950

Surface Strong

200

/

700

Main Default

500

/

400

Main Hover

600

/

300

Main Active

700

/

200

Main Strong

900

/

100

Text

Used for all text elements. Primary should be used on main with high contrast text like headings and text blocks, subtle can be used for longer paragraphs and subtlest can be used for lesser important text.

Main

950

/

White

Subtle

700

/

200

Subtlest

500

/

400

[Inverse] Main

White

/

950

[Inverse] Subtle

200

/

700

[Inverse] Subtlest

400

/

500

Alphas

Used for all text elements. Primary should be used on main with high contrast text like headings and text blocks, subtle can be used for longer paragraphs and subtlest can be used for lesser important text.

Default 60%

#FFFFFF

/

#0A0A0A

Inverse 60%

#0A0A0A

/

#FFFFFF

Default 0%

#0A0A0A

/

#FFFFFF

Inverse 0%

#0A0A0A

/

#FFFFFF