The guide sets out the ONS house style for the visual elements of charts. Following these styles will make sure charts look clear, consistent, visually-appealing, and on-brand.

Use this guide to find the right styles for typography, colours, gridlines and other chart details.

As well as points that apply across all chart types, specific guidance is provided for commonly-used chart types.

Guidance

Typography

Chart furniture

Chart types

Colour

Work in progress

What’s changed

Colour 2.0 🚧

Interactive elements 🚧

🗣️ Questions and feedback

Please post any question and feedback in the #design-and-datavis Slack channel. You can also contact Peter Broad (data vis) and Rachel Price (design) directly.

You can use this channel to:

• ask questions about how to use the style guide
• get advice on wider style questions that fall outside the style guide
• let us know any improvements we can make to the guide

The guide is a work in progress, so feedback is appreciated:

We’re keen to get:

• examples of cases where the guidance does not work.
• code snippets and any other tips to help people put the styles into practice, to add to the guide

Please share any suggestions you have through the #design-and-datavis channel or with Peter and Rachel

The development of this guide

• This guidance was initially created by the data vis and design teams to define our house style for use in the potential replacement for the in-house Chartbuilder tool

• Over time the styles will be integrated into all data vis outputs, including chart templates

• This guide focuses on visual style for charts.

  • Guidance on other aspects of data vis, for example chart choice, is found at style.ONS
  • General guidance on colours and other brand aspects can be found in the Brand guidelines

  These sources will eventually be housed in a unified ONS design system