# Firefox Proton (Firefox Proton)

> The Firefox 89 redesign made the browser brighter and calmer by streamlining toolbars and menus and adopting floating rounded tabs, lighter iconography, more spacing and a purple-inflected palette across desktop, iOS and Android.

- IndexStyle No.572 — https://indexstyle.org/styles/firefox-proton
- Kind: Style · Family: Platform Screen Languages · Era: 2021–2026
- Mood: Calm, Intimacy, Technique
- 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

- A rounded active tab floating above the toolbar
- Text-led menus with fewer redundant icons
- Generous spacing and light linear iconography
- Neutral browser chrome with purple and blue selection states

## Best used for

- Unifying browser toolbars, tabs, menus and alerts into a calm language that recedes behind content
- Aligning the words and icons of core actions across desktop, iOS and Android

## Composition recipe

- Typography & lettering: Reduce labels to short verbs and nouns; remove redundant icons so wording carries the hierarchy.
- Layout & structure: Keep the toolbar light, float only the active tab as a rounded independent surface and order menu actions by priority in one column.
- Material & texture: Build on neutral light surfaces and open spacing; reserve purple and blue for focus and selection and shadows for the floating tab.

## Colour

Read off the reference works below, so a direction rather than a fixed palette.

- Ground: #FBFBFE
- The colour it is remembered by: #9059FF
- Text and outlines: #2B2A33

## What to avoid

More rounding and whitespace alone only lowers information density. Make every removed icon legible through wording and order.

## Application checklist

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

- [ ] Visible in the piece: A rounded active tab floating above the toolbar
- [ ] Visible in the piece: Text-led menus with fewer redundant icons
- [ ] Visible in the piece: Generous spacing and light linear iconography
- [ ] Visible in the piece: Neutral browser chrome with purple and blue selection states
- [ ] The layout follows: Keep the toolbar light, float only the active tab as a rounded independent surface and order menu actions by priority in one column.
- [ ] The lettering follows: Reduce labels to short verbs and nouns; remove redundant icons so wording carries the hierarchy.
- [ ] The material and surface follow: Build on neutral light surfaces and open spacing; reserve purple and blue for focus and selection and shadows for the floating tab.
- [ ] The colour relation holds: #FBFBFE as ground, #9059FF carrying the style, #2B2A33 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

- **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. → https://indexstyle.org/styles/firefox-photon
- **Material You (Material You)** — Material You makes adaptability itself consistent: dynamic color, generous shapes and personalized motion vary by person while semantic roles stay stable. → https://indexstyle.org/styles/material-you

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

## Further study

- Firefox 89 redesign
- Floating tab model
- Cross-platform iconography and menu simplification

## Reference works

- Mozilla — A fresh new Firefox is here — https://blog.mozilla.org/en/firefox/fresh-new-look-for-firefox/

## AI interpretation

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

## Source of record

- Mozilla — A fresh new Firefox is here — https://blog.mozilla.org/en/firefox/fresh-new-look-for-firefox/

## Machine surfaces

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