Open-source browser maker and internet advocacy organization
Mozilla brand guidelines, annotated
Mozilla’s brand guide gives color as proportions, line spacing for every text size and a date on every page. Its best rules quoted with notes, with its gaps.
Mozilla makes the Firefox browser. It publishes its brand guidelines as a brand portal on Frontify, and each page shows when it last changed. The guide covers the brand promise, voice, words, logo, color, typography, photography, and icons. People can download the logos, the color swatches, and its open source fonts. It is very exact about proportions: how much of each color, and how much line spacing at each size.
Best parts, quoted with notes
Positioning and messaging
Our brand promise can be used in external materials, but it works most effectively as a sign off “Reclaim the internet with us”
Has: exact value, where it applies. Gives the exact sign-off line and says where it works best.
Logo
Maintain adequate space around the lockup using “x” as your guide — where “x” equals the height of the lowercase “z” in Mozilla. For sizes 48px and smaller, use our specially optimized small-scale version.
Has: exact value, where it applies. Clear space is measured from a letter in the wordmark, with a separate version for small sizes.
Color
Use mostly Black and White, with a pop of Green (approximately 45% Black, 45% White and 10% Green)
Has: exact value. Gives proportions as percentages, not only a list of colors.
Typography
Line spacing: XL headlines and headlines (90%), subheads (110%), body (125%), small body (140%)
Has: exact value. Line spacing as a percentage for each level of text.
Photography and imagery
Optimistic: Images depicting positive interactions between people and tech. People don’t necessarily have to be smiling, but body language should indicate ease, familiarity or camaraderie, regardless if it's one person or a small group being shown.
Has: where it applies. Says what the trait does not require as well as what it does.
Icons and illustration
New icons should be designed on a 16×16 grid, using a 1.5pt stroke. This ensures scalability across different sizes and resolutions.
Has: exact value, reason. Grid size and stroke weight, with the reason for both.
Voice and tone
We may use humor to capture attention and aid understanding, but we never punch down.
Has: where it applies, reason. Says what humor is for, and sets a clear limit on who it can target.
Words and style
Use “internet” instead of “web” (and no need to capitalize “internet”)
Has: exact value. A single word swap with the capitalisation settled too, easy for a person or tool to check.
What it leaves out
- The guide needs JavaScript: a plain fetch of brand.mozilla.com returns only the title "Mozilla Brand", so a tool without a browser sees none of the rules. Source
- The templates are not open to outsiders: the slide and letterhead templates open from a Mozilla Google account, and stock photos need Mozilla SSO. Source
What to take from it
- Give color as proportions, and not only as a list of swatches.
- Put a “last modified” date on every page, as the Mozilla portal does.
- Make sure that the rules are in the HTML that the server sends. Many tools cannot see a guide that needs JavaScript to show its text. Some AI agents read pages without a browser.