# Mozilla: brand book and build spec

Black and white with a small, loud green; a uniwidth slab-rooted headline face Mozilla gives away; and everything, from band edges to illustrations to photo frames, cut on a pixel grid. An activist voice that tells it straight.

From unfairly.ai/brand-guidelines/mozilla, checked 2026-10-29. Unofficial study; not affiliated with Mozilla.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** One system, one dial. Mozilla runs the same black, white, pixel flag and green from Governments-quiet to Grassroots-loud, so a public-interest voice can speak to a regulator and a festival without becoming two brands. Based on: From the published Governments-to-Grassroots spectrum, the 45/45/10 and 20/20/60 color ratios, and the 2024 Reclaim the Internet identity.

## Purpose

Mission: 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.) (published; https://brand.mozilla.com/document/240#/-/who-we-are)

Story: 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. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Internet as a public resource | Manifesto principle 2: the internet must remain open and accessible (paraphrase). | published: https://www.mozilla.org/en-US/about/manifesto/ |
| Security and privacy are fundamental | Principle 4: privacy and security must not be treated as optional (paraphrase). | published: https://www.mozilla.org/en-US/about/manifesto/ |
| Individual agency | Principle 5: people must be able to shape the internet and their own experience of it (paraphrase). | published: https://www.mozilla.org/en-US/about/manifesto/ |
| Free and open source software | Principle 7: open source promotes the internet as a public resource (paraphrase). | published: https://www.mozilla.org/en-US/about/manifesto/ |
| Transparent community process | Principle 8: community-based processes build participation, accountability and trust (paraphrase). | published: https://www.mozilla.org/en-US/about/manifesto/ |
| Balance profit with public benefit | Principle 9: commercial involvement is welcome, but must be balanced with public benefit (paraphrase). | published: https://www.mozilla.org/en-US/about/manifesto/ |
| An inclusive, civil internet | 2017 Pledge commitments: an internet for all peoples that promotes civil discourse, critical thinking and collaboration (paraphrase). | published: https://www.mozilla.org/en-US/about/manifesto/ |

## Fixed and flexible

Never changes:
- 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.

## Positioning

- **Statement**: Mozilla is the people’s platform, where everyone can control their internet. (published)
- **Category**: Nonprofit-led family of organizations: an activist organization that builds products, funds and advocates for a better internet (paraphrase of the brand promise). (published)
- **Audience**: Four key audiences: Developers, Users, Policymakers, Communities. (published)
- **Problem**: 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). (observed)
- **Promise**: 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). (published)
- **Differentiators**: Nonprofit ownership and independence: a new nonprofit stewards Mozilla for the long term; Firefox described as always independent, unlike big tech.; Advocates, builds and funds: policy voice + products + philanthropic and venture capital under one name.; Open source by default, including open-source AI tools.; Users choose whether AI features appear in Firefox.
- **Alternatives**: Big tech platforms and browsers (named generically as 'big tech' / 'Big AI companies'; Mozilla does not name competitors on these pages).

## Messaging

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 (Brand promise as sign-off; also printed on branded water bottle (rebrand launch post))
- Internet for people, not profit (mozilla.org page title)
- Guard the Open Internet (About page H1)
- Now more than ever: come back to Firefox. (Sign-off of the Oct 2026 Firefox campaign announcement (Firefox brand, not the Mozilla masterbrand))

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Control | You control your internet, data and AI. | Firefox has built-in tracking protections and open source code anyone can see (paraphrase).; Firefox lets you decide if AI features appear and how they behave (paraphrase). | our reading |
| Open | Open source and an open, public-resource internet. | Mozilla Manifesto (2007, 10 principles) plus Pledge for a Healthy Internet (2017).; Open Source AI Is Winning: inaugural annual survey/report; cross-portfolio open source AI strategy ('owners, not renters'). | our reading |
| Independent / not for profit | Not big tech, not extracting from people. | Community working together since 1998.; A new nonprofit created to steward Mozilla for the long term (About page tile). | our reading |
| Together | Reclaiming is collective, not something Mozilla does for you. | Mozilla Festival, Barcelona, Oct. 28–30 (2026), eight tracks.; Global community of volunteers, fellows and contributors; Foundation homepage spotlights named community members. | published |

They never claim:
- Mozilla doesn't claim to reclaim the internet for people; the guide frames it as something everyone does together.
- Avoid buzzwords, hype and technical jargon; explain essential technical terms.
- Humor never punches down; nothing crass, sarcastic or mean.
- Lead with tangible impact, not intellectual grandstanding.
- Say 'internet', not 'web' (lowercase internet).
- No hard numbers for impact stats on the Foundation homepage were readable in this check; don't quote counts without a source.

Real lines, as they wrote them:
| Line | Channel | Source |
|---|---|---|
| "Welcome to Mozilla" | homepage | https://www.mozilla.org/en-US/ |
| "Love the internet again" | homepage | https://www.mozilla.org/en-US/ |
| "Break free from big tech" | homepage | https://www.mozilla.org/en-US/ |
| "Get wild at Mozilla Festival" | homepage | https://www.mozilla.org/en-US/ |
| "Explore issues shaping the future of the internet" | homepage | https://www.mozilla.org/en-US/ |
| "Open Source AI Is Winning" | homepage | https://www.mozilla.org/en-US/ |
| "AI for the people" | homepage | https://www.mozilla.org/en-US/ |
| "Owners, Not Renters" | homepage | https://www.mozilla.org/en-US/ |
| "You, AI and the internet — what’s really going on?" | homepage | https://www.mozilla.org/en-US/ |
| "Guard the Open Internet" | product page | https://www.mozilla.org/en-US/about/ |
| "Together, we can keep the internet easy, safe and free — for everyone." | product page | https://www.mozilla.org/en-US/about/ |
| "Be a force for good technology." | homepage | https://www.mozillafoundation.org/en/ |

## Voice

Tone words: Passionate, Welcoming, No bullsh*t.

Traits:
- Passionate (published)
- Welcoming (published)
- No Bullsh*t (published)
- Fearless (published)
- Optimistic (published)
- Insightful (published)

- 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.

Rules a copy check enforces:
- 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

