Cookies on ons.gov.uk

Cookies are small files stored on your device when you visit a website. We use some essential cookies to make this website work.

We would like to set additional cookies to remember your settings and understand how you use the site. This helps us to improve our services.

View cookies

You have accepted all additional cookies. You have rejected all additional cookies. You can change your cookie preferences at any time.

Skip to main content

Visual concept

Overview

The ‘dot’ visual concept

We are taking the most basic representation of data, a dot, and turning it into an identity fit for the Office for National Statistics (ONS).

The dot can be applied to print and digital communications, both within a grid and breaking out of it. The dots make up a toolkit of graphic elements that can easily be applied to form recognisable ONS brand materials.

Circles are a common feature of identity design that are used by many of the world’s leading brands. They can be used to convey:

  • positive emotional messages (circles seem softer and more welcoming than harshly angled shapes such as triangles)
  • unity and commitment (people relate rings to the idea of marriage)
  • strength and steadiness (circles are consistent and sturdy)

Applying the concept

In recent years, branding of ONS materials has centred around different uses of circles and dots, such as those used for the Census 2021 campaign.

Dots are now a part of a coherent identity for the ONS, we use a grid pattern and circle holding shapes.

Grid pattern

A grid of dots that uses scale to represent numbers 0 to 15 in binary to produce a seemingly random pattern that still feels structured.

Basing the pattern on data ties in with our purpose of producing and presenting statistics.

The pattern is flexible, you can:

  • repeat it to cover larger areas
  • use it in a variety of colours
  • crop and scale the full dot pattern
  • remove dots from the pattern to create interesting shapes
Grid pattern repeating four different sized dots arranged uniformly in tints of night blue.
Basic data grid pattern
Four grid patterns with dots in tints of night blue arranged uniformly and displayed on a different background of the four Night blue tints.
Grid pattern on light and dark backgrounds
Dots in tints of the primary brand colours arranged in a grid pattern with dots removed from the top or bottom of each column.
Removing dots to create interesting "cuts of the data"

Colours

On ONS branded material, you should use the primary brand colours.

However, for some campaigns you can include the extended palette.

We have created different versions of the pattern using these colour palettes:

  • mono colour – work well for backgrounds and larger repeating areas
  • two-tone – for creating campaigns where it is suitable to differentiate from general ONS branding
  • multicolour solid – used in cuts of the pattern to add visual interest to artwork (do not use more than five colours)

The pattern can be applied on dark or light backgrounds, using full colours or one of the tints in the ONS palette.

The dot pattern in three different mono colours.
Examples of mono colours
The dot pattern in three different two-tone colours.
Examples of two-tone colours
The dot pattern in three different multicolour palettes.
Examples of multiple solid colours

Sizing and spacing

The scale of the dots is evenly stepped in four sizes – 25%, 50%, 75% and 100% of the largest dot.

The spacing between two of the largest dots is 50% (the size of the second smallest dot).

For example, on an A4 document, the dots:

  • are 2mm for the smallest size
  • are 8mm for the largest size
  • have spacing of 4mm and 6mm in between

The gap between two largest dots is 4mm.

Diagram showing the four sizes of dots: 25%, 50%, 75% and 100% and the use of the 50% dot to space them all evenly in the grid.
Sizing and spacing of the dot pattern

Dots as shapes

Circles can also be used as:

An example of the circles concept used to frame a photograph in an ONS brochure
Layout elements: circles used to frame photography
Two pages of a booklet with icons set in circles next to paragraphs of text set on larger solid primary-coloured circles.
Layout elements: booklet spread using circles
Two illustrated full-body characters each set on circular shadows under their feet with solid primary coloured circles set behind them.
Holding shapes: illustrations of characters with circles to ground them
Photographic portrait of Sir Ian Diamond cut out and set on a solid circle background
Background decoration: portrait with circle background

Examples of the ‘dot’ in use

A pull-up marketing banner for the ONS with circles framing photographs beneath text alongside a small number of 'dots' arranged in a grid.
Identity applied to a survey pull-up banner
A hand holding a smart phone displaying a media player with an ONS podcast with dots used in the graphic.
Identity applied to podcast artwork
Photograph of a wall in the ONS reception area showing a rendered concept the 'dots' applied to the wall above and .beneath a welcome message above a quote with picture from Sir Ian Diamond.
Conceptual design showcasing how the visual identity can be applied to our physical spaces
Inclusive data taskforce mockup cover
Dot pattern applied to front cover of a report
Inclusive data taskforce mockup inside
Identity applied to inside pages of a report
Eventbrite banner visual identity
Grid pattern on an Eventbrite banner

Help improve this page

Let us know how we could improve this page, or share your user research findings. Discuss this page on GitHub (opens in a new tab)