---
title: Some guidelines for warm grey text on the web
description: '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, a […]'
url: https://canonical.com/blog/some-guidelines-for-warm-grey-text-on-the-web?format=md
---

1. [Blog](https://canonical.com/blog)
2. Article

---

[Inayaili de León Persson](https://canonical.com/blog/author/inayaili-de-leon-persson "More about Inayaili de León Persson")

26 January 2012

# Some guidelines for warm grey text on the web

[accessibility](https://canonical.com/blog/tag/accessibility)
[Design](https://canonical.com/blog/tag/design)
[font](https://canonical.com/blog/tag/font)
[guidelines](https://canonical.com/blog/tag/guidelines)
[typography](https://canonical.com/blog/tag/typography-2)
[user experience](https://canonical.com/blog/tag/user-experience-2)
[ux](https://canonical.com/blog/tag/ux)
[web](https://canonical.com/blog/tag/web)

---

Share the article

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.

*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.

*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.

[Get in touch

Interested in running Ubuntu in your organization?](https://ubuntu.com/about/contact-us/form)

## Sign up for our newsletter

Get the latest Canonical news and updates in your inbox.

Work email:

\*I agree to receive information about Canonical's
products and services.

By submitting this form, I confirm that I have read and agree to [Canonical's Privacy Policy](https://canonical.com/legal/dataprivacy).

Sign up

## Share on

---

## Related posts

[### Why web engineering is great](https://canonical.com/blog/why-web-engineering-is-great)

Hi, I’m Johann! I’m an engineering manager in Canonical’s web team. For the larger part of my 15 years of work experience as engineer, I’ve been working in web development....

[Johann Wolf](https://canonical.com/blog/author/johannwolf)

27 April 2026

[### Vanilla 4.0 release](https://canonical.com/blog/vanilla-4-0-release)

Last week we released a new major version of the Vanilla framework. Vanilla 4.0 introduces the elements of the new style used for a current rebranding of Canonical’s brochure...

[Bartek Szopka](https://canonical.com/blog/author/bartoszopka)

18 July 2023

[### Introducing a VSCode extension for Vanilla CSS Framework](https://canonical.com/blog/introducing-a-vscode-extension-for-vanilla-css-framework)

The Vanilla CSS Framework is a utility class-based and customizable SASS library that is the go-to when it comes to styling websites and dashboards across the majority of...

[Goulin Khoge](https://canonical.com/blog/author/goulinkh)

14 October 2022

[### Challenges designers face in open source (and how to fix them)](https://canonical.com/blog/challenges-designers-face-in-open-source-and-how-to-fix-them)

Open source powers up to 90% of modern software, yet many projects lack usability. Canonical’s Design team surveyed 115 cross-functional professionals to uncover the 4 core...

[Kola Ojoodide](https://canonical.com/blog/author/kola-ojoodide)

26 June 2026