Tone by reader state, 0 (no personality) to 5 (full) (our recipe): Grassroots: community, events, podcasts 4, Governments: policy, advocacy, professional 1. One voice on a two-ended spectrum. Mozilla publishes the two ends; the levels are our reading of them.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Green | #00D230 | accent | Buttons and calls to action (limited use), illustration highlights. The guide's ratio is about 10% of a piece. On the mozilla.org homepage green is the animated hero flag (216x253px) and the 32px article icons in the news list, nothing else (observed 2026-10-29). |
| Black | #161616 | night | Dark grounds. About 45%. |
| White | #FAFAFA | paper | The guide's White: about 45% of print and deck pieces. On mozilla.org it is the tag fill, the product-row rules and the row hover fill, not the page ground. |
| Strong black | #000000 | ink | Type only, never a background |
| Strong white | #FFFFFF | on_night | Type on dark grounds. Also the mozilla.org page ground (observed 2026-10-29), though the guide reserves it for type: use #FFFFFF for web page grounds, #FAFAFA for print and decks. |
| Pink | #FF97E2 | accent_secondary | Grassroots pop |
| Pink +1 | #FFF1F8 | surface | Tint ground; the festival band on the homepage |
| Orange | #FF9456 | extra | Grassroots pop |
| Orange +1 | #FAF0E6 | extra | Tint ground; the story grid band on the homepage |
| Green +1 | #D6FFCD | extra | Tint ground |
| Green -1 | #28733F | extra | Shade for focused-range pieces |
| Pink -1 | #AE49EC | extra | Shade for focused-range pieces |
| Orange -1 | #FF453F | extra | Shade for focused-range pieces |
| Green -2 | #022611 | extra | Deep ground; nav link hover text on mozilla.org |
| Pink -2 | #210340 | extra | Deep ground |
| Orange -2 | #330505 | extra | Deep ground |
| Dark gray (Grey -2) | #414141 | ink_muted | mozilla.org's secondary text on light grounds: product-row descriptions only (observed). The guide files it under the charts-only tertiary palette, so never use it for headlines, body or links. |
| Light mid gray | #E8E8E8 | extra | The nav's 2px bottom border (observed) |
| Mid gray | #B3B3B3 | extra | Footer column headings on #161616 (observed) |
| Dark mid gray | #6D6D6D | extra | News list metadata on phones (observed) |
| Report yellow | #FEFEBB | extra | Only inside the yearly report artwork (observed); not a brand ground |
| Footer icon gray | #7F7F7F | extra | Footer social icons only: white glyphs at 45% opacity (observed) |

Proportion (published; Published ratio for primary (Governments) work. Grassroots pieces flip it: 20% black, 20% white, 60% color.): Black 45%, White 45%, Green 10%.

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Mozilla Headline | 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 | "Helvetica Neue", Arial, sans-serif |
| body | Mozilla Text | 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 | "Helvetica Neue", Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Hero headline | --text-hero-headline-* | display | 128px | 48px | 1 | -1.28px | 600 |
| Section headline | --text-section-headline-* | display | 80px | 32px | 1 | -0.8px | 600 |
| Card title | --text-card-title-* | display | 32px | 24px | 1.1 | -0.32px | 600 |
| Year label | --text-year-label-* | display | 48px | 24px | 1.25 | 0px | 600 |
| Call-to-action link | --text-call-to-action-link-* | display | 32px | 18px | 1.1 | 0px | 600 |
| Hero subline | --text-lead-* | body | 24px | 18px | 1.25 | 0px | 400 |
| Section intro | --text-section-intro-* | body | 24px | 18px | 1.25 | 0px | 400 |
| Product name | --text-product-name-* | body | 24px | 18px | 1 | 0px | 600 |
| Nav link | --text-nav-link-* | body | 18px | 16px | 1.25 | 0px | 600 |
| Body | --text-body-* | body | 18px | 16px | 1.25 | 0px | 400 |
| Muted description | --text-muted-description-* | body | 18px | 14px | 1.25 | 0px | 400 |
| Tile description | --text-tile-description-* | body | 16px | 14px | 1.25 | 0px | 400 |
| Text link | --text-text-link-* | body | 18px | 14px | 1.25 | 0px | 600 |
| Tag | --text-tag-* | body | 14px | 14px | 1.25 | 0px | 700 |
| Footer heading | --text-footer-heading-* | display | 16px | 14px | 1.1 | -0.16px | 600 |
| Legal | --text-legal-* | body | 14px | 12px | 1.5 | 0px | 400 |

## Layout

Measured on https://www.mozilla.org/en-US/: 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).

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 32px | 16px |
| Section padding | 64px | 32px |
| Container max width | 1440px | full |
| Hero text width | max 912px | full |
| Grid columns | 12 | 1 |
| Gutter | 16px | 8px |
| Card gap | 16px | 16px |
| Navigation height | 56px | 56px |

At every width (observed, 2026-10-28):
| What | 390px | 768px | 1024px | 1440px |
|---|---|---|---|---|
| hero headline size | 48px / lh 1 / -0.48px | 80px / lh 1 / -0.8px | 80px / lh 1 / -0.8px | 128px / lh 1 / -1.28px |
| section headline size | 32px | 64px | 64px | 80px |
| body size | 16px (token --text-body-md; not measured on an element) | 18px (token) | 18px / 22.5px | 18px / 22.5px |
| hero subline size (weight 400) | 18px / 22.5px | 32px / 40px (their CSS; real) | 24px / 30px | 24px / 30px |
| section intro size (renders 400; CSS says 500 with no 500 file) | 18px / 22.5px | 24px / 30px | 24px / 30px | 24px / 30px |
| cta link size | 18px | 24px | 24px | 32px |
| page margin | 16px | 24px | 24px | 32px |
| section padding | 32px top/bottom | 64px | 64px | 64px |
| container max width | 1440px | 1440px | 1440px | 1440px |
| grid columns | 1 (gallery tiles 358px) | 2 (354px) | 2 (482px) | 12-col grid: 2-up tiles 680px, then 3-up 448px |
| gutter | 8px (row gap 32px) | 12px (row gap 64px) | 12px (row gap 64px) | 16px (row gap 64px) |
| card title / tile description | 24px / 14px | 24px / 16px | 32px / 16px | 32px / 16px |
| product row (name / description) | 18px / 14px, stacked, 93-111px rows | 24px / 18px | 24px / 18px, side by side | 24px / 18px, 76px rows |

Breakpoints from Mozilla's CSS: 768, 1312px.

