Canonical Vanilla vs Mozilla Protocol
Canonical Vanilla / Mozilla Protocol
Both sit in Platform Screen Languages, so the question is not what they belong to but how they behave. They are reached for with some of the same intent, which is where they get confused.
Canonical Vanilla
Canonical's CSS-based screen language unifies Ubuntu, MAAS, Juju and related sites and applications through Ubuntu type, split grids, ruled sections and generous space, optimized for scanning long technical content.
Mozilla Protocol
Mozilla's flexible web system puts content and global accessibility ahead of decoration while retaining a vivid open-web personality.
| Canonical Vanilla | Mozilla Protocol | |
|---|---|---|
| Era | 2013– | 2017– |
| Family | Platform Screen Languages | Platform Screen Languages |
| Kind | Style | Style |
| Cues | Thin large headings paired with bold smaller headings in Ubuntu type / Asymmetric 25/75 and 50/50 splits / Fine rules above sections and generous vertical space / White surfaces, dark text and orange or aubergine focus | Bold black headings and broad white space / Large fields of vivid color / Flexible billboards and cards / Short copy and explicit calls to action |
| Best used for | Technical product sites whose long copy must be scanned rapidly by heading · Sharing one typography and sectional rhythm across Canonical product sites and admin apps | Open-web product marketing across languages · Balancing bright brand expression with accessible content |
| Type | Use Ubuntu Variable with light display headings and bold small headings and UI labels. | Use short heavy headings, readable body text and room for translation expansion. |
| Composition | Divide an eight- or twelve-column grid in 25-percent units, putting short headings left and longer content right; rule the section tops. | Separate one-message billboards from reusable card groups. |
| Material | Start from white space and dark text, using orange or aubergine only for links, focus and brand moments. | Ground the page in black and white, reserving gradients for a single focal area. |
| Caution | Ubuntu type alone does not make Vanilla. Keep the quarter-based splits and the reading rhythm between sections consistent too. | Spreading the Firefox gradient everywhere buries the content. Color should reinforce meaning and focus. |