Control
You control your internet, data and AI. Our reading
The system
Fixed, everywhere
- The wordmark and flag symbol
- Strong black and white type with a green pop
- Mozilla Headline and Mozilla Text
- The pixel grid
The one thing that varies
The Governments-to-Grassroots spectrum: the same parts run from restrained (mostly black, white and green) to loud (60% color, multi-pop, fearless motion), chosen by audience.
Source: brand.mozilla.com/document/241brand.mozilla.com/document/231
Color, in proportion
Published ratio for primary (Governments) work. Grassroots pieces flip it: 20% black, 20% white, 60% color..
Tone by the reader's state
- Grassroots: community, events, podcasts
- Governments: policy, advocacy, professional
One voice on a two-ended spectrum. Mozilla publishes the two ends; the levels are our reading of them.
How loud each format gets
SilentError message
QuietLanding pageProposal pageEmail
CalmDeck
WarmAd
Loud
LoudestSocial post
Our engine's setting, built from their rules.
Every piece passes two checks
Logo hidden
Cover the logo. It should still read as Mozilla: mostly black and white, one green pop, a huge left-aligned Headline, and a pixel edge somewhere.
Swap test
Put another nonprofit's logo on it. If the pixel grid, the giveaway type and the no-bullsh*t line don't feel out of place, it's generic, and it goes back.
Strategy
Mozilla is the people’s platform, where everyone can control their internet. Published
Open
Open source and an open, public-resource internet. Our reading
Independent / not for profit
Not big tech, not extracting from people. Our reading
Together
Reclaiming is collective, not something Mozilla does for you. Published
Welcome to Mozilla
Love the internet again
Break free from big tech
Get wild at Mozilla Festival
Full spec
- For Published
- Four key audiences: Developers, Users, Policymakers, Communities.
- Problem Observed
- Power over the internet, and now AI, is consolidating in big tech; people have lost control of their data and experience (paraphrase of mozilla.org homepage and State of Mozilla copy, which names Big AI companies consolidating power).
- Promise Published
- Put control of the internet back in the hands of the people using it, and invite them to reclaim it together, keeping it easy, safe and free (paraphrase).
- Mission Published
- Our mission is to ensure the internet is a global public resource, open and accessible for all. (Opening sentence quoted from the guide's Mission block; the guide goes on to describe an internet where people shape their own experience and are empowered, safe and independent.)
Proof behind each pillar
- Control. Firefox has built-in tracking protections and open source code anyone can see (paraphrase).
- Control. Firefox lets you decide if AI features appear and how they behave (paraphrase).
- Open. Mozilla Manifesto (2007, 10 principles) plus Pledge for a Healthy Internet (2017).
- Open. Open Source AI Is Winning: inaugural annual survey/report; cross-portfolio open source AI strategy ('owners, not renters').
- Independent / not for profit. Community working together since 1998.
- Independent / not for profit. A new nonprofit created to steward Mozilla for the long term (About page tile).
- Together. Mozilla Festival, Barcelona, Oct. 28–30 (2026), eight tracks.
- Together. Global community of volunteers, fellows and contributors; Foundation homepage spotlights named community members.
Story Published
a global community working together since 1998 so the internet benefits everyone, best known for creating Firefox. The 2007 Manifesto (10 principles) and the 2017 Pledge for a Healthy Internet (4 commitments) guide what Mozilla builds and funds and how its community works. Today the Mozilla Project spans the Foundation, Mozilla Corporation (Firefox), MZLA (Thunderbird), Mozilla Ventures, Mozilla.ai and Mozilla Data Collective.
Values
Internet as a public resource
Manifesto principle 2: the internet must remain open and accessible (paraphrase).
PublishedSecurity and privacy are fundamental
Principle 4: privacy and security must not be treated as optional (paraphrase).
PublishedIndividual agency
Principle 5: people must be able to shape the internet and their own experience of it (paraphrase).
PublishedFree and open source software
Principle 7: open source promotes the internet as a public resource (paraphrase).
PublishedTransparent community process
Principle 8: community-based processes build participation, accountability and trust (paraphrase).
PublishedBalance profit with public benefit
Principle 9: commercial involvement is welcome, but must be balanced with public benefit (paraphrase).
PublishedAn inclusive, civil internet
2017 Pledge commitments: an internet for all peoples that promotes civil discourse, critical thinking and collaboration (paraphrase).
PublishedCategory. Nonprofit-led family of organizations: an activist organization that builds products, funds and advocates for a better internet (paraphrase of the brand promise). Published
Why them
- Nonprofit ownership and independence: a new nonprofit stewards Mozilla for the long term; Firefox described as always independent, unlike big tech. Observed
- Advocates, builds and funds: policy voice + products + philanthropic and venture capital under one name. Published
- Open source by default, including open-source AI tools. Observed
- Users choose whether AI features appear in Firefox. Observed
Instead of
Big tech platforms and browsers (named generically as 'big tech' / 'Big AI companies'; Mozilla does not name competitors on these pages).
Boilerplate Published
The Mozilla Project is a global community, working together since 1998, that believes openness, innovation and opportunity keep the internet healthy. Its organizations include the Mozilla Foundation, Mozilla Corporation (Firefox), MZLA (Thunderbird), Mozilla Ventures, Mozilla.ai and Mozilla Data Collective.
Taglines
Reclaim the internet with us Published
Internet for people, not profit Observed
Guard the Open Internet Observed
Now more than ever: come back to Firefox. Observed
They never claim
- Mozilla doesn't claim to reclaim the internet for people; the guide frames it as something everyone does together. Published
- Avoid buzzwords, hype and technical jargon; explain essential technical terms. Published
- Humor never punches down; nothing crass, sarcastic or mean. Published
- Lead with tangible impact, not intellectual grandstanding. Published
- Say 'internet', not 'web' (lowercase internet). Published
- No hard numbers for impact stats on the Foundation homepage were readable in this check; don't quote counts without a source. Observed
More real lines
Explore issues shaping the future of the internet
Open Source AI Is Winning
AI for the people
Owners, Not Renters
You, AI and the internet — what’s really going on?
Guard the Open Internet
Together, we can keep the internet easy, safe and free — for everyone.
Be a force for good technology.
Mozilla states a promise, a positioning line, a mission and the 2007 Manifesto. The promise works best as a sign-off: "Reclaim the internet with us". Reclaiming is framed as something people do together, not something Mozilla does for them.
Source: brand.mozilla.com/document/240brand.mozilla.com/document/241
Personality and voice
PassionateActivist techies talking to everyday people with infectious, relatable energy (paraphrase).Published
WelcomingWarm; technology in human terms; humor allowed but 'we never punch down'.Published
No Bullsh*t"We don’t sugarcoat the truth." Tell it like it is, in language people understand.Published
FearlessPersonality: unconventional, takes on hard topics (paraphrase).Published
OptimisticPersonality: never stops pushing for better; challenges the status quo (paraphrase).Published
InsightfulPersonality: connects the dots; deliberate, clear and considerate (paraphrase).Published
We don't sell your data. Here's how we make money.
Leveraging privacy-first synergies to empower stakeholders.
One spectrum instead of many tones: a policy brief and a festival poster are the same voice at two settings.
Full spec
- Sentence case headlines
- Plain language; avoid jargon
- Spell out acronyms and initialisms at first use
- Start and end with real, tangible impact, not intellectual grandstanding
- Cut to the chase; say what needs saying without fluff
- Keep phrases and concepts easy to translate
- Use the brand promise as a sign-off: Reclaim the internet with us
- Say “internet”, not “web”
- Use contractions
- No Oxford comma unless it prevents confusion
- Dates as YYYY-MM-DD in data, documents and reports; on web pages and event copy write them as the site does, "Oct. 28–30" (abbreviated month with a period, en dash ranges)
- American spelling
- Sentence case for calls to action and buttons too
- On web pages, invitation and reassurance outweigh opposition: at most one oppositional line per section, and the hero welcomes rather than attacks
PassionateWelcomingNo bullsh*t
Voice is passionate, welcoming and no bullsh*t; personality is fearless, optimistic and insightful. The same voice runs from "Governments" (serious, speaks truth to power, no fluff) to "Grassroots" (expressive, storytelling, a "we" bigger than Mozilla).
- Humor may grab attention or aid understanding; it never punches down
- Plain language, no jargon, acronyms spelled out at first use
- If people don't get it, the writing failed, not the reader
- Relatable expertise with a dash of wit.
- Talk about technology in human terms so people can understand it and act.
- Humor is allowed to win attention or aid understanding, never to punch down.
- The voice moves along one spectrum: serious for governments, expressive for grassroots.
- Mozilla's "we" is bigger than Mozilla: reclaiming the internet is something everyone does together.
Source: brand.mozilla.com/document/240
Source: brand.mozilla.com/document/240brand.mozilla.com/document/241
Logo
Logos shown from Brandfetch for reference. Mozilla is a trademark of the Mozilla Foundation. Not affiliated, and not for download.
Logo in strong white on black
Logo recolored pink
The system is the Mozilla wordmark plus the flag symbol, which reads as the M, the dino mascot's head and a rallying flag.
Full spec
The system is the Mozilla wordmark plus the flag symbol, which reads as the M, the dino mascot's head and a rallying flag. The primary lockup is the default; the wordmark alone is used sparingly, and the symbol always appears near the wordmark while it builds recognition.
- Clear space: x, the height of the lowercase z in Mozilla; the symbol takes 2x the width of the flag's pole
- Minimum size: lockup 20px high on screen (3.8mm print), wordmark 12px (2.4mm); a small-scale version at 48px and under
- On posters, slides and social, anchor the logo in a corner, top or bottom right preferred; on web pages the nav lockup sits top left (observed)
- The lockup and wordmark are strong black or white. Green is the flag symbol only: the homepage hero animation and merch (observed)
- Partner lockups: use the gap between the two l's to place the divider
- Don’t angle, distort, outline, crop or modify the logo
- Don’t typeset the logo
- Don’t recolor the lockup or wordmark (the green flag symbol is the homepage hero animation only)
- Don’t compromise contrast
- Don’t use the dino mascot as a logo
Source: brand.mozilla.com/document/231brand.mozilla.com/document/231brand.mozilla.com/document/231
Color
Get the app
Your privacy, protected
Mostly black and white
A page flooded green
When green only appears as a small pop, it always means "act here".
Full spec
When green only appears as a small pop, it always means "act here". Publishing the tested pairings removes the guesswork about contrast.
- Type is strong black or strong white; colored text is out (the website's exception: #414141 product descriptions)
- Strong black on Green scores 10.26:1; Green on Black 8.84:1
- Multi-pop: put strong black or strong white fields between colors
- The tertiary palette (Aqua, Seed, Grey, Clay) is for charts only
- Don't use color alone to carry meaning
Black and White are the foundation with pops of Green, Orange and Pink. The guide publishes the ratio: about 45% black, 45% white and 10% green for primary work, and 20% black, 20% white and 60% color for Grassroots pieces. Every pairing is published with its WCAG and APCA score. mozilla.org grounds its pages in #FFFFFF (the guide's #FAFAFA is for print, decks, tags and hover fills) and uses #161616 for dark bands, with Pink +1 and Orange +1 tint bands.
Not published: a muted text color in the guide (mozilla.org uses #414141 for product descriptions only; it is Grey -2 from the charts-only palette).
Typography
Reclaim the internet with us
Take back your internet
TAKE BACK YOUR INTERNET
Giving the brand face away is the open-web point made in type, and uniwidth means a weight change on hover never reflows a line.
Full spec
| Their face | Use | License | Open stand-in |
|---|---|---|---|
| Mozilla Headline | Headlines 24pt and up, Standard width; Condensed ExtraLight for large numbers | Open (SIL OFL); on Google Fonts since 2025-07-28 as variable fonts (Headline: wght 200-700, wdth 75-125; Text: wght 200-700) | Mozilla Headline No stand-in: the real face is on Google Fonts. Load it there, but load only the weights mozilla.org loads (see Typography calibration). |
| Mozilla Text | Body, subheads, buttons, labels | Open (SIL OFL); on Google Fonts since 2025-07-28 as variable fonts (Headline: wght 200-700, wdth 75-125; Text: wght 200-700) | Mozilla Text No stand-in: the real face is on Google Fonts. Load it there, but load only the weights mozilla.org loads (see Typography calibration). |
- XL headlines 61pt and up, headlines 24pt and up in Mozilla Headline; subheads 19–23pt, body 13–18pt, small 10–12pt in Mozilla Text
- Line spacing: headlines 90%, subheads 110%, body 125%, small 140%
- Letter spacing 0; XL headlines may go to -20 at most
- Headlines and text left-aligned, always sentence case
- No more than three weights in one layout
- Large numbers: Headline Condensed ExtraLight, -2% tracking (the homepage's year label uses Headline 600 at 48px)
- Web calibration: load Mozilla Text 400/600/700 and Headline 400/600 only, body -webkit-font-smoothing: antialiased, letter-spacing normal; set intros at 400 (the site's 500 renders as 400)
- Don’t use Mozilla Headline below 24pt
- Don’t set primary headlines in Mozilla Text
- Don’t mix Headline and Text at the same size
- Don’t stretch or distort the faces
Mozilla Headline (slab-serif roots, five weights, three widths) and Mozilla Text (six weights) share a uniwidth design: changing weight never changes line length. Both are open source. mozilla.org sets headlines at 600 with line height 1 and -1% tracking. The site loads Text only at 400, 600 and 700, with antialiased smoothing.
Iconography
UI icons are drawn from the same forms as the typefaces, on a 16×16 grid with a 1.5pt stroke, in strong black or white only.
Full spec
- Sizes step by 8px: 16, 24, 32, 40
- Clear space up to twice the icon size
- Place on even grid coordinates; 2-unit gaps, 1 in tight spots
- Center icons vertically on text; text no taller than the icon
- Don’t use UI icons as illustrations
- Don’t color icons
- Don’t add shadows, outlines, gradients or effects
Source: brand.mozilla.com/document/231
Illustration
The pixel ties illustration to the flag symbol and the band edges, so one dithered shape is recognizably Mozilla.
Full spec
- One illustration style per composition
- Hero Pixelgrams up to five colors; spot Pixelgrams up to three, no larger than 18px on the grid
- Bitmaps leave at least 50% of the form transparent
- Wireframes may be cropped, but never on more than two sides
- Green in imagery: the hero flag, one editorial cover, small news markers; nothing else
- Don’t layer illustration over photography
- Don’t put text inside a Pixelgram
- Don’t obscure headlines or crop past recognition
| Styles | Pixelgrams, Wireframes, 3D Bitmap, Bitmap: one per composition |
|---|---|
| Pixelgrams | 24×24 grid; hero up to 5 colors, spot up to 3 |
| Bitmaps | at least 50% of the form transparent |
| Wireframes | crop on at most two sides |
| Never | over photography, text inside a Pixelgram |
Published on brand.mozilla.com, 2026-10-28; examples from its illustration and press downloads.
Four styles, all built from pixels: Pixelgrams (narrative pixel art on a 24×24 grid), Wireframes (fine-line, no fill), 3D Bitmap (wireframes with a dithered pixel skin) and Bitmap (pixel-dithered symbols that nod to the early web).
Source: brand.mozilla.com/document/231
Photography
People are the main subject, using technology naturally.
Full spec
People are the main subject, using technology naturally. Each photo shows one of the three personality traits: Fearless (stages, crowds, action), Optimistic (ease with tech), Insightful (macro or over-the-shoulder, people optional). Photos are framed on the pixel grid by removing pixels from the container.
- Natural daylight, shallow depth of field, candid and documentary
- Pixel framing: a hero image loses no more than 2 pixels; each image in a set no more than 1
- The dynamic pixel-outline frame is never used on several images in one layout
- Signed releases for identifiable people
| Each photo shows | Fearless (stages, crowds, action), Optimistic (ease with tech) or Insightful (macro, over the shoulder) |
|---|---|
| Light | natural daylight; shallow depth of field |
| Style | candid and documentary |
| Frame | pixel-cut corners: a hero loses at most 2 pixels, each image in a set at most 1 |
| Never | the pixel-outline frame on several images in one layout |
| On mozilla.org | plain rectangles, square corners, no pixel cuts; 2:1 or 1:1 (observed 2026-10-29) |
| Pixel size | not published |
Published on brand.mozilla.com; examples from brand.mozilla.com and mozilla.org, 2026-10-29.
Source: brand.mozilla.com/document/231
Motion
brand animation (the flag planting, the wordmark building, illustration). Not UI hovers: those use ui-hover
every UI hover on mozilla.org: row fills and arrow nudges at 0.3s, the CTA underline wipe at 0.8s on the same curve
Fearless moments, entering
Fearless moments, leaving
Insightful moments, entering
Insightful moments, leaving
Motion acts out "reclaim": the flag plants and waves, the wordmark builds, the symbol turns into the dino and back.
Full spec
Motion acts out "reclaim": the flag plants and waves, the wordmark builds, the symbol turns into the dino and back. Each personality trait gets its own easing.
- Global curve cubic-bezier(0.68, 0, 0.12, 1), 0.8s
- Fearless in cubic-bezier(0.59, 0, 0.59, 0), 0.4s; out cubic-bezier(0, 0.66, 0.33, 1)
- Insightful in cubic-bezier(0.22, 1, 0.36, 1), 0.33s; out cubic-bezier(0.64, 0, 0.78, 0)
- Offer reduced motion; let people pause anything over 5 seconds; never flash more than 3 times a second
- The hero flag waves in square pixel steps between frames; never skew, rotate or tween its shape
Not published: the Optimistic curves (shown only as animation).
Source: brand.mozilla.com/document/231
Interface & layout
The page, band by band
White nav, 56px, sticky: black lockup left, two centered links
#161616 hero: two-line 128px headline left, regular 24px subline, underlined link, green flag animating at right Primary action
Your headline, set large and left
Stepped pixel edge: 90px strip, three broad steps (40px on phones)
White band: 80px headline, 24px regular intro, seven full-width product rows, right-aligned link
Pink +1 band: headline and copy left, 2:1 photo right, link right under the photo
Join the gathering
White band: 80px headline, two editorial tiles 680px wide with 2:1 images
#161616 report feature: headline, intro, full-width yellow bitmap artwork, year label left and link right
Read the yearly report
Orange +1 band: 80px headline, bold intro, 3x2 grid of square-image story tiles
White band: 32px heading, an editorial news table of exactly 11 compact 66px rows under 12px column labels
Buttons
Signature moves
Bands meet on a stepped, pixel edge
Bands meet on a soft gradient fade
Pixel-stepped band edges · once on the mozilla.org homepage: the bottom of the #161616 hero, biting into the #FFFFFF products band (observed 2026-10-29). Every other band meets the next on a straight edge
Read the full report
Read the full report
The call to action is an underlined headline · the end of the hero and of each section
Take back your feed
Take back your feed
Black and white, with a pop of green · every "Governments" piece
Specimens use sample copy, not Mozilla’s.
Full spec
Full-bleed bands: a white nav, a #161616 hero, then white, Pink +1, white, #161616 and Orange +1 bands. One pixel-stepped edge, under the hero. Content sits 32px from the edge on desktop and 16px on phones. Headlines are huge (128px hero, 80px sections) and left-aligned. Nothing has rounded corners, and calls to action are underlined headline links.
Measured from mozilla.org/en-US's computed styles, stylesheet rules and bounding boxes at 1440 and 390 px wide, on 2026-10-28 and 2026-10-29 (consent banner not shown in this region).
Spacing
| Measure | Desktop | Phone |
|---|---|---|
| Page margin | 32px | 16px |
| Section padding | 64px | 32px |
| Hero text width | max 912px, centered | full width |
| Card gap | 16px | 16px |
| Navigation | 56px | 56px |
Type, at size
Hero headline
Mozilla Headline · 128px (phone 48) · line 1 · tracking -1.28px · weight 600
Section headline
Mozilla Headline · 80px (phone 32) · line 1 · tracking -0.8px · weight 600
Card title
Mozilla Headline · 32px (phone 24) · line 1.1 · tracking -0.32px · weight 600
Year label
Mozilla Headline · 48px (phone 24) · line 1.25 · weight 600
Call-to-action link
Mozilla Headline · 32px (phone 18) · line 1.1 · weight 600
Hero subline
Mozilla Text · 24px (phone 18) · line 1.25 · weight 400
Section intro
Mozilla Text · 24px (phone 18) · line 1.25 · weight 400
Product name
Mozilla Text · 24px (phone 18) · line 1 · weight 600
Nav link
Mozilla Text · 18px (phone 16) · line 1.25 · weight 600
Body
Mozilla Text · 18px (phone 16) · line 1.25 · weight 400
Muted description
Mozilla Text · 18px (phone 14) · line 1.25 · weight 400
Tile description
Mozilla Text · 16px (phone 14) · line 1.25 · weight 400
Text link
Mozilla Text · 18px (phone 14) · line 1.25 · weight 600
Tag
Mozilla Text · 14px · line 1.25 · weight 700
Footer heading
Mozilla Headline · 16px (phone 14) · line 1.1 · tracking -0.16px · weight 600
Legal
Mozilla Text · 14px (phone 12) · line 1.5 · weight 400
Cards
LabelCard title, one line
One or two sentences on what this does for the reader.
LabelCard title, one line
One or two sentences on what this does for the reader.
Card: 0px corners on the surface band, 16px apart.
- Motion
- global curve cubic-bezier(0.68, 0, 0.12, 1) over 0.8s; Fearless, Optimistic and Insightful easings for bold, welcoming or deliberate moves
- Buttons
- square
Page anatomy
How Mozilla’s own landing pages are built, observed on mozilla.org/en-US, 2026-10-29. The full measurements are in spec.md.
- Navigation
- A quiet white bar: black lockup at left, two links centered, nothing else
- Hero
- A #161616 band with a two-line 128px headline, a regular-weight subline and one underlined link, and the small green flag animating in empty space at right
- Products
- The product list right under the hero: headline, intro, seven compact full-width rows, a right-aligned link to all products
- Festival split
- A shallow two-column band on Pink +1: event pitch left, a 2:1 crowd photo right
- Editorial two-up
- A headline and two wide tiles: one report, one magazine
- Report feature
- The large yellow bitmap report feature on #161616
- Story grid
- Three columns of square-image story tiles on Orange +1
- News list
- A dense editorial news table, not cards: exactly 11 compact rows under a row of small column labels
- Footer
- A #161616 footer that closes on the wordmark set nearly full width
Source: mozilla.org/en-US
In use
Reclaim the internet: the masterbrand rebrand · 2024
One promise ('reclaim') drives the symbol (a planted flag), the motion (flag plants and waves) and the sign-off, so every piece restates the mission without explaining it. Our reading
Come back to Firefox · 2026
Nostalgia lets humor carry the privacy argument, matching the guide's 'use humor to highlight problems that inspired our product solutions'. Our reading
Mozilla Festival 2026 (Barcelona) / Mozilla Builders events · 2026
Shows the spectrum working: the same faces and green go loud for community without breaking the Governments end used on policy pages. Our reading
Full spec
How our engine applies Mozilla's system to each format. This is our recipe built from their rules, not something Mozilla publishes. Level = how far toward the Grassroots end.
- Reclaim the internet: the masterbrand rebrand. Mozilla's parent-brand refresh with Jones Knowles Ritchie, built on the 'Reclaim the Internet' promise (strategy developed with DesignStudio in 2023). Introduced the flag symbol (an M with a displaced pixel that winks at the Shepard Fairey T-rex), custom slab-rooted typefaces, a black-and-white base with a green palette, and the 'Grassroots to Government' system. Announced Dec 4, 2024. blog.mozilla.org/en/mozilla/mozilla-brand-next-era-of-tech
- Come back to Firefox. Firefox win-back campaign (Oct 2026) reuniting early-internet personalities (Overly Attached Girlfriend, Dancing Matt, Annoying Orange, Numa Numa Guy) to ask what happened to the internet; pitch is privacy, independence and user choice over AI features. Created by We Believers, produced by nobodys, directed by Sunny Sixteen. CMO John Solomon quoted. blog.mozilla.org/en/firefox/come-back-to-firefox
- Mozilla Festival 2026 (Barcelona) / Mozilla Builders events. MozFest, Barcelona Oct. 28–30, promoted on mozilla.org ('Get wild at Mozilla Festival', eight tracks). Brand in Action shows Builders events: registration desk, signage, posters, zine, badges and wristbands. brand.mozilla.com/document/231
| Format | What they did | Source |
|---|---|---|
| website (mobile) | mozilla.org on a phone: 'You, AI and the internet' feed of articles and podcasts with square thumbnails on green/pink/orange tiles. | brand.mozilla.com/document/231 |
| signage | Event wayfinding: black panel, floor numerals in large grey Mozilla Headline (current floor in white), room names in Mozilla Text, thin white rules, flag symbol top right. | brand.mozilla.com/document/231 |
| event | Mozilla Builders registration desk: 'Builders' in giant white Headline on black, repeating 'Mozilla' type wall, green panel; speaker on stage; plenary in an auditorium. | brand.mozilla.com/document/231 |
| website | Mozilla Builders, Mozilla AI and Mozilla New Products websites (listed by alt text). | brand.mozilla.com/document/231 |
| Builders zine 'Codebase' on full green with pixel dino and 3D bitmap illustration; Builders event poster with all-caps green type over photography. | brand.mozilla.com/document/231 | |
| merch | Black sweatshirt with the wordmark in green; water bottle; MozWeek Dublin thermos; badge and lanyard; wristbands; neon mascot. | brand.mozilla.com/document/231 |
| social | Social posts about AI and about open source (listed by alt text; images lazy-loaded, not inspected). | brand.mozilla.com/document/231 |
| deck | Stage presentation: black backdrop, oversized white type, portraits on color blocks, flag top left; slide collage on D&I, Trustworthy AI, Sustainability with green accents. | blog.mozilla.org/en/mozilla/mozilla-brand-next-era-of-tech |
| product identity | New Products Toolkit: Figma kit for exploration-stage product identities (examples: fictional 'T Rex', 0DIN). | brand.mozilla.com/document/231 |
Our setting for each format
| Format | Loudness | Must appear | What varies |
|---|---|---|---|
| Deck | Black and white slides, left-aligned Headline, green only on the ask | one illustration style for the whole deck | |
| Landing page | White 56px nav, #161616 hero with a 128px two-line headline and the green flag, one stepped edge, product rows, underlined headline links, #161616 footer ending in the full-width wordmark | which tint bands (Pink +1, Orange +1) and editorial modules follow the products | |
| Proposal page | Governments end: 45/45/10, underlined headline link as the next step | a pixel-framed photo at the top | |
| Ad | Headline in strong black or white, logo in a corner | a hero Pixelgram | |
| Social post | Grassroots: 60% color, black or white fields between pops | multi-pop color and Bitmap illustration | |
| Black and white, one green button | none | ||
| Error message | Plain language, black on white, no pixel effects | none |
Ads
Rules
Do
- Keep green to about a tenth of the page
- Strong black or strong white for every word (web exceptions: #414141 product descriptions, #B3B3B3 footer headings)
- Left-align headlines and text, sentence case; on the homepage section-end links sit right
- Square corners everywhere
- One illustration style per composition
Don’t
- use colored text
- use strong black as a background, or strong white on print and decks (mozilla.org pages use #FFFFFF)
- flood large text areas with pop colors (Governments pieces; Grassroots pieces in Brand in Action break this)
- use the tertiary palette outside charts
- center or all-caps headlines (Governments pieces; Grassroots pieces in Brand in Action break this)
Source: brand.mozilla.com/document/231brand.mozilla.com/document/231brand.mozilla.com/document/241
Steal this kit
Your name and logo, Mozilla’s system.
Comes with you
- Color roles and how much of each
- Type pairing, with open fonts
- Voice rules the writing check enforces
- Icon, photo, illustration and motion recipes
- The strategy frame, to fill with yours
Stays yours
- Your name and logo
- Your proof: numbers, customers, quotes
- Your purpose and claims. Theirs aren’t yours to make
Use this kit for my brand Use this brand in Claude
Hand it to a developer
- spec.mdEvery value and rule
- tokens.cssCSS variables
- tokens.jsonDesign tokens (DTCG)
- kit.jsonWhat our engines read
Your brand next
Get your brand audit Put your brand in Claude What goes in a brand book
What Mozilla doesn’t publish
- A muted or secondary text color
- Optimistic easing values
- The guide publishes contrast scores for the "-1" pairings (19.04, 18.67, 19.18:1, all marked limited use) that don't match those hexes by WCAG math; check before using them
- Foundation impact stats: counters didn't render as text in the check, so no numbers recorded.
- Come back to Firefox visuals not inspected (film/social assets not opened); only the announcement text was verified.
- Text link hover color and primary button hover were measured; no hover style exists for inputs.
- No mozilla.org download button exists anymore: /firefox/new redirects to firefox.com.
- The guide does not publish the pixel size for photo corner cuts or for the stepped band edge; the edge geometry here is measured from mozilla.org
Each value is marked published, observed, our reading or our recipe, with its source. Checked 2026-10-29. Not affiliated with Mozilla.