Homepage bands, top to bottom (observed):
1. White nav, 56px, sticky: black lockup left, two centered links
   - Desktop: #FFFFFF bar 55px plus a 2px #E8E8E8 bottom border; lockup 100x24 at x 32, y 16; "Products" and "About us" centered on the page
   - Phone: 54px: lockup 113x31 at x 16; an underlined "Menu" text button at the right edge
   - No buttons and no CTA in the nav
   - Links: Mozilla Text 18px 600 black, 24px padding each side, hover #022611
2. #161616 hero: two-line 128px headline left, regular 24px subline, underlined link, green flag animating at right
   - Desktop: 671px tall at 1440. Text in columns 1-8 (max 912px); headline top at y 169 (112px below the nav); flag 216x253px centered in columns 10-11 (x 1076-1292); 128px bottom padding
   - Phone: 503px: pause button, headline 48px, subline 18px, link 18px, then the flag 100x123 right-aligned below the text
   - Pause animation button top right, 136x32
   - Headline 128px/1 600 white, two lines
   - Subline 24px/30px weight 400 white, 16px below the headline, two lines
   - CTA 32px Headline link 64px below the subline
3. Stepped pixel edge: 90px strip, three broad steps (40px on phones)
   - Desktop: y 728-818. Dark runs 0-360px down 54px, 360-864 down 90px, 864-1152 down 45px, 1152-1440 none
   - Phone: y 557-597. Dark runs 0-97.5px down 24px, 97.5-234 down 40px, 234-312 down 20px, 312-390 none
   - clip-path: polygon(0 60%, 25% 60%, 25% 100%, 60% 100%, 60% 50%, 80% 50%, 80% 0, 0 0) on a #161616 layer over #FFFFFF
4. White band: 80px headline, 24px regular intro, seven full-width product rows, right-aligned link
   - Desktop: 978px. Headline at the top of 64px padding; intro max 912px; rows start 64px below the intro; 7 rows of 76px; link 64px below
   - Phone: 969px. Headline 32px; rows start 32px below the intro; rows 93-111px with the description under the name
   - Product row: 32px colored icon, name 24px 600, muted #414141 description 18px, arrow right
   - Rows separated by 2px #FAFAFA rules inset 32px
   - "Explore our products" CTA link right-aligned
5. Pink +1 band: headline and copy left, 2:1 photo right, link right under the photo
   - Desktop: 477px, shallow. Headline columns 1-6 (680px) 80px two lines; body 18px; photo columns 8-12, 564x282, top-aligned with the headline; "Join us" right-aligned 32px below the photo
   - Phone: 599px: headline 32px, body 16px, photo 358x179, link right
   - Body is two short paragraphs: the pitch, then a one-line date and place
   - No tag, no button, no frame on the photo
6. White band: 80px headline, two editorial tiles 680px wide with 2:1 images
   - Desktop: 821px. Two tiles 680x340 images, 16px gutter, title 32px, description 16px, text link 18px underlined
   - Phone: Stacked, images 358x179, 32px apart
   - Tile images are artwork: a flat green halftone report cover and a multicolor magazine pattern
   - No tags on these two tiles
7. #161616 report feature: headline, intro, full-width yellow bitmap artwork, year label left and link right
   - Desktop: 1030px. Headline 80px/88px; intro 24px weight 400 max 912px; artwork 1376x515 full content width with 64px above and below; footer row: "2025" Headline 48px left, 32px CTA link right
   - Phone: 507px: headline 32px, artwork 358x134, year 24px and link right-aligned
   - Artwork: #FEFEBB field, mostly clear; "Choose / Your / Future" in three enormous black Headline lines; sparse pixel clusters held to the corners
   - Followed by a flat 90px #161616 strip, then a straight edge into the next band
8. Orange +1 band: 80px headline, bold intro, 3x2 grid of square-image story tiles
   - Desktop: 1591px. Tiles 448px with 448x448 images, 16px gutter, 64px row gap; #FAFAFA tag at 8,8 on each image
   - Phone: One column; images become 2:1 (358x179)
   - Intro here is bold (700), the only bold intro on the page
   - Tile: tag, square image, title 32px, description 16px, text link 18px underlined
9. White band: 32px heading, an editorial news table of exactly 11 compact 66px rows under 12px column labels
   - Desktop: 981px. 12px label row, then 66px rows: icon, type, author, topic, intro
   - Phone: Each row becomes a 181px card
   - 33px label row (Type, Author(s), Topic, Intro) in 12px
   - 11 rows x 66px, 2px #FAFAFA rules inset 32px
   - Icons: 32px squares, #00D230 for articles, #FF97E2 for video
10. #161616 footer: newsletter, three link columns, socials, donate and language, legal, full-width white wordmark
   - Desktop: 1013px. 64px top padding; wordmark 1376x288 at the bottom, 32px from the page bottom
   - Phone: 1333px, everything stacked; wordmark 358x75
   - Rules between rows: 2px #414141
   - Column headings Mozilla Headline 16px 600 #B3B3B3; links Mozilla Text 16px white

## Page anatomy

How Mozilla's own landing pages are built, part by part (observed; https://www.mozilla.org/en-US/, 2026-10-29). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: A quiet white bar: black lockup at left, two links centered, nothing else
- ground: #FFFFFF with a 2px #E8E8E8 bottom border
- page ground: #FFFFFF (--color-strong-white) for the nav and every white band. Not --color-paper (#FAFAFA), which is for tags, row hovers, print and decks
- height: 57px including the border at 1440 (55 + 2); 54px at 390
- logo: primary lockup, black SVG, 100x24px at x 32, y 16 (113x31 at x 16 on phones). Top left, not the guide's preferred right corner
- links: 2 ("Products", "About us"), each opens a dropdown; Mozilla Text 18px/22.5px 600 #000000, 24px side padding, the pair centered on the page (x 593-847 at 1440); hover color #022611
- actions: none: no button, no download, no green
- sticky: yes, position sticky at top 0
- phone: lockup left and a "Menu" text button right: Mozilla Text 16px 600, underlined 1px with 2px offset, 32px tall, no box, no icon; when open it becomes a 20px close icon

