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.
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.
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
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
Use lots of White
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.