Vanilla Framework is a living design system for our products that will grow along with our organization.

Vanilla’s component library is used by many internal and external websites along with the cloud applications JAAS dashboard and MAAS UI. We release updates approximately every 2 weeks, either for bug fixes, improvements or new components. All members of the team can make changes once discussed and agreed upon. We then review and QA carefully before pushing the code to our master branch.

Which in turn makes the component lifecycle a very complex thing to manage.

Pitch proposal

Components are reusable parts of the user interface intended to support a variety of websites and applications throughout Canonical.

Individual components can be used…

Over the past year, we’ve been working hard to bring you the next release of Vanilla framework: version 2.0, our most stable release to date.

Since our last significant release, v1.8.0 back in July last year, we’ve been working hard to bring you new features, improve the framework and make it the most stable version we’ve released.

You can see the full list of new and updated changes in the framework in the full release notes.

New to the Framework


The release has too many changes to list them all here but we’ve outlined a list of the high-level changes below.

The first major…

As part of the ongoing project to upgrade all of our websites to use our Vanilla Framework, we tackled, a website that lists all Ubuntu releases available for download.

Design and build process

Identify page types

The first step in the design process was identifying how many pages needed updating and the general scope of the project.

We conducted a technical investigation, aided by the engineering team who maintain the project, and identified how the site works and to what extent we could modify the codebase.

The releases pages are unusual in that they are not generated by a web framework or served as static HTML…

Design a fitness digital leaderboard that generates real-time performance data, creating a multi-screen user experience.


I prepared a questionnaire survey and distributed it among multiple users at my local gym.

  • Visualize performance data for users to understand
  • User participation and identity
  • Technical constraints accessing smartphone app

User profiles

I prepared a questionnaire survey and distributed it among multiple users at my local gym.

Vanilla Documentation and Marketing website

After a busy year of working on our Vanilla CSS framework, I wanted to reflect upon what I have learned, and share my thoughts on leading the design for a growing design system.

How it all began

Whilst working as a visual designer across our suite of Cloud and Web products, I became aware of all the different styles used in each product, which gave me an overview of how we were slowly becoming inconsistent in design.

Photo credit: Larson Solecki

The end of a 10 year relationship…

I’ve been married to my iPhone since 2007 when Apple launched their first-generation smartphone, it’s been a wonderful journey over the past 11 years but with the evolution of smart devices, there was more on offer elsewhere and decided to make the jump…

Four reasons I married Google Pixel

1. Size matters

The iPhone has a 4.7-inch screen, while Pixel 2’s screen spans 5 inches. Both are pocketable and easy to hold, but I prefer the Pixel 2’s slightly larger screen and sharper resolution. Along with 1080p resolution it has the best-in-class camera.

2. The look

Neither phone sets the world alight with its design. The iPhone 8 disappoints mainly because it…

The design team were tasked in making MAAS accessible. How did we make this happen?

Firstly, we needed to reference WCAG 2.0 accessible guidelines and understand the four principles of accessibility: Perceivable, Operable, Understandable and Robust. This then enabled us to determine design goals from these principles to achieve Level A. Another great resource was WebAIM which acted as a guide to define and document improvements and solutions.

Design principles

  • Perceivable — Users must be able to perceive the information being presented
  • Operable — Users must be able to operate the interface
  • Understandable — Users must be able to understand the information…

Karl Waghorn-Moyce

Design and coffee maker. Currently pushing pixels @Ubuntu.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store