**Hero**
- summary: 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
- desktop: 12 columns, 32px margins, 16px gutters (100px columns at 1440). Hero top y 57, height 671. Pause button top right at y 121. Headline top y 169, columns 1-8 (912px max); subline 16px below; CTA 64px below the subline (y 563). Flag column 10-11: the visible flag is 216x253px at x 1076, y 264, centered on the text block. About 60% of the band is empty dark space. 128px bottom padding, then the stepped edge
- phone: Order: pause button (right), headline, subline, CTA, then the flag 100x123px right-aligned 32px below the CTA. Everything else left. 16px margins, 32px top padding
- media: the flag symbol in #00D230, an inline SVG animation (11 frames, 1.2s loop), no photo, no frame. The flag keeps its pixel construction in every frame: square cells and orthogonal steps only, the wave is a step change between frames, never a skew, rotation, curve or easing between shapes
- type: headline Mozilla Headline 128px/128px 600 white, -1.28px tracking (48px on phones, 80px at 768-1311); subline Mozilla Text 24px/30px weight 400 white, two balanced lines (18px/22.5px on phones)
- cta: one underlined Headline link, "Learn about us" pattern, 32px (18px on phones), to /en-US/about/. No button
- proof: none in the hero
- headline breaks: h1 measure 912px at 1440 (columns 1-8), 358px at 390; text-wrap: balance. Break before "to": "Welcome / to Mozilla" at both widths, two lines. Rule: two lines, the name on the second line, never split; keep line 1 short (one or two words). Subline: text-wrap: balance, measure 912px, two even lines at 1440 (break after "defend"), three at 390

**Products**
- summary: The product list right under the hero: headline, intro, seven compact full-width rows, a right-aligned link to all products
- ground: #FFFFFF
- desktop: band 978px, 64px padding; headline 80px; intro 24px/30px weight 400 (CSS 500, renders 400) max 912px; 64px to the rows; seven 76px rows; CTA 64px below the last row
- phone: headline 32px, intro 18px/22.5px weight 400; the first row starts 32px below the intro at 390 (64px at 1440); rows 93-111px with the description under the name, CTA 18px right
- anatomy:
  - Row: colored product logo 32px, name 24px 600 black, description 18px 400 #414141 in one line, black arrow right
  - Rule between rows: 2px #FAFAFA inset 32px; hover fills #FAFAFA and nudges the arrow
  - The rows are links to each product's own site
- components: product_row, cta_link
- rows:
  - Firefox, the web browser. Their words: "Get the gold standard for browsing with speed, privacy and control."
  - Thunderbird, the email app from MZLA. Their words: "Go chaos-free with one app for all your emails, calendars and contacts."
  - Mozilla VPN. Their words: "Keep your location and online adventures private"
  - Mozilla Monitor, data-breach alerts. Their words: "Get a heads-up if your personal info is at risk"
  - Firefox Relay, email and phone masks. Their words: "Mask your email and phone number"
  - 0DIN, AI security. Their words: "finding and fixing GenAI vulnerabilities before attackers do"
  - Tabstack, a developer API. Their words: "Reliably automate web tasks with a simple developer-focused API."
- also named:
  - Mozilla.ai: our reading, Mozilla's AI company building open-source tools; its site leads "Empowering Developers with Trustworthy AI" (their words)
  - Mozilla Ventures: our reading, Mozilla's fund for early-stage startups. Their words: "Pitch your company to Mozilla Ventures and secure funding"
  - Mozilla Data Collective. Their words: "rebuilding the AI data ecosystem with communities at the center"
  - Mozilla Foundation: our reading, the not-for-profit at the center of the project; the footer asks for donations to it
  - Mozilla Festival (MozFest). Their words: "imagine a tech future worth building"
  - State of Mozilla: our reading, the yearly report; their words "an invitation to choose a different future together"
  - Nothing Personal. Their words: "Our new magazine for independent thinkers, technologists, and creatives"
  - Otari. Their words: "eliminates the complexity of managing multiple AI providers"
  - Owners, Not Renters (0nr). Their words: "Join our new Open Source AI community."
- links to: "Explore our products" to /en-US/products/; each row to the product's own site (firefox.com, thunderbird.net, 0din.ai, tabstack.ai) or its mozilla.org page
- headline breaks: 80px headline, measure 1376px, one line ("Love the internet again"); at 390 it still fits one line at 32px. Intro: balance, measure 912px, two even lines (break mid-sentence, after "put you in"), three at 390
- images: no images: each product's own 32px colored logo

**Festival split**
- summary: A shallow two-column band on Pink +1: event pitch left, a 2:1 crowd photo right
- ground: #FFF1F8
- desktop: 477px tall. Headline columns 1-6 (680px), 80px, two lines; body Mozilla Text 18px/22.5px 400, two paragraphs (pitch, then date and place); photo columns 8-12 at 564x282, top-aligned with the headline; "Join us" CTA right-aligned 32px below the photo
- phone: headline 32px, body 16px/20px, photo 358x179 after the body, CTA right
- anatomy:
  - No tag, no button, no photo frame
  - The photo is people mid-cheer at the event, cropped 2:1
- components: media_frame, cta_link
- links to: "Join us" to mozillafoundation.org
- headline breaks: measure 680px (columns 1-6) at 1440, 358px at 390; text-wrap: balance. "Get wild at / Mozilla Festival" at both widths: break before the event name, keep the name on one line
- images: one candid photo of people at the event (crowd, cheering), 2:1, no green, no illustration

**Editorial two-up**
- summary: A headline and two wide tiles: one report, one magazine
- ground: #FFFFFF
- desktop: 821px. Headline 80px two lines; 64px below, two 680px tiles with 2:1 images (680x340), 16px apart
- phone: stacked tiles, 358x179 images, 32px row gap, titles 24px
- anatomy:
  - Tile: image, title Headline 32px 600, description 16px, text link 18px 600 underlined ("Read the report", "Read Now")
  - Images are flat artwork, not photos
