Colour Palette

The colours below are used throughout the CMS and each specifies the hexcode and LESS names for the colour.

Text and link colours

Headings, paragraphs, table data and most other text is grey in colour, with the blue colour used to indicate a link. Warning text uses the red colour below. In forms the light grey colour below is used for placeholder text for inputs.

• $cmsGrey

  #6A6F75

• $cmsPlaceholder

  #9A9FA5

• $cmsLink

  #0570B6

• $red

  #D62D29

Tab bar and background colour

Tab bars and backgrounds use a light grey colour.

• $cmsLightGrey

  #EDF0F3

Button colours

Primary buttons are a bright blue colour, unless they are disabled, in which case they will be light grey. Secondary buttons use this light grey colour for their border and the darker grey for text. The green colour only occurs in the app editor screen to publish content.

• $buttonPrimary

  #00B5EB

• $buttonSecondary

  #D2D9E1

• $buttonSecondaryText

  #6D7C98

• $buttonPublish

  #9BCA00

Table colours

Tables are used in the CMS to list users, channels and user groups. They are candy-striped so the background of each odd numbered row is grey, while the even numbered rows are white. The header of the table is light blue and the table head text is the darker blue colour.

• $tableRow

  #F7F7F7

• $textHead

  #E7F2F9

• $componentBorder

  #E1E1E1

Icon colours

Icons and illustrations have a very limited colour palette and these should always be used when creating new ones.

• Primary

  #6D7C98

• Shading

  #EDF0F3