Canonical Vanilla
Canonical Vanilla / 2013– / Style / Platform Screen Languages
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.
At a glance
Visual 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
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
Use this style
Take the compact brief into a project or hand the structured version to an AI tool.
Detailed guidance and sourcesProduction rules, reference works, comparisons, research and citation formats
Dictionary entry
- Type
- Use Ubuntu Variable with light display headings and bold small headings and UI labels.
- Composition
- Divide an eight- or twelve-column grid in 25-percent units, putting short headings left and longer content right; rule the section tops.
- Material
- Start from white space and dark text, using orange or aubergine only for links, focus and brand moments.
- Caution
- Ubuntu type alone does not make Vanilla. Keep the quarter-based splits and the reading rhythm between sections consistent too.
- Further study
- Vanilla brochure layouts / Ubuntu variable type scale / Canonical application layout
Related entries
- Mozilla Protocol (Mozilla Protocol)Same Platform Screen Languages lineage.Compare Canonical Vanilla and Mozilla Protocol
- GitHub Primer (GitHub Primer)Same Platform Screen Languages lineage.Compare Canonical Vanilla and GitHub Primer
More from Platform Screen Languages
Continue through styles in the same Platform Screen Languages family, prioritised by shared effects.
- Adwaita (アドワイタ)Shared effects: Technique / Calm / Trust.
- GOV.UK Design System (GOV.UK デザインシステム)Shared effects: Trust / Calm / Technique.
- Breeze (ブリーズ)Shared effects: Technique / Calm / Trust.
Browse all Platform Screen Languages entries
Cite this entry
The dictionary is meant to be linked to. Take whichever form fits where you are writing.
- Link
- https://indexstyle.org/styles/canonical-vanilla
- Markdown
- [Canonical Vanilla — IndexStyle](https://indexstyle.org/styles/canonical-vanilla)
- HTML
- <a href="https://indexstyle.org/styles/canonical-vanilla">Canonical Vanilla — IndexStyle</a>