- components: card
- links to: stateofopensource.ai and the Nothing Personal page on mozillafoundation.org
- headline breaks: measure 1376px but balanced into two lines of about 22 characters: "Explore issues shaping / the future of the internet"; three lines at 390 ("Explore issues / shaping the future / of the internet"). Tile titles one line (680px measure)
- images: left: a flat-color report cover (#00D230 ground, black halftone sphere, black Headline title); right: the magazine's multicolor typographic pattern ("NP." tiles). Two different kinds of art; never two dithered illustrations side by side

**Report feature**
- summary: The large yellow bitmap report feature on #161616
- ground: #161616
- desktop: 1030px. Headline 80px/88px white; intro 24px/30px weight 400 (CSS 500, renders 400) white, max 912px; artwork 1376x515 across the full content width, 64px above and below; bottom row: "2025" in Mozilla Headline 48px 600 at left, "Read the report" CTA 32px at right
- phone: headline 32px, intro 18px, artwork 358x134, year 24px and CTA right-aligned
- anatomy:
  - Artwork (1376x515, about 2.67:1): a flat #FEFEBB field, mostly clear. The title "Choose / Your / Future" stacked in three enormous black Mozilla Headline lines (each about 110px tall, about 21% of the artwork height), tight leading, the block about 560px wide, sitting just left of center with lines staggered right. Sparse black pixel clusters held to the corners only: a dense dither top left, a large cluster mid-right, a few loose dots bottom left, plus a faint 4-cell outline grid at the bottom-left edge. Nothing in the middle but the title
  - After it a flat 90px #161616 strip and a straight edge to the next band (no visible steps)
- components: media_frame, cta_link
- links to: "Read the report" to stateof.mozilla.org
- headline breaks: one line, measure 1376px. Intro uses normal wrap (not balance), measure 912px: three lines at 1440, five at 390
- images: the yellow "Choose Your Future" report artwork (see anatomy); the only bitmap art on the page

**Story grid**
- summary: Three columns of square-image story tiles on Orange +1
- ground: #FAF0E6
- desktop: 1591px. Headline 80px; intro 24px/30px bold 700, max 912px; 3x2 grid of 448px tiles with 448x448 images, 16px gutter, 64px row gap
- phone: one column, images 2:1 (358x179), titles 24px
- anatomy:
  - Each image carries a #FAFAFA tag (Product, Impact, Program, Event) 8px from its top-left corner, as live HTML
  - Title 32px, description 16px, text link 18px underlined ("Join today", "Read more")
  - Mix photos of people with product artwork
- components: card, pill_label
- links to: each tile to its own site (Data Collective, Ventures at mozilla.vc, Otari, a newsletter, a press article, a video)
- headline breaks: one line, 1376px. Intro balance, 912px, two lines; tile titles one line in 448px (keep titles under about 28 characters)
- images: six square cards, mixed on purpose: about half photos of people (an over-the-shoulder table shot, a stage portrait under colored light, a founder pitching), half product artwork (a wordmark on black, a logo on a soft gradient). No globes, no green-dominant art, no two conference stages next to each other

**News list**
- summary: A dense editorial news table, not cards: exactly 11 compact rows under a row of small column labels
- ground: #FFFFFF
- desktop: 981px band, 64px padding. Heading Mozilla Headline 32px/32px 600 at y +64. 64px below: a 33px label row (Type, Author(s), Topic, Intro) in Mozilla Text 12px/15px 400 black, 8px vertical padding. Then 11 rows, each 66px tall (16px top and bottom padding), separated by 2px #FAFAFA rules inset 32px from both page edges. Columns on the 12-col grid: icon 32x32 at x 35; Type x 123 (77px) 16px/20px 700; Author x 232 (172px) 16px 400; Topic x 436 (191px) 16px 700; Intro x 659 (746px) 16px 400, one line. Whole row is a link; hover fills #FAFAFA over 0.3s cubic-bezier(0.5, 0, 0, 1)
- phone: heading 16px; label row hidden; each item a 181px card: icon 32px and type (#6D6D6D 16px) top left, topic top right (#6D6D6D), intro 18px/22.5px 700 black below, author bottom right #6D6D6D; 2px rules between cards
- anatomy:
  - 11 rows of 66px plus a 33px label row, nothing else in the band: no images, no button, no CTA
  - Content-type icons: 32px squares, #00D230 with a black glasses glyph (Article), #FF97E2 with a black arrow glyph (Video)
  - Labels 12px; rows 16px; Type and Topic bold 700, Author and Intro regular 400
  - Rules: 2px #FAFAFA, so pale they nearly vanish on #FFFFFF
- components: news_row
- links to: each row to the outside article or video
- headline breaks: heading 32px one line in 1376px; one line at 390 (16px)
- images: no images: 32px colored squares carrying a small black content-type glyph (glasses for articles on #00D230, arrow for video on #FF97E2)

**Footer**
- summary: A #161616 footer that closes on the wordmark set nearly full width
- ground: #161616
- anatomy:
  - 64px top padding, 32px side margins
  - Newsletter row: white flag symbol 40x47 at left; promise text Mozilla Text 16px/20.8px 600 white beside it (columns 2-5); right half (680px): label 14px 600, 40px #414141 email field with a 2px white border, then the Sign Up Now button 32px below; a 2px #414141 rule under the row
  - Links row: three columns 273px wide (Company 5 links, Support 4, Developers 5); headings Mozilla Headline 16px 600 #B3B3B3; links Mozilla Text 16px/20px 400 white, 28px apart
  - Socials at the far right: "Follow @Mozilla" then five icons (Bluesky, Instagram, LinkedIn, TikTok, Spotify), "Follow @Firefox" then four. Each is a white 16px glyph in a 24px box, 4px apart, at opacity 0.45, so it renders #7F7F7F on #161616 (subdued grey, not white); hover opacity 1
  - Actions row, right-aligned: Donate button 133x40 with a heart icon, language select 256x40. At 1440 there is no rule above this row (32px of plain #161616 after the link columns) and a 2px #414141 rule 32px below it. On phones a 2px #414141 rule does sit above it (the bottom of the socials block)
  - Legal row: left paragraph Mozilla Text 14px/21px (donate line, copyright 1998-2026, Creative Commons licence), right two lines of 14px 600 underlined links (Website Privacy Notice, Cookies, Legal, Community Participation Guidelines, About this site)
  - The white wordmark alone, no flag (wordmark-white.svg, 300x63 viewBox), width 100% of the content: 1376x288px at 1440, 358x75 at 390; 32px from the page bottom (16px on phones)
- phone: stacked: symbol and text, full-width field and button, link columns two-up then one, socials in rows, full-width Donate and language select, legal 12px/18px, wordmark 358x75

**On dark grounds**
- secondary button: button_on_dark: #161616 fill, 2px #FFFFFF border, white 16px 600 text, 40px; hover white fill, black text
- link: white; the CTA underline is white; footer links are white without underline, legal links white underlined
- muted text: #B3B3B3 for footer headings only; body text on dark stays #FFFFFF
- hairline: 2px #414141
- logo on dark: white flag symbol and white wordmark in the footer; the green flag is used only in the hero animation
- input: #414141 fill, 2px #FFFFFF border
- icons: social glyphs white at opacity 0.45 (#7F7F7F rendered); hover opacity 1

## Components

- **button primary** (observed): fill night, text on_night, ring px 2, ring ink, radius 0, height 40, padding x 16, font size 16, weight 600. Square #161616 button, 40px, 2px ring. mozilla.org's homepage shows it only on dark (the footer Sign Up and Donate, see button_on_dark); on light grounds the ring is black. It inverts on hover. There is no green button on mozilla.org.
  - hover (observed): fill #FFFFFF, text #000000, border 2px solid #FFFFFF, transition background-color, border-color, color 0.1s
  - focus (observed): fill #FFFFFF, text #000000, box shadow 0 0 0 2px rgba(0,144,237,0.5), outline browser default auto ring, offset 4px
  - active (observed): note Protocol base: :active = :hover (white fill, black text)
  - disabled (observed): opacity 0.6, pointer events none
- **cta link** (observed): face display, text ink, underline px 2, weight 600, font size 18px under 768, 24px at 768-1311, 32px from 1312, line height 1.1, anatomy Mozilla Headline 600 link, no box. The underline is a background: linear-gradient(to right, currentColor 0 33%, transparent 33% 66%, currentColor 66% 100%), background-size 400% 2px, background-repeat no-repeat, background-position left 100% top 100% at rest. Hover moves it to left 0% over 0.8s cubic-bezier(0.5, 0, 0, 1), so the line wipes out through the gap and back in. Text color never changes. Hero CTA sits left under the subline; every section-end CTA is right-aligned (text-align end).. One easing for every UI hover on mozilla.org: cubic-bezier(0.5, 0, 0, 1). The 0.68/0.12 global curve is for brand animation, not links.
  - hover (observed): underline background-position 100% to 0% over 0.8s cubic-bezier(0.5, 0, 0, 1), color unchanged
  - focus (observed): outline browser default ring, offset 4px, color unchanged
- **pill label** (observed): fill paper, text ink, radius 0, height 32, padding x 8, font size 14, weight 700, anatomy The tile tag: #FAFAFA box, 32px tall, 8px side padding, Mozilla Text 14px 700 black, square corners, absolutely placed 8px from the top-left corner of the tile image. Live HTML over the image, never baked into it.
- **card** (observed): fill none, radius 0, shadow none, border none, anatomy Gallery tile, no box: image (order 1) with optional tag at 8,8; 16px gap; title Mozilla Headline 32px/35.2px 600 (24px under 1024); 4px gap; description Mozilla Text 16px/20px 400 black (14px on phones); 16px gap; text link Mozilla Text 18px 600 underlined (14px on phones). Title underlines on hover. Two-up tiles 680px wide with a 2:1 image (680x340); three-up tiles 448px with a square image (448x448); on phones every image is 2:1 (358x179). 16px gutter, 64px row gap (32px on phones).
- **button secondary** (observed): fill none, text ink, ring px 2, ring ink, radius 0. Light-ground outline button (Protocol base); not on the homepage. Hover fills #161616 with white text.
  - hover (observed): fill #161616, text #FFFFFF, border 2px solid #000000
  - focus (observed): border #0060DF, box shadow 0 0 0 2px rgba(0,144,237,0.5)
- **button on dark** (observed): fill night, text on_night, ring px 2, ring on_night, radius 0, height 40, padding x 16, font size 16, weight 600, anatomy Footer Sign Up Now and Donate: #161616 fill, 2px #FFFFFF border, white Mozilla Text 16px 600, 40px tall, square. Donate carries a 16px heart icon 8px before the label. Hover inverts to white fill, black text in 0.1s.
  - hover (observed): fill #FFFFFF, text #000000, border 2px solid #FFFFFF, transition background-color, border-color, color 0.1s
- **product row** (observed): height desktop 76, height phone 93 (2-line description) or 111 (3-line), icon px 32, arrow px 18, anatomy Full-bleed link row on a 12-column grid. 24px top and bottom padding (16px on phones), 32px side padding (16px). Rows are separated by a 2px #FAFAFA rule inset 32px from each edge (rows overlap by 2px so rules never double). Left: the product's own colored logo, 32px, vertically centered. Name in Mozilla Text 24px 600 black with 48px left indent, columns 1-3 (331px). Description in Mozilla Text 18px/22.5px 400 #414141, columns 4-11, one line. Right: an 18px black arrow-right icon in a 32px box, 32px from the edge. Hover: row fills #FAFAFA and the arrow slides 24px right (to 8px from the edge), both 0.3s cubic-bezier(0.5, 0, 0, 1). Phone: name 18px over description 14px/17.5px, both indented 48px, arrow 16px from the edge. The list starts 64px below the intro at 1440, 32px at 390.
- **news row** (observed): height desktop 66, icon px 32, anatomy A table-like list: a 12px label row (Type, Author(s), Topic, Intro), then rows 66px tall split by the same 2px #FAFAFA inset rule. Columns: a 32px square icon (#00D230 with a black glasses glyph for articles, #FF97E2 with a play glyph for video), type 16px 700, author 16px 400, topic 16px 700, intro 16px 400, all black. Hover fills the row #FAFAFA. Phone: a 181px card per item: icon and type (#6D6D6D) top left, topic top right, the intro as an 18px 700 line, author bottom right in #6D6D6D.
- **media frame** (observed): radius 0, border none, shadow none, anatomy Images are plain rectangles: square corners, no border, no shadow, no overlay text and no pixel-cut corners on the homepage. Ratios: festival photo 2:1 (564x282), two-up tiles 2:1 (680x340), story tiles 1:1 (448x448), report artwork 1376x515 (about 2.67:1); all 2:1 on phones.
- **pause button** (observed): fill night, height 32, radius 0, anatomy Top right of the hero, 64px below the nav (32px on phones): 136x32 box, #161616 fill, 1px #414141 border, 14px pause icon, "Pause animation" Mozilla Text 12px 600 white, 8px padding. Hover inverts to white fill, black text (0.3s). Required because the flag animation loops forever., text on_night, ring px 1, ring #414141, padding x 8, font size 12, weight 600
  - hover (observed): fill #FFFFFF, text #000000, border 1px solid #FFFFFF, transition background-color, border-color 0.3s
- **newsletter field** (observed): height 40, radius 0, anatomy Footer email input: label "Your email address:" Mozilla Text 14px 600 white above; field 40px tall, #414141 fill, 2px #FFFFFF border, white text; full width of the right half (680px) on desktop, full width on phones; the button sits 32px below (24px on phones).
- **language select** (observed): height 40, radius 0, anatomy Footer language picker: 256x40, #161616 fill, 2px #FAFAFA border, globe icon left, white caret right, Mozilla Text 16px 600 white. Full width on phones.

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| global | cubic-bezier(0.68, 0, 0.12, 1) | 800ms | brand animation (the flag planting, the wordmark building, illustration). Not UI hovers: those use ui-hover | published |
| ui-hover | cubic-bezier(0.5, 0, 0, 1) | 300ms | 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 | observed |
| flag-wave | linear | 1200ms | the hero flag: 11 SVG frames cross-fade in a 1.2s infinite loop, each frame 0.1s after the last; a Pause animation button stops it | observed |
| fearless-in | cubic-bezier(0.59, 0, 0.59, 0) | 400ms | Fearless moments, entering | published |
| fearless-out | cubic-bezier(0, 0.66, 0.33, 1) |  | Fearless moments, leaving | published |
| insightful-in | cubic-bezier(0.22, 1, 0.36, 1) | 330ms | Insightful moments, entering | published |
| insightful-out | cubic-bezier(0.64, 0, 0.78, 0) |  | Insightful moments, leaving | published |

## Icon tokens

Grid 16×16, stroke 1.5pt (published).
| Name | Size | Use |
|---|---|---|
| s | 16px |  |
| m | 24px |  |
| l | 32px |  |
| xl | 40px |  |

## Signature moves

### Pixel-stepped band edges

Where: 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.
Do: a strip 90px tall (40px under 768) with the page's background below and the upper band's color drawn in it by clip-path: polygon(0 60%, 25% 60%, 25% 100%, 60% 100%, 60% 50%, 80% 50%, 80% 0, 0 0). Four flat runs, left to right, as a share of width and of strip depth: 0-25% drops 60%, 25-60% drops 100%, 60-80% drops 50%, 80-100% drops 0. So the dark shape sags in the left-middle and lifts toward the right. At 1440: runs 360, 504, 288, 288px at depths 54, 90, 45, 0px, strip at y 728-818. At 390: runs 97.5, 136.5, 78, 78px at depths 24, 40, 20, 0px, strip at y 557-597. Three steps, no jitter, no small teeth, same shape at every width. The example's "step: 12" is only the stair size in px of our book thumbnail, not Mozilla geometry. Once per page, under the hero.
Don't: blend bands with gradients, waves or curves, or cut many small random teeth; the edge is three broad square steps; the animated hero flag follows the same rule: orthogonal pixel steps, never skewed.
Example: "Bands meet on a stepped, pixel edge".

### The call to action is an underlined headline

Where: the end of the hero and of each section.
Do: Mozilla Headline 600 (18px phone, 24px at 768-1311, 32px from 1312), strong black or strong white, a 2px underline drawn as a background gradient that wipes out and back in on hover over 0.8s cubic-bezier(0.5, 0, 0, 1); no box. Left under the hero subline; right-aligned at the end of every other section. One per band.
Don't: color the link green or pink: their guide says don't use colored text.
Example: "Read the full report", with "Read the full report" set as underline.

### Black and white, with a pop of green

Where: every "Governments" piece.
Do: about 45% black, 45% white, 10% green (the guide's ratio for "Governments" pieces). On the mozilla.org homepage green is only the animated hero flag (216x253px) and the 32px news icons. Green is allowed for buttons but marked limited use; never green text. Green stays small.
Don't: flood a Governments piece with green: there, bright tones are pops only (Grassroots pieces may run 60% color).
Example: "Take back your feed".

## Messaging: rules

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.

Why it works: A promise short enough to sign off with gets repeated; a fuller promise and mission explain it when someone asks.

- Sign off with the promise rather than leading with it
- Reclaiming is collective: Mozilla supports people in owning that power, it doesn't act for them
- Speak to four audiences: developers, users, policymakers, communities

Sources: https://brand.mozilla.com/document/240#/-/who-we-are, https://brand.mozilla.com/document/241#/-/about-mozilla-s-brand

## Voice: rules

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).

Why it works: One spectrum instead of many tones: a policy brief and a festival poster are the same voice at two settings.

- 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

Do and don't:
- Do: "We don't sell your data. Here's how we make money.". Tell it like it is, in words people use.
- Don't: "Leveraging privacy-first synergies to empower stakeholders.". Jargon and fluff: the guide asks for plain language and no grandstanding.

Sources: https://brand.mozilla.com/document/240#/-/voice-tone, https://brand.mozilla.com/document/241#/-/accessibility

## Logo: rules

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

Do and don't:
- Do: "Logo in strong white on black". Strong black or strong white only, anchored in a corner.
- Don't: "Logo recolored pink". Don't stray from strong black or white, and don't compromise contrast.

Real examples, to look at on Mozilla's own pages (not for reuse):
- The flag symbol as an embossed patch: https://brand.mozilla.com/document/272
- The wordmark repeated as a wall at a Builders event: https://brand.mozilla.com/document/231#/-/brand-in-action

Sources: https://brand.mozilla.com/document/231#/-/logos, https://brand.mozilla.com/document/231#/-/brand-lockups, https://brand.mozilla.com/document/231#/-/mascot

## Color: rules

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.

Why it works: 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

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).

Do and don't:
- Do: "Get the app". The default call to action: the square #161616 button, or the underlined headline link. Green buttons are allowed but limited use.
- Don't: "Your privacy, protected". Green text on white: their guide says no colored text.
- Do: "Mostly black and white". About 45% black, 45% white, 10% green.
- Don't: "A page flooded green". In Governments pieces bright tones are pops; only Grassroots pieces run 60% color.

Sources: https://brand.mozilla.com/document/231#/-/color, https://www.mozilla.org/en-US/

## Typography: rules

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.

Why it works: 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.

- 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

Do and don't:
- Do: "Take back your internet". Mozilla Headline, left-aligned, sentence case.
- Don't: "TAKE BACK YOUR INTERNET". All caps in Mozilla Text: wrong face for a headline, and caps are less accessible.

Sources: https://brand.mozilla.com/document/231#/-/typography-1, https://www.mozilla.org/en-US/

## Iconography: rules

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.

- 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

Sources: https://brand.mozilla.com/document/231#/-/icons

## Illustration: rules

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).

Why it works: The pixel ties illustration to the flag symbol and the band edges, so one dithered shape is recognizably Mozilla.

|  |  |
|---|---|
| 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._

- 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

Real examples, to look at on Mozilla's own pages (not for reuse):
- Editorial cover slot: flat green, halftone sphere: https://www.mozilla.org/en-US/
- Magazine slot: multicolor "NP." type pattern: https://www.mozilla.org/en-US/
- Report feature slot: "Choose Your Future" on yellow: https://www.mozilla.org/en-US/
- Bitmap: a dithered hand and globe on flat green: https://brand.mozilla.com/document/302
- Bitmap: a green dithered globe on black: https://brand.mozilla.com/document/262

Sources: https://brand.mozilla.com/document/231#/-/illustration

## Photography: rules

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.

|  |  |
|---|---|
| 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._

- 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

Real examples, to look at on Mozilla's own pages (not for reuse):
- Fearless: a cheering crowd at Mozilla Festival: https://www.mozilla.org/en-US/
- Story-card slot: a stage portrait under pink light: https://www.mozilla.org/en-US/
- Fearless: a founder pitching on stage: https://brand.mozilla.com/document/231#/-/brand-in-action
- A plenary in the dark, green bitmap on screen: https://brand.mozilla.com/document/231#/-/brand-in-action

Sources: https://brand.mozilla.com/document/231#/-/photography

## Motion: rules

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).

Sources: https://brand.mozilla.com/document/231#/-/motion

## Interface and layout: rules

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.

- Every headline and intro uses text-wrap: balance (report intro excepted); headlines break before a name and never split it
- Green may appear in imagery only as: the hero flag, one editorial cover (the report tile), and the small news markers. Nothing else on the page is green: no green photos, no green-dominant story cards, no green illustration beside the green cover

Sources: https://www.mozilla.org/en-US/

## Rules: rules

- 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
- Don't use strong black as a background, or strong white on print and decks (mozilla.org pages use #FFFFFF)
- Don't flood large text areas with pop colors (Governments pieces; Grassroots pieces in Brand in Action break this)
- Don't use the tertiary palette outside charts
- Don't center or all-caps headlines (Governments pieces; Grassroots pieces in Brand in Action break this)

Sources: https://brand.mozilla.com/document/231#/-/color, https://brand.mozilla.com/document/231#/-/typography-1, https://brand.mozilla.com/document/241#/-/accessibility

## Campaigns

### Reclaim the internet: the masterbrand rebrand (2024)

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.

How the system shows: Launch post shows a black water bottle reading 'Reclaim the internet with us' with a green lid, a black hoodie with the wordmark in green, ID badges on green/black/white, and a stage set in black with oversized white type.
Why it works: 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.
Channels: identity system, web (mozilla.org), events, merch, presentations, brand site. Source: https://blog.mozilla.org/en/mozilla/mozilla-brand-next-era-of-tech/

### Come back to Firefox (2026)

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.

How the system shows: Not verified visually: this is the Firefox product brand (purple pill buttons on firefox.com), not the Mozilla masterbrand. The voice matches the Mozilla guide: humor that names real problems ('forced AI features') without punching down.
Why it works: Nostalgia lets humor carry the privacy argument, matching the guide's 'use humor to highlight problems that inspired our product solutions'.
Channels: film, social, blog. Source: https://blog.mozilla.org/en/firefox/come-back-to-firefox/

### Mozilla Festival 2026 (Barcelona) / Mozilla Builders events (2026)

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.

How the system shows: Grassroots end: the Builders registration desk uses a giant 'Builders' wordmark in Mozilla Headline on black, a repeating 'Mozilla' type wall, and a tall green panel; the 'Codebase' zine floods green with pixel-art dino; the poster sets all-caps green type over photography. MozFest band on mozilla.org sits on Pink +1.
Why it works: Shows the spectrum working: the same faces and green go loud for community without breaking the Governments end used on policy pages.
Channels: event, signage, web, print, merch. Source: https://brand.mozilla.com/document/231#/-/brand-in-action

## Applications

| Format | What | 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. | https://brand.mozilla.com/document/231#/-/brand-in-action |
| 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. | https://brand.mozilla.com/document/231#/-/brand-in-action |
| 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. | https://brand.mozilla.com/document/231#/-/brand-in-action |
| website | Mozilla Builders, Mozilla AI and Mozilla New Products websites (listed by alt text). | https://brand.mozilla.com/document/231#/-/brand-in-action |
| print | Builders zine 'Codebase' on full green with pixel dino and 3D bitmap illustration; Builders event poster with all-caps green type over photography. | https://brand.mozilla.com/document/231#/-/brand-in-action |
| merch | Black sweatshirt with the wordmark in green; water bottle; MozWeek Dublin thermos; badge and lanyard; wristbands; neon mascot. | https://brand.mozilla.com/document/231#/-/brand-in-action |
| social | Social posts about AI and about open source (listed by alt text; images lazy-loaded, not inspected). | https://brand.mozilla.com/document/231#/-/brand-in-action |
| 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. | https://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). | https://brand.mozilla.com/document/231#/-/new-products-toolkit |

## By format

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. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Deck | 2 | Black and white slides, left-aligned Headline, green only on the ask | one illustration style for the whole deck |
| Landing page | 1 | 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 | 1 | Governments end: 45/45/10, underlined headline link as the next step | a pixel-framed photo at the top |
| Ad | 3 | Headline in strong black or white, logo in a corner | a hero Pixelgram |
| Social post | 5 | Grassroots: 60% color, black or white fields between pops | multi-pop color and Bitmap illustration |
| Email | 1 | Black and white, one green button | none |
| Error message | 0 | Plain language, black on white, no pixel effects | none |

## Checks before anything ships

- **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.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Mozilla's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- 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

Logos and reference images belong to Mozilla. Look at them on Mozilla's own pages; don't reuse them.