Some guidelines for warm grey text on the web

Warm grey is one of the neutral colours from Ubuntu and Canonical’s colour palette. It has been added to the palette for balance, being a bridge between the vibrant orange and aubergine.

The brand guidelines specify that warm grey (hex value: #AEA79F) can be used for: backgrounds, graphics, pictograms, dot patterns, charts and diagrams, and large size text.

Even though its use has been tried and tested on some of our print design materials, we are still finding the best way of applying it on the screen, with accessibility considerations in particular being something we want to get right.

Ubuntu Server brochure
Warm grey used in a brochure spread and diagrams

I made a quick example of warm grey text on white and buttons with white text on warm grey and showed it to the Ubuntu accessibility team, who promptly gave me some feedback.

Warm grey text on white and white text on warm grey
Example used to showcase warm grey text on white and white text on warm grey

Here are the conclusions of this discussion, and what we will now try to follow as a rule:

  • Warm grey is easier to read on white and at larger sizes, such as 24-36px
  • It can be used for short, less important pieces of information (for example the date or author of a post or news piece below the main title)
  • It can also be used in buttons that are deactivated and therefore less relevant

Guidelines can change though. If something doesn’t evolve, or is at least reassessed at certain intervals of time, it can very easily stagnate. So we will test these conclusions and follow these simple rules for now, knowing that later on we may decide there is a better way of achieving the same results.

Talk to us today

Interested in running Ubuntu Desktop in your organisation?

Newsletter signup

Select topics you’re
interested in

In submitting this form, I confirm that I have read and agree to Canonical’s Privacy Notice and Privacy Policy.

Related posts

Design and Web team summary – 17 January 2020

The second iteration of this year is the last one before our mid-cycle sprint next week. Here’s a short summary of the work the squads in the Web & Design...

Design and Web team summary – 20 December 2019

This is the final iteration of the year. The team has worked exceptionally hard to produce a number of new projects and initiatives. Here is a shortlist of...

Design and Web team summary – 22 November 2019

This was a fairly busy two weeks for the Web & design team at Canonical.  Here are some of the highlights of our completed work. Web squad Web is the squad...