Style guide rules

Dashboard layout

Visual Hierarchy is the organisation of design elements by importance. It is best practice to use a Z-formation, which draws the users' attention to the top-left corner first before moving to the top right, then down to the bottom left, and finally the bottom-right corner. Just like how you would read a book.

1

2

3

1

2

3

1

2

3

4

For more information on dashboard layouts, click here.

NHS logo

Always place the NHS logo in the top right hand corner of your dashboard with a 100px width and a 40px height. The padding around the logo is 32px.

For more information on how to implement the NHS logo in your dashboard, click here.

NHS Logo as shown in the NHS England dashboard templates

Header and footer

Add a short note below each title to explain what the title is showing. The whole tab should be relevant to your description. If the description is too long, add it to the tooltip in an information icon instead.

Footers should include the contact information and, if useful, a last refreshed date/time.

For more information on what to include in your dashboard header, click here.

Cover page or About page

Screenshot of the About page from the NHS England Tableau Templates

See the NHS England Tableau Templates for an example of this in practice.

Case

Dashboard titles and Tabs should be in sentence case, which means only the first letter of each sentence should be capitalised.

Workbook names should be in title case, which means that the first letter of each key word should be capitalised. The small, minor words such as in, of, with, at, and, etc should be in lower case.

For more information on typography, click here.

Font

Use Arial as your primary typeface, no smaller than 10pt. Utilise various weights to establish a visual hierarchy. Be consistent in size, boldness and colour.

Here is a summary of the most important dashboard objects and their font specification that you must use in your dashboard:

Objects	Font	Weight	Size	Colour	HEX	Alignment
Dashboard title	Arial	Bold	18pt / 24px	NHS Black	#212B32	Left
Chart / card heading	Arial	Bold	12pt / 16px	NHS Black	#212B32	Left
Filter title	Arial	Bold	11pt / 15px	NHS Black	#212B32	Left
Description / paragraph	Arial	Regular	11pt / 15px	NHS Black	#212B32	Left

To see the full font specification, please click here.

Alignment

Right align numbers.

Left align text.

Filters

Place filters horizontally under the dashboard title and introduction.

Filter titles should be in Arial black. They do not need to have a colon after the label and say 'Choose'.

For more information on filters best practice, click here.

Colours

Use NHS Blue

NHS Blue

RGB: 0 / 94 / 184

#005EB8

Use lots of White

NHS White

RGB: 255 / 255 / 255

#FFFFFF

When using colour to plot multiple variables on a chart, use these colours strictly in this order:

One colour chart

#005EB8

Two colour chart

#41B6E6

Three colour chart

#4C6272

Four colour chart

#FFB81C

Five colour chart

#AE2573

Six colour chart

#00A499

Seven colour chart

#E317AA

Eight colour chart

#007F3B

Nine colour chart

#9A6324

Ten colour chart

#78BE20

Eleven colour chart

#ED4F00

Twelve colour chart

#880FB8

For more information on which colours you should use and when, click here.