Firefox

A brand for the browser that still answers to its users

Built by Mozilla, a nonprofit championing open standards and user privacy since the early internet, Firefox was overdue for a moment. With other major browsers increasingly entrenched in dark patterns and locked ecosystems, internet users need Firefox more than ever. Mozilla made the decision to reinvest in Firefox as a product, enlisting Jones Knowles Ritchie to develop a new brand concept and Upstatement to make it real by adapting the brand for the digital world, building a full design system for Firefox.com, and establishing the identity ruleset that gives the Firefox team what they need to move forward on their own.

What We Did

  • Brand guidelines
  • Design system
  • Website strategy and copywriting

What We Made

A web browser window displays the Firefox homepage with a colorful orange, yellow, and pink abstract flame design filling most of the screen. The address bar shows "www.firefox.com.
Four icons: a white mask on a purple oval, "Aa Semibold" in white on a purple square, an orange cartoon fox, and a purple shield on a light background.

The brief: a brand ready for the digital world

Mozilla's "Reclaim the Internet" platform, developed with JKR, gave Firefox a rallying cry and a mission. Firefox is free and open source, it was built by a nonprofit, and it helped make open web standards what they are. At a moment when browsers are increasingly profit-oriented and hungry for users' data, that story really matters. Our job was to make sure their mission's narrative came through at every touchpoint online.

Screenshot of the Firefox homepage showing a purple background, a stylized fox, and large text: "This is the internet, on your terms." Four cards below highlight AI chat, privacy, organization, and browser independence features.

From concept to system

JKR's work provided a foundation, including a conceptual direction, a visual identity, and a set of brand values. We came in with a translation mindset. Brand work developed for print and campaign contexts doesn't automatically function on the web. Colors that look right in a deck can fail accessibility standards in a UI, type that works on a poster can become unreadable in a navigation bar, and small but rich opportunities for digital brand expression can be missed in a big-picture marketing concept. We refined the palette for digital use, then built a full design system for firefox.com that puts the identity to work across components, layouts, and content.

A five-panel graphic featuring a fox mascot and colorful backgrounds explains Firefox’s Enhanced Tracking Protection, how it blocks trackers, and shows a browser with security icon instructions.

Rules, not just guidelines

Part of what makes a design system durable is knowing what it's for, not just what it looks like. We developed a brand identity rule system that documents not only how elements should be used, but why, so that Mozilla's internal teams can apply them consistently over time without a design agency in the room. The goal was to give Firefox the tools to grow the brand on its own terms over time.

A promotional graphic for Firefox shows a fox with a long, flowing tail, browser windows, and text about productivity, simplicity, and control online, with buttons labeled "Learn more." The design uses bright, pastel colors and minimal illustrations.

Reception

The rebrand has won industry awards and landed well with Firefox's famously opinionated user base. This is a community that remembers the old fox logo, has opinions about kerning, and isn't shy about speaking up. Getting a warm reception from the Firefox subreddit is validating (and a relief).

A person lies on the floor wearing a white T-shirt with a flame graphic and the text "No one on your tail." Below are images of a hand holding a smartphone displaying a browser app and text reading "Control your corner of the internet.

Up Next: