# Canonical Vanilla (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.

- IndexStyle No.571 — https://indexstyle.org/styles/canonical-vanilla
- Kind: Style · Family: Platform Screen Languages · Era: 2013–
- Mood: Technique, Trust, Calm
- What this family collects: Design languages written down for a platform and published, from the vendors that shipped an operating system to the governments that had no reason to hide rules paid for with public money, every one of them recognisable at a glance.

## Defining characteristics

- 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

## Composition recipe

- Typography & lettering: Use Ubuntu Variable with light display headings and bold small headings and UI labels.
- Layout & structure: Divide an eight- or twelve-column grid in 25-percent units, putting short headings left and longer content right; rule the section tops.
- Material & texture: Start from white space and dark text, using orange or aubergine only for links, focus and brand moments.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #FFFFFF
- The colour it is remembered by: #E95420
- Text and outlines: #2C001E

## What to avoid

Ubuntu type alone does not make Vanilla. Keep the quarter-based splits and the reading rhythm between sections consistent too.

## Application checklist

Work through this before calling a piece an application of this style.

- [ ] Visible in the piece: Thin large headings paired with bold smaller headings in Ubuntu type
- [ ] Visible in the piece: Asymmetric 25/75 and 50/50 splits
- [ ] Visible in the piece: Fine rules above sections and generous vertical space
- [ ] Visible in the piece: White surfaces, dark text and orange or aubergine focus
- [ ] The layout follows: Divide an eight- or twelve-column grid in 25-percent units, putting short headings left and longer content right; rule the section tops.
- [ ] The lettering follows: Use Ubuntu Variable with light display headings and bold small headings and UI labels.
- [ ] The material and surface follow: Start from white space and dark text, using orange or aubergine only for links, focus and brand moments.
- [ ] The colour relation holds: #FFFFFF as ground, #E95420 carrying the style, #2C001E for text and outlines
- [ ] At least one reference work below has been studied directly
- [ ] The caution above ("What to avoid") has been addressed

## Related styles

- **Mozilla Protocol (Mozilla Protocol)** — Mozilla's flexible web system puts content and global accessibility ahead of decoration while retaining a vivid open-web personality. → https://indexstyle.org/styles/mozilla-protocol
- **GitHub Primer (GitHub Primer)** — GitHub's design system for turning dense development workflows into shared rules for color, type, icons, spacing and components. It favors flow over decoration, keeping many states and actions in a small area without giving up accessibility or responsive behavior. → https://indexstyle.org/styles/github-primer

## Compose it with something else

The dictionary can put this entry in a structural role and another in an accent role, and report where the two fight: https://indexstyle.org/compose?ids=canonical-vanilla+mozilla-protocol

## Further study

- Vanilla brochure layouts
- Ubuntu variable type scale
- Canonical application layout

## Reference works

- Canonical Vanilla — Brochure Site Layouts — https://vanillaframework.io/docs/layouts/brochure

## AI interpretation

An AI-generated interpretation image exists for browsing convenience only — it is not a reference work: https://indexstyle.org/ai/canonical-vanilla.jpg

## Source of record

- Canonical Vanilla — Brochure Site Layouts — https://vanillaframework.io/docs/layouts/brochure

## Machine surfaces

- JSON: https://indexstyle.org/api/styles/canonical-vanilla
- Image-generation prompt (legally clean): https://indexstyle.org/styles/canonical-vanilla/prompt.txt
- MCP: https://indexstyle.org/mcp (tools: search_styles, get_style, compare_styles, compose_styles, find_related_styles; prompts: image-prompt, apply-style)