Website design guidelines

Colour

Website colour palette

Theme colours

Burgundy
R 164 G 16 B 85
HEX #A41055
Usage: Header bar - public facing

Black
R 0 G 0 B 0
HEX #000000
Usage: Header bar (to be defined)

Orange
R 243 G 112 B 33
HEX #F37021
Usage: Beta (new) message, graphic bars

Newsroom purple
R 153 G 0 B 102
HEX #990066
Usage: Newsroom banner, search and tags

Buttons and links

Blue
R 0 G 89 B 164
HEX #0059A4
Usage: Navigating content and information

Green
R 0 G 137 B 32
HEX #008920
Usage: Starting a process, primary actions

Link hovers

Blue link hover
R 51 G 153 B 204
HEX #3399CC
Usage: Blue link hovers

Green link hover
R 109 G 185 B 127
HEX #6DB97F
Usage: Green link hovers

Button shadows

Blue shadow
R 0 G 72 B 131
HEX #004783
Usage: 5 pixel line under button

Green shadow
R 0 G 110 B 26
HEX #006E1A
Usage: 5 pixel line under button

Button hovers

Blue button hover
R 0 G 72 B 131
HEX #004783
Usage: Blue button hover

Green button hover
R 0 G 110 B 26
HEX #006E1A
Usage: Green button hover

Button hover shadows

Blue button hover shadow
R 0 G57 B 105
HEX #003969
Usage: 5 pixel line under button

Green button hover shadow
R 0 G 88 B 21
HEX #005815
Usage: 5 pixel line under button

User interaction

Green alert
R 0 G 137 B 32
HEX #008920
Usage: Success alerts, check list ticks

Red alert
R 210 G 35 B 42
HEX #D2232A
Usage: Warning and failure alerts, check list crosses

Focus
R 255 G 204 B 51
HEX #FFCC33
Usage: Interactive elements focus, link focus

Tints

Green tint
R 245 G 250 B 246
HEX #F5FAF6
Usage: In form data consent background, important information box background

Blue tint
R 229 G 241 B 228
HEX #F0F5FA
Usage: In form terms and conditions background, related documents background

Light grey tint
R 250 G 250 B 250
HEX #FAFAFA
Usage: Call to action background, form background, more information box background

Greys

Mid grey
R 216 G 216 B 216
HEX #D8D8D8
Usage: Content key lines, form key lines

Dark grey
R 85 G 85 B 85
HEX #555555
Usage: Grey copy, form labels

Body grey
R 213 G 219 B 214
HEX #EDEDED
Usage: Body background