--- title: Colours section-title: Design Elements description: This is the primary and secondary colour palettes as described in the PSD styleguide docs: true navgroup: styleguide navsub: design-els navactive: colours --- Without colours, our sites would be pretty boring. This page documents the colour variables available in fozzie, as defined in the Just Eat brand guidelines. **Important** – When using the colours in your own project/component, don’t use any variables that directly reference a colour such as `$red`. It’s a much better idea to abstract these colours to a separate variable (i.e. `$btn--bg`) so that should the base colours change and a variable gets deleted or renamed, updating your references will be much easier. Alternatively, use one of the abstracted variables included in Fozzie, which are detailed below. --- ## Colours by Usage ### Primary and Secondary Colours

$color-primary

Main AA Red.
$color-secondary

Main AA Blue.
Used for buttons and links.

--- ## Main Typographic Colours

$color-text (uses $grey--dark)

The default text colour.
$color-headings (uses $grey--darkest)

Used for headings and filter text.
$color-text--hint (uses $grey--mid)

Used for text hints.
$brand--red

Official Brand Red.
Not fully AA Accessible at smaller font sizes – should only be used for text at larger or bold text sizes.

--- ## Link Colours

$color-link-default (uses $blue)

The default link colour.
$color-link-hover (uses $blue--dark)

Colour for link hover and focus states.
$color-link-active (uses $blue--darkest)

Colour for link active states.

--- ## Background colours Colours to be used for main content, info boxes, notifications, statuses and errors.

$color-bg--component (uses $white)

Background colour for content and text panels.
$color-bg (uses $grey--offWhite)

Used for page background (and most grey backgrounds).
$color-bg-notification (uses $yellow--light)

Background colour used for generic alert notifications.
$color-bg-accept (uses $green--offWhite)

Background colour used for 'acceptance' or 'added' messages.
$color-bg-info (uses $blue--offWhite)

Background colour used for 'information' notifications or boxes.
$color-bg-error (uses $red--offWhite)

Background colour used for 'error' alerts.

--- ## Keylines / Separators Colours to be used for keylines or separators for page content.

$color-border (uses $grey--lightest)

Colour used for keylines and separators between content and components.
$color-border--interactive (uses $grey--lighter)

Colour for keylines around interactive controls, such as checkboxes.
$hr-color (uses $grey--lightest)

Colour of page separators – hr tags.

--- ## Marketing/Brand Specific Colours Colours to be used purely for marketing purposes.

$color-btas-primary (uses $purple)

Colour used BTA Marketing Awards – Primary Colour.
$color-btas-bg (uses $purple--light)

Colour used BTA Marketing Awards – Background Colour.

## Full Brand Colour Palette For reference, this is the full set of brand approved colours available to use in your projects and components. Remember, when using the colours, it’s best to abstract these out to variables that are more relevant to your component (i.e. `$btn-bg`) so that should the colour palette change and a colour get deleted, it makes updating your own dependent colours much easier. --- ## Grey Palette

$grey--offWhite
$grey--lightest
$grey--lighter
$grey--light
$grey--mid
$grey--dark
$grey--darkest

--- ## Red Palette

$red
$red--offWhite

Variant of $red for background states.
$red--dark

Variant of $red for hover/focus states.
$red--darkest

Variant of $red for active states.

--- ## Blue Palette

$blue
$blue--offWhite

Variant of $blue for background states.
$blue--dark

Variant of $blue for hover/focus states.
$blue--darkest

Variant of $blue for active states.

--- ## Green Palette

$green
$green--offWhite

Variant of $green for background states.
$green--dark

Variant of $green for hover/focus states.
$green--darkest

Variant of $green for active states.

--- ## Miscellaneous Colours

$orange
$yellow--light
$purple
$purple--light

--- ## AA Large Colours These colours are not AA accessibility compliant unless used on text of 18px font-size or higher. They can also be used for incidental background colours.

$brand--pink
$brand--orange
$brand--green
$brand--blue

## Secondary non-AA Accessible Colours These are incidental colours only to be used for decoration - never as text

$blue--light
$blue--lighter
$yellow
$orange--light