Some guidelines for warm grey text on the web

Inayaili de León Persson

Inayaili de León Persson

on 26 January 2012

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 – 20 February 2019

Snapcraft squad Report a Snap Last year, a snap was found in the Snap Store using computing resources for bitcoin mining without user consent. This software was retired from the Store after further investigation and highlighted the need…

A fresh look for releases.ubuntu.com

Updating the design of the Ubuntu Releases website using Vanilla Framework

Design and Web team summary – 04 February 2019

Welcome to the latest work and updates from the design and web team. Web squad Three new homepage takeovers This iteration we designed three, built two and are showing one new homepage takeover. Branded snap appstores is live Broadsign and…