Mozilla Open Design

branding without walls
Categories: General

Firefox: The Evolution Of A Brand

139 responses

Consider the fox. It’s known for being quick, clever, and untamed — attributes easily applied to its mythical cousin, the “Firefox” of browser fame. Well, Firefox has another trait not found in earthly foxes: stretchiness. (Just look how it circumnavigates the globe.) That fabled flexibility now enables Firefox to adapt once again to a changing environment.

The “Firefox” you’ve always known as a browser is stretching to cover a family of products and services united by putting you and your privacy first. Firefox is a browser AND an encrypted service to send huge files. It’s an easy way to protect your passwords on every device AND an early warning if your email has been part of a data breach. Safe, private, eye-opening. That’s just the beginning of the new Firefox family.

Now Firefox has a new look to support its evolving product line. Today we’re introducing the Firefox parent brand — an icon representing the entire family of products. When you see it, it’s your invitation to join Firefox and gain access to everything we have to offer. That includes the famous Firefox Browser icon  for desktop and mobile, and even that icon is getting an update to be rolled out this fall.

Here’s a peek behind the curtain of how the new brand look was born:

Design beyond identity.

This update is about more than logos. The Firefox design system includes everything we need to make product and web experiences today and long into the future.

  • A new color palette that expands the range of possibilities and makes distinctive gradients possible.

  • A new shape system derived from the geometry of the product logos that makes beautiful background patterns, spot illustrations, motion graphics and pictograms.

  • A modern typeface for product marks with a rounded feel that echoes our icons.

  • An emphasis on accessible color and type standards to make the brand open to everyone. Button colors signal common actions within products and web experiences.

Meaning beyond design.

Privacy is woven into every Firefox brand experience. With each release, our products will continue to add features that protect you and alert you to risks. Unlike Big Tech companies that claim to offer privacy but still use you and your data, with us you know where you stand. Everything Firefox is backed by our Personal Data Promise: Take Less, Keep It Safe, No Secrets.

The brand system is built on four pillars, present in everything we make and do:

Radical. It’s a radical act to be optimistic about the future of the internet. It’s a radical act to serve others before ourselves. We disrupt the status quo because it’s the right thing to do.

Kind. We want what’s best for the internet and for the world. So we lead by example. Build better products. Start conversations, Partner, collaborate, educate and inform. Our empathy extends to everybody.

Open. Open-minded. Open-hearted. Open source. An open book. We make transparency and a global perspective integral to our brand, speaking many languages and striving to reflect all vantage points.

Opinionated. Our products prove that we are driven by strong convictions. Now we’re giving voice to our point of view. While others can speak only to settings, we ground everything in our ethos.

The end of the beginning

The Firefox brand exploration began more than 18 months ago, and along the way we tapped into many talents. Michael Johnson of Johnson Banks provided early inspiration while working on the Mozilla brand identity. Jon Hicks, the designer behind the original Firefox browser logo, was full of breathtaking design and wise advice. Michael Chu of Ramotion was the driving force behind the new parent brand and system icons.

We worked across internal brand, marketing, and product teams to reach a consistent brand system for our users. Three members of our cross-org team have since moved on to new adventures: Madhava Enros, Yuliya Gorlovetsky, and Vince Joy. Along with Mozilla team members Liza Ruzer, Stephen Horlander, Natalie Linden, and Sean Martell, they formed the core working team.

Finally, we’re grateful to everyone who has commented on this blog with your passionate opinions, critiques, words of encouragement, and unique points of view.

Tell us. We can take it.

As a living brand, Firefox will never be done. It will continue to evolve as we change and the world changes around us. We have to stretch our brand guidelines even further in the months ahead, so we’re interested in hearing your reaction to what we’ve done so far. Feel free to let us know in the comments below. Thanks for being with us on this journey, and please stay tuned for more.

