Style Guide Menu

Colours


Text colours Back to top

$body-copy

#282828

Used for all main content copy.

$coop-grey

#6e6e6e

Used for various elements: buttons, rules, borders.

$coop-blue

#00a1cc

For stand-out text and headings, only to be used above 18px


$coop-link-blue

#00729a

To be used for all text links

$coop-blue-highlighted

#00bbe3

Hover colour for text links

$coop-link-visited

#551A8B

Colour for visited links


Page colours Back to top

$white

#fff

Main background colour for pages

$offwhite

#f3f3f3

Alternative colour for sections within pages

$coop-grey

#6e6e6e

Used for borders, horizontal rules, etc.

$added-to-page

#fff7bf

Used when an item is added to a page; e.g. within forms


Buttons colours Back to top

$offwhite

#f3f3f3

Default button colour

$offwhite-highlighted

#e6e6e6

Default button hover

$button-green

#00a318

Primary button colour

$button-green-highlighted

#00c81a

Primary button hover

$coop-blue

#00a1cc

Secondary button colour

$coop-blue-highlighted

#00bbe3

Secondary button hover


Status colours Back to top

$button-green

#00a318

To be used for positive messages such as success, at 18px+

$info-orange

#dc7d00

Used for stand-out messages at 18px+

$saleerror-red

#d0091c

For warning, error or sale messages only