Color

COLOR & SWATCH

System Colors

This page outlines the colors used within the system. Here you can easily edit the swatches and apply changes globablly across the whole product. This page can also be provided to customers to inform and centralise their brand color system.

When editing colors, use the global color swatches. Learn More

When you edit a global color swatch, you automatically apply the color change to all instances where the color exists. So if you update the Purple 300 to suit your brands color the color will be applied across all utility items, components, templates etc.

Purple (Brand)

This is the primary brand swatch, edit these globabl swatches to apply the color changes across the whole system.

Purple 900

#411a97

Purple 800

#5624C2

Purple 600

#774EF0

Purple 300

#B4A6F6

Purple 100

#F5F2FE

Blue

Information + Details

Blue 900

#003972

Blue 800

#004B93

Blue 600

#0071D8

Blue 300

#8AB0FF

Blue 100

#EBF4FC

Green

Success + Completion + Positive

Green 900

#035738

Green 800

#068256

Green 600

#0CAF75

Green 300

#93E7C8

Green 100

ECF9F4

Red

Errors + Problems

Red 900

#70151D

Red 800

#911E28

Red 600

#D5313F

Red 300

#F2989B

Red 100

FCEFF0

Orange

Warning + Informative

Orange 900

#B55630

Orange 800

#D4663A

Orange 600

#F1794C

Orange 300

#F5B8AA

Orange 100

#FEF5F1

Yellow

Light Warning + Informative

Yellow 900

#B77A00

Yellow 800

#D28D00

Yellow 600

#FFB13E

Yellow 300

#FFD79D

Yellow 100

FFF9F0

Pink

Category + Differentiate

Pink 900

#AD2C53

Pink 800

#CE3664

Pink 600

#EB4A78

Pink 300

#F097A9

Pink 100

#FEF1F5

Teals

Category + Differentiate

Teal 900

#00959C

Teal 800

#00ACB4

Teal 600

#00C4CD

Teal 300

#6FD6DE

Teal 100

#F4FCFD

Typography Colors

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

When editing colors, use the global color swatches. Learn more

When you edit a global color swatch, you automatically apply the color change to all elements where the color exists. So if you update the Purple 300 to suit your brands Purple, the color will be applied across all utility items, components, templates etc.

Typography Colors

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Gray 900

#041434

Gray 800

#4A556C

Gray 600

#6A768A

Grey 400

#B1BAC8

Grey 300

#DBDEE6

Grey 200

#EDEFF5

Grey 100

#F7F8FA

White

#FFFFFF

Example Classes

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

Text Grey 900

Text Grey 800

Text Grey 600

Text White

Example in Combo Classes

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

H2 Title (600)

Text Grey (900)

Paragraph (Large)

Text Purple (600)

Typography Combo Classes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

When editing colors, use the global color swatches

When you edit a global color swatch, you automatically apply the color change to all elements where the color exists. So if you update the Purple 300 to suit your brands Purple, the color will be applied across all utility items, components, templates etc.

Typography Colors

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

This is some text inside of a div block.

Text Gray 900

#151E24

Text Gray 900

#151E24

Text Gray 900

#151E24

Text Gray 900

#151E24

Text Gray 900

#151E24

Text Gray 900

#151E24

Text Purple 900

#151E24

Text Purple 800

#151E24

Text Purple 600

#151E24

Text Purple 300

#151E24

Text Purple 100

#151E24

Text Blue 900

#151E24

Text Blue 800

#151E24

Text Blue 600

#151E24

Text Blue 300

#151E24

Text Blue 100

#151E24

Text Green 900

#151E24

Text Green 800

#151E24

Text Green 600

#151E24

Text Green 300

#151E24

Text Green 100

#151E24