{"id":"canonical-vanilla","no":571,"name":"Canonical Vanilla","ja":"Canonical Vanilla","era":"2013–","family":"プラットフォームの画面言語","kind":"スタイル","collection":"Dictionary expansion 30","addedAt":"2026-08-22","source":{"title":"Canonical Vanilla — Brochure Site Layouts","url":"https://vanillaframework.io/docs/layouts/brochure"},"reference":{"status":"verified","pageUrl":"https://vanillaframework.io/docs/layouts/brochure","credit":"Canonical Vanilla — Brochure Site Layouts"},"essence":"Ubuntu、MAAS、JujuなどCanonicalのウェブサイトとアプリを、Ubuntu書体、分割グリッド、上罫付きセクション、広い余白で統一するCSSベースの画面言語。長い技術情報を見出しから速く走査できることを優先する。","cues":["Ubuntu書体の細い大見出しと太い小見出し","25/75、50/50を軸にした非対称な分割","各セクション上端の細い罫と広い上下余白","白い面、濃い文字、橙または茄子色の焦点"],"intents":["技術","信頼","静けさ"],"works":["技術製品の長い説明を、見出しから短時間で走査できるサイトへまとめるとき","複数のCanonical製品サイトと管理アプリへ同じ組版とセクションの律動を通すとき"],"recipe":{"type":"Ubuntu Variableを使い、大見出しは細く、小見出しとUIラベルは太くして対比を反転させる。","layout":"8または12列を25%単位で分け、短い見出しを左、長い内容を右へ置く。セクション上端に罫を引く。","material":"白場と濃色文字を基礎に、橙または茄子色をリンク、焦点、ブランドの節へだけ使う。"},"avoid":"Ubuntu書体を使うだけではVanillaにならない。25%単位の分割とセクション間の読みのリズムまで一貫させる。","colors":["#FFFFFF","#E95420","#2C001E"],"motif":"ui","pair":["mozilla-protocol","github-primer"],"study":["Vanilla brochure layouts","Ubuntu variable type scale","Canonical application layout"],"en":{"essence":"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.","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"],"works":["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"],"recipe":{"type":"Use Ubuntu Variable with light display headings and bold small headings and UI labels.","layout":"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."},"avoid":"Ubuntu type alone does not make Vanilla. Keep the quarter-based splits and the reading rhythm between sections consistent too.","study":["Vanilla brochure layouts","Ubuntu variable type scale","Canonical application layout"]},"usage":{"license":"CC-BY-4.0","licenseName":"Creative Commons Attribution 4.0 International","licenseUrl":"https://creativecommons.org/licenses/by/4.0/","attribution":"IndexStyle — https://indexstyle.org","attributionUrl":"https://indexstyle.org","scope":"Original IndexStyle text and structured data. Reference images, quoted works, and third-party material are excluded and retain their own rights."}}