† Hide or show labels
† This is the message that underpins the Money Advice Service brand

Brand basics

“We believe that the right money advice can make a difference to people’s lives.
And when people take steps to manage their money better, people can live better.”

Extending the brand guidelines

The existing brand guidelines explain the broad rules for describing and applying the brand. This section shows direct application of the colours, logo and visual devices for digital channels. Brand elements can be copied and used directly from these pages or from the style.css file.

Some digital principles

1 Space not boxes

Boxes, borders and shadows eat up screen space to isolate elements. If in doubt, use more white space before considering a box.

2 Custom fonts are great - in small doses

We can use proper typefaces online now - but it is not without problems. Key text items (nav, body, tools) should mostly use the best standard typeface for each platform.

3 Brand colours

Black, white and green. Use black and white to express clarity and openness.

The main brand green is #72bf44 fresh and green. Try and use this whenever green is used.

For small items or elements where accessibility is crucial, there are two multiplied shades darker #34750e and #225903. Use them sparingly.

greenshades

3 Secondary colours

This is a compilation and consolidation of the best of the 3 different colour sets from the brand guidelines. Use the secondary colours as accents for subjects and UI elements. Use the tints in tables, charts, infographics and supporting imagery.

Black
#790565

AA

#bd258d

AA

#f5a0d4
#fbd6ec

#44428c

AA

#6b69ad

AA

#a9a8df
#dadaf1

#143066

AA

#1d5f9e

AA

#6eafed

Blues reserved for links


#225903

AA

#34750e

AA

72bf44

Brand green

#aee174
#d6f0b9

#d73530

Alert red
AA

#cb3f01

AA

#f37021
#ffc44a
#fff8b3

Highlight yellow


#00675c

AA

#00af9e
#9edbd7
#ceedeb

#333

Body text
AA

#666

AA

#999
#ccc
#eee

Don't use,
too light


Use this palette gently. Prefer solid colour over a gradient, prefer black and white over a colour. If used on text or other critical element, use the AA marked colour + white.

The colours are used for differentiation purposes only and do not have a meaning beyond their immediate context. The colours work best in single colour sets, alongside main elements in black, white and brand green.

colour-usage

4 The brandmark

The brandmark should be integrated into the top navigation, with the logo a clickable element taking the user to the homepage.

Always make sure the brandmark has been rendered cleanly from a large bitmap or vector, with no sub-pixels making up a fuzzy baseline on either the text or the logo.

fuzzy-sharp

Here are some we prepared earlier to fit grid column sizes.

24-col-gridback 7-col-wide

Wide variant over 7 cols on the 24 column grid

24-col-gridback 6-col-wide

wide variant over 6 cols on the 24 column grid

24-col-gridback 4-col-tall

Tall variant over 4 cols on the 24 column grid

24-col-gridback 3-col-tall

Tall variant over 3 cols on the 24 column grid

24-col-gridback

One last thing…

Don't use the ® symbol on the logo on every page, it becomes an illegible blur, and is not considered best practice.

Email this page Print this page
Next



Hide or show annotations

The brand guidelines are available in full here (PDF)

Hint: the best hinted sans-serif on Windows is still Arial

WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text.

WCAG small text is considered 13 pt and large text is considered 18 pt. Colour checker