Foundations

Colors

Foundations

Colors

Foundations

Colors

Semantic Colors

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 Main

White

/

900

Surface Main

White

/

900

Surface Subtle

100

/

800

Surface Subtle

100

/

800

Surface Subtle

100

/

800

Surface Strong

200

/

700

Surface Strong

200

/

700

Surface Strong

200

/

700

[Inverse] Surface Main

900

/

White

[Inverse] Surface Main

900

/

White

[Inverse] Surface Main

900

/

White

[Inverse] Surface Subtle

800

/

100

[Inverse] Surface Subtle

800

/

100

[Inverse] Surface Subtle

800

/

100

[Inverse] Surface Strong

700

/

200

[Inverse] Surface Strong

700

/

200

[Inverse] Surface Strong

700

/

200

Stroke

200

/

700

Stroke

200

/

700

Stroke

200

/

700

[Inverse] Stroke

700

/

200

[Inverse] Stroke

700

/

200

[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 Subtle

50

/

950

Surface Subtle

50

/

950

Surface Strong

200

/

700

Surface Strong

200

/

700

Surface Strong

200

/

700

Main Default / Brand

500

/

400

Main Default / Brand

500

/

400

Main Default / Brand

500

/

400

Main Hover

600

/

300

Main Hover

600

/

300

Main Hover

600

/

300

Main Active

700

/

200

Main Active

700

/

200

Main Active

700

/

200

Main Strong

900

/

100

Main Strong

900

/

100

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 Subtle

50

/

950

Surface Subtle

50

/

950

Surface Strong

200

/

700

Surface Strong

200

/

700

Surface Strong

200

/

700

Main Default

500

/

400

Main Default

500

/

400

Main Default

500

/

400

Main Hover

600

/

300

Main Hover

600

/

300

Main Hover

600

/

300

Main Active

700

/

200

Main Active

700

/

200

Main Active

700

/

200

Main Strong

900

/

100

Main Strong

900

/

100

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 Subtle

50

/

950

Surface Subtle

50

/

950

Surface Strong

200

/

700

Surface Strong

200

/

700

Surface Strong

200

/

700

Main Default

500

/

400

Main Default

500

/

400

Main Default

500

/

400

Main Hover

600

/

300

Main Hover

600

/

300

Main Hover

600

/

300

Main Active

700

/

200

Main Active

700

/

200

Main Active

700

/

200

Main Strong

900

/

100

Main Strong

900

/

100

Main Strong

900

/

100

Success

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

Surface Subtle

50

/

950

Surface Subtle

50

/

950

Surface Subtle

50

/

950

Surface Strong

200

/

700

Surface Strong

200

/

700

Surface Strong

200

/

700

Main Default

500

/

400

Main Default

500

/

400

Main Default

500

/

400

Main Hover

600

/

300

Main Hover

600

/

300

Main Hover

600

/

300

Main Active

700

/

200

Main Active

700

/

200

Main Active

700

/

200

Main Strong

900

/

100

Main Strong

900

/

100

Main Strong

900

/

100

Warning

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

Surface Subtle

50

/

950

Surface Subtle

50

/

950

Surface Subtle

50

/

950

Surface Strong

200

/

700

Surface Strong

200

/

700

Surface Strong

200

/

700

Main Default

500

/

400

Main Default

500

/

400

Main Default

500

/

400

Main Hover

600

/

300

Main Hover

600

/

300

Main Hover

600

/

300

Main Active

700

/

200

Main Active

700

/

200

Main Active

700

/

200

Main Strong

900

/

100

Main Strong

900

/

100

Main Strong

900

/

100

Danger

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

Surface Subtle

50

/

950

Surface Subtle

50

/

950

Surface Subtle

50

/

950

Surface Strong

200

/

700

Surface Strong

200

/

700

Surface Strong

200

/

700

Main Default

500

/

400

Main Default

500

/

400

Main Default

500

/

400

Main Hover

600

/

300

Main Hover

600

/

300

Main Hover

600

/

300

Main Active

700

/

200

Main Active

700

/

200

Main Active

700

/

200

Main Strong

900

/

100

Main Strong

900

/

100

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

Main

950

/

White

Main

950

/

White

Subtle

700

/

200

Subtle

700

/

200

Subtle

700

/

200

Subtlest

500

/

400

Subtlest

500

/

400

Subtlest

500

/

400

[Inverse] Main

White

/

950

[Inverse] Main

White

/

950

[Inverse] Main

White

/

950

[Inverse] Subtle

200

/

700

[Inverse] Subtle

200

/

700

[Inverse] Subtle

200

/

700

[Inverse] Subtlest

400

/

500

[Inverse] Subtlest

400

/

500

[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

Default 60%

#FFFFFF

/

#0A0A0A

Default 60%

#FFFFFF

/

#0A0A0A

Inverse 60%

#0A0A0A

/

#FFFFFF

Inverse 60%

#0A0A0A

/

#FFFFFF

Inverse 60%

#0A0A0A

/

#FFFFFF

Default 0%

#0A0A0A

/

#FFFFFF

Default 0%

#0A0A0A

/

#FFFFFF

Default 0%

#0A0A0A

/

#FFFFFF

Inverse 0%

#0A0A0A

/

#FFFFFF

Inverse 0%

#0A0A0A

/

#FFFFFF

Inverse 0%

#0A0A0A

/

#FFFFFF

Base Colors

Neutral

50

100

200

300

400

500

600

700

800

900

950

Success

50

100

200

300

400

500

600

700

800

900

950

Warning

50

100

200

300

400

500

600

700

800

900

950

Danger

50

100

200

300

400

500

600

700

800

900

950

Slate

50

100

200

300

400

500

600

700

800

900

950

Grey

50

100

200

300

400

500

600

700

800

900

950

Zinc

50

100

200

300

400

500

600

700

800

900

950

Stone

50

100

200

300

400

500

600

700

800

900

950

Orange

50

100

200

300

400

500

600

700

800

900

950

Yellow

50

100

200

300

400

500

600

700

800

900

950

Lime

50

100

200

300

400

500

600

700

800

900

950

Emerald

50

100

200

300

400

500

600

700

800

900

950

Teal

50

100

200

300

400

500

600

700

800

900

950

Cyan

50

100

200

300

400

500

600

700

800

900

950

Sky

50

100

200

300

400

500

600

700

800

900

950

Blue

50

100

200

300

400

500

600

700

800

900

950

Indigo

50

100

200

300

400

500

600

700

800

900

950

Purple

50

100

200

300

400

500

600

700

800

900

950

Fuchsia

50

100

200

300

400

500

600

700

800

900

950

Pink

50

100

200

300

400

500

600

700

800

900

950

Rose

50

100

200

300

400

500

600

700

800

900

950