Your submission was sent successfully! Close

  1. Blog
  2. Article

Peter Mahnke
on 8 April 2022

Design and Web team summary – 8 April 2022

The Web and design team at Canonical run two-week iterations building and maintaining all of the Canonical websites and product web interfaces. Here are some of the highlights of our completed work from this iteration.


The Web team develops and maintains most of Canonical’s sites like, and more. 

New Azure SQL page

This iteration we’ve been busy with adding more pages to the sites that we maintain. We’ve built a new page to promote the SQL Server on Ubuntu Pro for Azure solution that we’ve co developed with Microsoft. resources page

We’ve also built a page for the microsite that aggregates resources that help users evaluate and understand Microk8s. Based on a similar page on the microsite, the new Resources page highlights videos, webinars, whitepapers, reports and blogs giving users a single place for all these resources presented in an editorial style. 

Page about Canonical’s documentation practice

Canonical has been undertaking a project to improve documentation practice across the company. As frameworks are put in place and more documentation is created, we’ve built a new page to communicate the practices, principles and milestones of this project. This page will continue to grow and evolve as the project progresses. 


The Apps  team develops the UI for the MAAS project and the JAAS dashboard for the Juju project.

Tag management

We’ve completed the new UI for managing tags in MAAS which will be released in MAAS 3.2.

It’s now possible to add and remove tags from multiple machines via the machine list.

Tags can also be managed via the new tag list. This also includes a new feature where machines can be automatically tagged using machine attributes via XPath expressions.

We hope this will make managing tags in MAAS a whole lot easier!

Design system


The Vanilla team designs and maintains the design system and Vanilla framework library. They ensure a consistent style throughout web assets.

Aquanilla – our April Fool’s joke

For the April Fool’s joke this year we “rebranded” our Vanilla home page with a style inspired by retro Aqua UIs of Apple computers.

It started out as a small joke PR introducing Aqua-style buttons to Vanilla, created by Clem when he was a quest dev in our squad last iteration. With the 1st April approaching we decided to take it a step further and make a whole homepage out of it.


We also worked on improving our current side navigation’s accessibility. During our recent accessibility training we noticed that even when the side navigation was off screen, the list of nav items was still in the tab order of the page. This made poor user experience for keyboard navigation users. The fix ensures the navigation is removed from the tab order when it’s off screen, and you are only able to tab through the list items when the side navigation drawer opens. 

Toolbar pattern sprint

We worked on designing a new toolbar component, which would allow designers to combine different types of tools in a single action bar. We looked into how other companies design their toolbars; what components could be included within one, and how it would behave. We are still working on specifications and visual design, as well as the responsive behaviour of the component. 

Stepper pattern specification

This iteration we worked on a sprint to improve our stepper pattern. Firstly we did an audit of our products and sites to understand all the states that are needed, then we were able to define all the variations and recommended usage. We also did some visual benchmarking to help define the design direction. We will be publishing the full specifications once the team review is complete.


The Brand team develop our design strategy and create the look and feel for the company across many touch-points, from web, documents, exhibitions, logos and video.

A number of documents were completed for the Marketing and Product Management teams in this iteration.

The release t-shirt was designed for the upcoming 22.04 LTS release later this month as well as a number of designs for the AWS summit in the US.

Dell event

We designed a booth for our participation in the Dell Tech World event to be held in Las Vegas in May.

Desktop & server installer for Ubuntu 22.04 LTS

Third party drivers screens


The Marketplace team works closely with the Store team to develop and maintain the Snap Store site and Charmhub site.


Bundles discovery

Where did the Bundles go?

Within the new store, we don’t have the easy way of finding Bundles anymore.
We have been working on improving the user experience of users looking for Bundles.
We will be able to filter by Bundles or Charms and sort them.

Moreover, while performing a search on keywords, we’ll be able to find Bundles at a glance , on top of the auto-complete list of suggestions, by order of relevance.

After a search, Bundles will be on top of the results.

We are also working on a visual distinction between Bundles and Charms. Those images are still reflecting work in progress.

Team posts:

We are hiring!

With ♥ from Canonical web team.

Related posts

Anthony Dillon
25 October 2023

Web team – hack week 2023

Design Article

Today, around 96% of software projects utilize open source in some way. The web team here at Canonical is passionate about Open source. We lead with an open-by-default approach and so almost everything we do and work on can be found publicly on the Canonical Github org. It is not enough to simply open our ...

Bartek Szopka
18 July 2023

Vanilla 4.0 release

Design Article

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 websites, including typography changes of headings utilising new variable Ubuntu font, wider grid width, removed rounded corners, some updated colours, and updates t ...

Goulin Khoge
14 October 2022

Introducing a VSCode extension for Vanilla CSS Framework

Ubuntu Article

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 projects at Canonical. Knowing all the class utilities could be tricky. That’s why we make sure that our documentation is up-to-date and accessible as much as possible. ...