{"id":"mozilla-protocol","no":560,"name":"Mozilla Protocol","ja":"Mozilla Protocol","era":"2017–","family":"プラットフォームの画面言語","kind":"スタイル","collection":"Dictionary expansion 29","addedAt":"2026-08-22","source":{"title":"Mozilla Protocol — Design Principles","url":"https://protocol.mozilla.org/docs/fundamentals/principles.html"},"reference":{"status":"verified","pageUrl":"https://protocol.mozilla.org/docs/fundamentals/principles.html","credit":"Mozilla Protocol — Design Principles"},"essence":"MozillaとFirefoxのウェブサイトを、meaningful、flexible、accessible、global、usefulという原則と、コード化された部品で結ぶデザインシステム。内容を装飾より前へ置き、翻訳や端末差を受け止める。","cues":["黒い見出しと広い白場","鮮色の大きな面とFirefoxのグラデーション","柔軟に伸びるbillboardとcard","太い見出し、短い本文、明確なCTA"],"intents":["技術","信頼","高揚"],"works":["オープンウェブ製品の説明を世界の言語と端末へ展開するとき","ブランドの鮮やかさを保ちながら内容とアクセシビリティを優先するとき"],"recipe":{"type":"短い太字見出しと読みやすい本文を使い、翻訳で長くなる余地を残す。","layout":"大きな一メッセージの面と、再利用できるカード群を明確に分ける。","material":"白黒を基礎に、紫・橙・青のグラデーションを焦点へ限定する。"},"avoid":"Firefoxのグラデーションを全面へ広げると内容が負ける。色は意味と焦点を補強する場所だけに置く。","colors":["#FFFFFF","#7542E5","#20123A"],"motif":"ui","pair":["web-one","github-primer"],"study":["Protocolの五原則","global localization","HTML/CSS中心のpattern library"],"en":{"essence":"Mozilla's flexible web system puts content and global accessibility ahead of decoration while retaining a vivid open-web personality.","cues":["Bold black headings and broad white space","Large fields of vivid color","Flexible billboards and cards","Short copy and explicit calls to action"],"works":["Open-web product marketing across languages","Balancing bright brand expression with accessible content"],"recipe":{"type":"Use short heavy headings, readable body text and room for translation expansion.","layout":"Separate one-message billboards from reusable card groups.","material":"Ground the page in black and white, reserving gradients for a single focal area."},"avoid":"Spreading the Firefox gradient everywhere buries the content. Color should reinforce meaning and focus.","study":["Protocol's five principles","Global localization","HTML/CSS pattern library"]},"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."}}