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.
$color-primary
Main AA Red.
$color-secondary
Main AA Blue.
Used for buttons and links.
$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.
$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.
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.
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.
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.
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--offWhite
$grey--lightest
$grey--lighter
$grey--light
$grey--mid
$grey--dark
$grey--darkest
$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
$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
$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.
$orange
$yellow--light
$purple
$purple--light
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
These are incidental colours only to be used for decoration - never as text
$blue--light
$blue--lighter
$yellow
$orange--light