# Firefox Photon (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.

- IndexStyle No.569 — https://indexstyle.org/styles/firefox-photon
- Kind: Style · Family: Platform Screen Languages · Era: 2017–2021 / legacy
- Mood: Technique, Futurity, Exhilaration
- 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

- 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

- Unifying browser chrome, settings, add-ons and mobile
- Tools that must show speed and state without overpowering web content

## Composition recipe

- Typography & lettering: Use a platform-friendly sans and brief labels; do not explain every icon twice with text.
- Layout & structure: Keep browser chrome shallow and favor a single reading column in content and settings surfaces.
- Material & texture: Start from neutral surfaces and reserve blue, purple and orange for selection, 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: #0060DF
- Text and outlines: #20123A

## What to avoid

A Firefox gradient alone is not Photon. Match the density that leaves content dominant and the immediacy of every control state.

## Application checklist

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

- [ ] Visible in the piece: Compact browser chrome and squared-off tabs
- [ ] Visible in the piece: Vivid blue, purple and orange on white or deep navy
- [ ] Visible in the piece: Thin simplified line icons
- [ ] Visible in the piece: Brief transitions and unmistakable selection or focus
- [ ] The layout follows: Keep browser chrome shallow and favor a single reading column in content and settings surfaces.
- [ ] The lettering follows: Use a platform-friendly sans and brief labels; do not explain every icon twice with text.
- [ ] The material and surface follow: Start from neutral surfaces and reserve blue, purple and orange for selection, focus and brand moments.
- [ ] The colour relation holds: #FFFFFF as ground, #0060DF carrying the style, #20123A 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

- **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. → https://indexstyle.org/styles/aqua
- **Fluent 2 (フルーエント2)** — Tokenizes color, type, spacing, radius and depth, deploying Solid, Acrylic, Mica and Smoke materials by role across Microsoft products. → https://indexstyle.org/styles/fluent-design

## 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=firefox-photon+aqua

## Further study

- Firefox Quantum and Photon
- Photon design for scale
- Photon icons and browser chrome

## Reference works

- Mozilla Firefox — Photon Design System — https://photon.design.firefox.com/

## AI interpretation

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

## Source of record

- Mozilla Firefox — Photon Design System — https://photon.design.firefox.com/

## Machine surfaces

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