Colour Palette

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

Text and link colours

Headings, paragraphs, table data and most other text is navy 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.

  • $textNavy

    #213444

  • $webappPlaceholder

    #B1B6BE

  • $webappLink

    #0570B6

  • $red

    #D62D29

  • $textSecondary

    #637289

  • $mistyBlue

    #A6B2C4

  • $steelBlue

    #657284

  • $smokeGrey

    #818181

Button colours

Primary buttons should take on the brand colour as set by the app editor. The active state of the button has a box-shadow.
Upon hovering over the button the background colour should be lighter (using Sass’ lighten function to lighten the colour by 5%). When the user clicks the button the box shadow is changed to look like the button has been pressed.

  • $buttonDisabled

    #E0E0E0

  • $buttonSecondary

    #D2D9E1

  • $actionGreen

    #6EB81D

  • $remove

    #D72B36

  • $lightRed

    #D34C56

  • $buttonBlue

    #00346F