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.

Layout

Based on the Bootstrap approach of a 12 column grid with a maximum width of 1170px give us the flexibility to adapt to all the known layout needs of the site but maintain a consistent structure of pages.

Content pages are designed to be held in 8 columns when viewed on desktop (single column of content on mobile devices), this is designed to help with readability

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.

Status

These colours are used to define if a page is in the stages of testing (Alpha) or a tried and tested stage (Beta).

Palette

Extended

Additional colours used to reinforce the brand colours and provide more clarity in content, for example when a piece of content is important.

Monochrome