Skip to content

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.

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

NHS Logo as shown in the NHS England dashboard templates

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

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.

Dashboard sizing

Default recommended option: 1200px fixed width dashboard
  • Suitable for a wide range of screen sizes used by a diverse user base
  • Enables better feature development using a full range of Tableau functionality (e.g floating containers for show/hide)
  • Speed improvements in dashboard performance
  • Less development and testing required
Valid use case under the right conditions: 1840px fixed width dashboard
  • Where the user base is entirely analytical
  • Where all screen sizes are known or dashboard is designed for a permanent screen (e.g a control room)
  • Note that users accessing dashboards with smaller monitors will have a horizontal scroll bar and may omit elements of the dashboard. It is recommended to add an information note on the dashboard to explain that it is best viewed on a wide screen monitor (i.e 1920px width at 100% display scaling).
Valid use case under the right conditions: 1200px to 1840px width range dashboard
  • Where the user base is entirely analytical
  • Where a wide range of screen sizes is used by different users
  • This will allow certain visuals such as line charts and bar charts to expand to monitors that are wider. This benefit must be weighed against the performance trade off of slower load times, more development/testing and reduced Tableau functionality in responsive range dashboards

For more information on sizing, click here.

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.