Colors

Our color system helps to define the Foundation brand and is utilised to make our product functional and easy to use by all.

Principals

Simplicity

We use lots of open space paired with a simple grayscale to make our interfaces clean and decluttered. Colors are use sparingly to aid the understanding of the information presented.

Semantics

Colors usually hold a specific meaning based on how they function within the interface. Semantic colors help users identify what type of action they are taking or what type of information they can see. This helps them understand what steps to take next.

Accessibility

All color choices should fit within the Web Content Accessibility Guidelines to AA contrast ratio standards when using text on backgrounds.

Neutrals

Black/100
Black/90
Black/80
Black/70
Black/60
Black/50
Black/45
Black/40
Black/35
Black/30
Black/25
Black/20
Black/15
Black/10
Black/5
Black/4
Black/3
Black/2
Black/1
Black/0
White/100
White/90
White/80
White/70
White/60
White/50
White/45
White/40
White/35
White/30
White/25
White/20
White/15
White/10
White/5
White/4
White/3
White/2
White/1
White/0

Colors

Yellow

All color choices should fit within the Web Content Accessibility Guidelines to AA contrast ratio standards when using text on backgrounds.

Yellow/6
Yellow/5
Yellow/4
Yellow/3
Yellow/2
Yellow/1
Yellow/0

Lime

All color choices should fit within the Web Content Accessibility Guidelines to AA contrast ratio standards when using text on backgrounds.

Lime/6
Lime/5
Lime/4
Lime/3
Lime/2
Lime/1
Lime/0

Green

Green is positive and we use it to indicate success. It’s often used for success messaging or validating that an action has worked correctly.

Green/6
Green/5
Green/4
Green/3
Green/2
Green/1
Green/0

Blue

All color choices should fit within the Web Content Accessibility Guidelines to AA contrast ratio standards when using text on backgrounds.

Blue/6
Blue/5
Blue/4
Blue/3
Blue/2
Blue/1
Blue/0

Purple

All color choices should fit within the Web Content Accessibility Guidelines to AA contrast ratio standards when using text on backgrounds.

Purple/6
Purple/5
Purple/4
Purple/3
Purple/2
Purple/1
Purple/0

Pink

All color choices should fit within the Web Content Accessibility Guidelines to AA contrast ratio standards when using text on backgrounds.

Pink/6
Pink/5
Pink/4
Pink/3
Pink/2
Pink/1
Pink/0

Red

Red is used for error states and error messages. It is also used to draw attention to actions that are destructive or cannot be reversed.

Red/6
Red/5
Red/4
Red/3
Red/2
Red/1
Red/0

Orange

Orange is used for error states and error messages. It is also used to draw attention to actions that are destructive or cannot be reversed.

Orange/6
Orange/5
Orange/4
Orange/3
Orange/2
Orange/1
Orange/0