Design Elements for Citizens Advice Beta

This document starts to look at the design elements and principles of the Citizens Advice Digital Alpha Project. Using an Atomic Design approach, this guide outlines the atoms of the system. Use these abstract objects, the research findings and the content style guide to create concrete pages.

Logo

Typography

The font used is Open Sans a sans font chosen for legibility and consistency in online and offline applications. The font comes in various weights, but by default we will be using:

Open Sans 300

Open Sans 400

Open Sans 600

Open Sans 700

Typographic styles for content specific pages. See content guidelines for how to write content.

h1 for page titles

h2 sub header, for section titles

h3 for headings within sections

h4

h5

h6

This is a paragraph style for content.

Colours

Colour contrast

The colour contrast ratio for text and interactive elements should be at least 4.5:1 as recommended by the W3C.

Brand

Colours as defined in the Brand Guidelines. To be used in pairs as described below. These colours are not to be used for marketing communications such as campaigns, reporting and policy.