Aqua vs Firefox Photon
アクア / Firefox Photon
Aqua comes from Apple UI and Firefox Photon from Platform Screen Languages. They are reached for with some of the same intent, which is where they get confused.
Aqua
Mac OS X's design language of buttons you want to lick. Jelly gloss, pinstripes, deep shadows and the genie effect staged digital components as objects you could touch, and set the terms for UI throughout the 2000s. What the web made of it with images is Web 2.0 Gloss.
Firefox Photon
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.
| Aqua | Firefox Photon | |
|---|---|---|
| Era | 2000–2014 | 2017–2021 / legacy |
| Family | Apple UI | Platform Screen Languages |
| Kind | Style | Style |
| Cues | Gel-gloss buttons / Pinstriped grounds / Deep drop shadows / Metaphors of water and light | 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 |
| Best used for | Recreating 2000s digital culture with the texture it actually had · Making what is clickable read at once as a pressable object | Unifying browser chrome, settings, add-ons and mobile · Tools that must show speed and state without overpowering web content |
| Type | No shadow on text, weighted to stay legible over gloss | Use a platform-friendly sans and brief labels; do not explain every icon twice with text. |
| Composition | Components evenly spaced, gaps left for shadows to fall into | Keep browser chrome shallow and favor a single reading column in content and settings surfaces. |
| Material | A hard white highlight above, reflection and deep shadow below | Start from neutral surfaces and reserve blue, purple and orange for selection, focus and brand moments. |
| Caution | Gloss and shadow applied evenly to every component hides what is actually pressable, leaving texture where hierarchy should be. | A Firefox gradient alone is not Photon. Match the density that leaves content dominant and the immediacy of every control state. |