Primary Colours

The following palette is comprised of basic colours for everyday use. The primary blue is an enhanced version of the corporate WFP Blue, designed to work well in digital colour space (RGB).

• Primary

  #2A93FC

  $primary

• Accent

  #1f6ebc

  $accent

• Body Text

  #404040

  $text-color

• Background

  #ffffff

  $white

Blues

In addition to primary blue, you can use various shades of blue in your designs, to establish and maintain visual hierarchy. Please, ensure you never use more than 3-4 shades of blue in your designs.

• #b2d8fe

  $blue-lighter

• #85c1fd

  $blue-light

• #57aafd

  $blue

• #2a93fc

  $blue-dark

• #037cf5

  $blue-darker

Greys

This palette was made to be used in establishing on-screen visual hierarchy. As grey is a neutral colour, it can be applied to any elements in need of small accents or emphasis.

• #e8e8e8

  $grey-lighter

• #bababa

  $grey-light

• #8c8c8c

  $grey

• #5e5e5e

  $grey-dark

• #303030

  $grey-darker

Special Colours

Slightly desaturated, to make sure they are easy on the eye, these colours are reserved only for special cases, such as call to action buttons or highlighting important on-screen messages.

• #ff5252

  $red

• #ffc759

  $orange

• #fcdc5d

  $yellow

• #b3de62

  $green