Design

Colour Scheme

It’s important that background and foreground colours are accessible and have enough contrast to meet WCAG standards.

Primary Pallette

Variable name = $dark Hex = #262626

Accessible Colours $light (#FEFDFD) Small AAA - Large AAA $grey (#C9ABAB) Small AAA - Large AAA

Variable name = $light Hex = #FEFDFD

Accessible Colours $dark (#262626) Small AAA - Large AAA $medium (#595959) Small AA - Large AAA $link (#037F9B) Small AA - Large AAA

Variable name = $medium Hex = #595959

Accessible Colours $light (#FEFDFD) Small AAA - Large AAA

Variable name = $grey Hex = #C9ABAB

Accessible Colours $dark (#262626) Small AAA - Large AAA

Variable name = $link Hex = #037F9B

Usage

Used for links on $light background only.

Variable name = $accent Hex = #4169E1

Usage

Used sparingly to highlight elements such as active nav items.

Variable name = $focus Hex = #FF9100

Usage

Used for focus states.