{"id":"firefox-photon","no":569,"name":"Firefox Photon","ja":"Firefox Photon","era":"2017–2021 / legacy","family":"プラットフォームの画面言語","kind":"スタイル","collection":"Dictionary expansion 30","addedAt":"2026-08-22","source":{"title":"Mozilla Firefox — Photon Design System","url":"https://photon.design.firefox.com/"},"reference":{"status":"verified","pageUrl":"https://photon.design.firefox.com/","credit":"Mozilla Firefox — Photon Design System"},"essence":"Firefox Quantumと同時に導入され、デスクトップからモバイルまでFirefoxらしい速度感と識別性を揃えた画面言語。四角く締まったブラウザクローム、鮮色、軽い図像、内容を邪魔しない動きを一つの系へまとめた。","cues":["角を抑えたタブとコンパクトなブラウザクローム","白または濃紺の面に青・紫・橙の鮮色","細く単純化した線形アイコン","短く速い遷移と明確な選択・焦点状態"],"intents":["技術","未来","高揚"],"works":["ブラウザ本体、設定、アドオン、モバイルを同じFirefoxの体験へ揃えるとき","ウェブ内容より前へ出ず、操作の速さと現在状態を強く示すツール画面"],"recipe":{"type":"システムに馴染むサンセリフと短いラベルを使い、アイコンと文字を重ねて説明しすぎない。","layout":"ブラウザクロームを薄く保ち、内容面と設定面では一列の読み順を優先する。","material":"中立面を基礎に、青・紫・橙を選択、焦点、ブランドの節へ限定する。"},"avoid":"Firefoxのグラデーションを足すだけではPhotonではない。ページ内容を主役に残す密度と、操作の即時性まで合わせる。","colors":["#FFFFFF","#0060DF","#20123A"],"motif":"ui","pair":["aqua","fluent-design"],"study":["Firefox Quantum and Photon","Photon design for scale","Photon icons and browser chrome"],"en":{"essence":"Introduced with Firefox Quantum, Photon unified desktop and mobile around a fast, recognisable Firefox language of compact browser chrome, vivid color, light icons and motion that stays behind the web content.","cues":["Compact browser chrome and squared-off tabs","Vivid blue, purple and orange on white or deep navy","Thin simplified line icons","Brief transitions and unmistakable selection or focus"],"works":["Unifying browser chrome, settings, add-ons and mobile","Tools that must show speed and state without overpowering web content"],"recipe":{"type":"Use a platform-friendly sans and brief labels; do not explain every icon twice with text.","layout":"Keep browser chrome shallow and favor a single reading column in content and settings surfaces.","material":"Start from neutral surfaces and reserve blue, purple and orange for selection, focus and brand moments."},"avoid":"A Firefox gradient alone is not Photon. Match the density that leaves content dominant and the immediacy of every control state.","study":["Firefox Quantum and Photon","Photon design for scale","Photon icons and browser chrome"]},"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."}}