139 comments on “Firefox: The Evolution Of A Brand”

  1. Rui Morim Silva wrote on

    Hi, after some discussion about your new firefox logo, I felt this urgency in speaking my mind so here you have:

    1 – The logo is great, especially that one only with the tail . The tail is the most memorable characteristic of the fox, people get it, they don’t need the face or body to know that is a fox, people are clever, they like understanding stuff.

    2 – The product icons don’t belong to same family of the firefox, simple as that. They relied too much on the colors to do that jump back to the main logo. The icons miss the “speed” of the firefox. Probably you should be looking for some sharpness, adding 1 or 2 sharp details would work better (it’s not a straight away solution, it takes time to find the right balance but definitely it’s a way to go)

    Hope somebody read this, it’s just my personal opinion, still I am enjoying the debate.

  2. Anonim wrote on

    I don’t like the fox looking to the side, on the actual logo is like looking inside; also the feet is gone :(. The tail is beautiful as always

  3. Jacob wrote on

    Strangely enough, I love change- Its exciting and fresh. I cannot wait for this logo. The more modern design and new colours are amazing.
    When can we get the new Logo?

  4. jackson wrote on

    just a personal opinion, but the icon/logo used for Firefox Send looks a bit like an umbrella, which makes me think it’s some kind of 360-protection-app (firewall, anti-virus etc etc) and doesn’t really covey the idea that I’m sending something (the down arrow also seems to indicate I’m downloading).

    Just my 2 cents, not a designer!

  5. Lucas wrote on

    Loving what you have done and the work that you’ve taken to get there. Really appreciate and love the actual Firefox Browser logo update.

    (I’ve came over from the post found on Brand New / Under Consideration and I’m also using the Firefox browser now for a year and haven’t gone back to Chrome since – so kudos!)

    I’m just expressing my view on this as if I’m the only one that is unaware … but I guess I thought that Firefox itself was just the browser that Mozilla created (not a slew of other things too). Yet, the way that you’re approaching it now, it makes it look as if it’s just a program in a suite of programs much like Adobe with Photoshop, Illustrator, InDesign etc. Which, from my stance, seems like an unnecessary step. To have a suite of applications called ‘Firefox’ and then to branch from that and have another application off that called ‘Firefox Browser’ and so forth … when they’re all contained under the Mozilla brand seems like too much of a brand stretch.

    I guess ultimately what I’m trying to convey here is that the hierarchy seems odd. Mozilla > Firefox > Firefox Browser etc. … wouldn’t you want to have it more like (Mozilla > Firefox) & (Mozilla > Lockwise) & (Mozilla > Monitor) and so forth? Since you’ve taken the time to develop marks for each application … but rather than brand them under Mozilla you’ve branded them under Firefox – which is truly known as the browser itself.

    It was just a thought – and in no way is any reflection of me being disappointed with what you’ve produced. Kudos to the entire team for the effort that has gone into this. I will continue being an avid fan and can’t wait to see what you do next!

  6. rotane wrote on

    On the one hand, i really like this. On the other, i’m rather confused: Why do we need a Master Firefox logo, when we (as in “everybody”) finally understood that Firefox is part of Mozilla, and now we have to understand that Firefox Browser is part of Firefox that is part of Mozilla. What is Send and Monitor and Lockwise anyway? Nobody cares about that, so there’s no need to incporporate them (weirdly*, i might add) into the Firefox brand. Again, why is this needed at all?

    Having said that, i love the master icon, but i hate the Firefox Browser icon. The latter has no energy at all (other than the colours, which i think are great), the weird bend under its neck really kills it. I don’t mind that the paw is missing; but not having it makes the proportions of the fox’s head vs its body suddenly feel off. The master logo doesn’t have this problem, since it’s much more abstract.

    I think, if you’re going to change the Firefox Quantum icon again (and so soon), i would rather see the master icon instead of the new browser icon in my Firefox browser…

    * I say weirdly, because while they do share the same colour pallette, the shapes themselves are radically different. They could just as well be part of Instagram or iTunes or any other brand that has rainbow gradients as part of their design language.

  7. Miss_R wrote on

    I am a graphic designer and Firefox is one of my favorite brands, in all of its branding senses. I feel like I have a relationship with it, and that it’s a company I can trust. I follow the advices I get from your newsletters and learn a lot from them. I’ve become a privacy advocate thanks to you, and often recommend that friends and family subscribe to the Mozilla newsletter.

    With that said, I really loved the new identity, and am always happy when a brand takes the care you did to move on. Everything looks beautiful and harmonious. While watching the video, I got a warm feeling in my heart, and felt like the new system was a good place to live in. To me, that’s success. Please extend my congratulations and standing ovation to all involved in this great work. And thank you for everything that you to for the web and for us, users.

  8. PrairieRanger wrote on

    I can understand why you want to make a whole new set of logos for the Firefox brand, but why change the Firefox logo that everybody has come to know and to love? Wasn’t the whole redesign of the Mozilla brand to combat this very issue? After all, it is known as Mozilla Firefox, not Firefox Firefox Browser or Firefox Browser. It kinda leaves the whole Mozilla name in the dark. :\

    I would suggest maybe basing the other logos off of the current Firefox logo, perhaps with your new color scheme instead. Don’t get me wrong, most of them except for the new Firefox logo are quite nice, albeit rather generic. This new main logo doesn’t really stand out from the crowd and looks like the Opera logo compared to the Firefox or Mozilla logo. The logos for send, monitor, and lockwise are nice but do not stand out as much as the current Firefox logo does, as they lack a bit of depth to them and have a lot of empty space in the middle compared to the Firefox logo.

    I hope you reconsider your decision and instead just focus on continuing to give us the best experiences possible on the internet and in your other new projects as well. ;)

More comments: 1 2 3