# Mozilla

> `mozilla@1.0.0`

Mozilla is the foundation and corporation behind Firefox, steward of an independent, privacy-respecting open web. The brand voice is mission-driven and direct: human rights on the internet are not negotiable. The visual identity carries two layers — Mozilla corporate (near-black wordmark with the trailing "://" expressive colon, on a near-black canvas) and the Firefox sub-brand (the fox-and-globe mark, anchored on Firefox Orange #FF7139 with the supporting yellow, red, blue, and purple from the flame gradient and product family).


**Tags:** `mozilla`, `firefox`, `browser`, `foundation`, `open-source`, `dark-first`, `privacy`

## Atoms

### Palette

**Mozilla** · `mozilla@1.0.0` · Proprietary — All Rights Reserved

> Mozilla brand palette covering both the corporate Mozilla identity (Mozilla black wordmark with the trailing colon — :: — colored expression on a near-black canvas) and the Firefox sub-brand's signature gradient anchored on Firefox Orange (#FF7139). The palette captures Mozilla's open-web brand voice: dark canvas, expressive accent, restrained neutrals. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **Source Code Pro** `(source-code-pro@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `mozilla-black` | Mozilla Black | `#161616` |
| `firefox-orange` | Firefox Orange | `#FF7139` |
| `firefox-red` | Firefox Red | `#E66000` |
| `firefox-yellow` | Firefox Yellow | `#FFCB39` |
| `firefox-blue` | Firefox Blue | `#0060DF` |
| `firefox-purple` | Firefox Purple | `#9059FF` |
| `mozilla-dark-canvas` | Mozilla Dark Canvas | `#0C0C0D` |
| `mozilla-charcoal` | Mozilla Charcoal | `#252525` |
| `mozilla-gray` | Mozilla Gray | `#737373` |
| `mozilla-light-gray` | Mozilla Light Gray | `#D7D7DB` |
| `mozilla-off-white` | Mozilla Off-White | `#F9F9FA` |
| `mozilla-white` | Mozilla White | `#FFFFFF` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `mozilla-white` | `#FFFFFF` |
| `surface` | `mozilla-off-white` | `#F9F9FA` |
| `surface-elevated` | `mozilla-white` | `#FFFFFF` |
| `text-primary` | `mozilla-black` | `#161616` |
| `text-secondary` | `mozilla-gray` | `#737373` |
| `text-tertiary` | `firefox-red` | `#E66000` |
| `primary` | `mozilla-black` | `#161616` |
| `primary-hover` | `firefox-red` | `#E66000` |
| `accent` | `firefox-orange` | `#FF7139` |
| `accent-hover` | `firefox-red` | `#E66000` |
| `warning` | `firefox-yellow` | `#FFCB39` |
| `warning-hover` | `firefox-orange` | `#FF7139` |
| `error` | `firefox-red` | `#E66000` |
| `success` | `firefox-blue` | `#0060DF` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `mozilla-dark-canvas` | `#0C0C0D` |
| `surface` | `mozilla-black` | `#161616` |
| `surface-elevated` | `mozilla-charcoal` | `#252525` |
| `text-primary` | `mozilla-white` | `#FFFFFF` |
| `text-secondary` | `mozilla-light-gray` | `#D7D7DB` |
| `text-tertiary` | `firefox-orange` | `#FF7139` |
| `primary` | `firefox-orange` | `#FF7139` |
| `primary-hover` | `firefox-yellow` | `#FFCB39` |
| `accent` | `firefox-purple` | `#9059FF` |
| `accent-hover` | `firefox-blue` | `#0060DF` |
| `warning` | `firefox-yellow` | `#FFCB39` |
| `warning-hover` | `firefox-orange` | `#FF7139` |
| `error` | `firefox-red` | `#E66000` |
| `success` | `firefox-blue` | `#0060DF` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `identity` | `mozilla-black` | `#161616` |
| `on-identity` | `mozilla-white` | `#FFFFFF` |
| `primary` | `mozilla-black` | `#161616` |
| `primary-hover` | `firefox-red` | `#E66000` |
| `accent` | `firefox-orange` | `#FF7139` |
| `accent-hover` | `firefox-red` | `#E66000` |
| `background` | `mozilla-white` | `#FFFFFF` |
| `surface` | `mozilla-off-white` | `#F9F9FA` |
| `text-primary` | `mozilla-black` | `#161616` |
| `text-secondary` | `mozilla-gray` | `#737373` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (5)

#### `forbiddenTreatment` → `logo`

- **treatments:** wordmark-modified, colon-detached, flame-shape-modified, recolored, rotated, stretched, drop-shadow

> The Mozilla wordmark integrates the "://" character into the typography — detaching, recoloring, or altering it breaks the brand expression. The Firefox flame mark is defined by its specific silhouette and the orange-yellow gradient; altering either is not permitted. 

#### `colorChoice` → `roles.colors.identity`

- **allowed:** mozilla-black, firefox-orange
- **forbidden:** firefox-yellow, firefox-purple, firefox-blue

> The Mozilla corporate identity color is Mozilla Black; the Firefox sub-brand's primary is Firefox Orange. The supporting Firefox hues (yellow, purple, blue) carry product or accent semantics and must not stand in as the brand identity. 

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> Mozilla Black (#161616) on Mozilla White exceeds 17:1 — well above the WCAG AA threshold for body text. 

#### `accessibilityRequirement` → `*`

- **standard:** `WCAG-AA`
- **criterion:** `1.4.3`

> WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. Mozilla's privacy- and accessibility-first mission is reinforced by AA compliance on all consumer surfaces. 

#### `contextRestriction` → `trademark.use`

- **forbiddenContexts:** product-name-prefix, implied-endorsement, browser-extension-marketing-without-approval

> Mozilla's trademark policy forbids product names that imply Mozilla or Firefox endorsement, and reserves the use of the Firefox mark in extension marketing for add-ons published through addons.mozilla.org or with prior approval. 

### ⚠️ warning (2)

#### `variantSelection` → `roles.colors.identity`

- **use:** `firefox-orange`
- **when:** `subbrand="firefox"`

> When expressing the Firefox sub-brand specifically (the browser product, the developer relations surface, the Firefox Acorn design system), Firefox Orange (#FF7139) takes the identity role in place of Mozilla Black. 

#### `contrastRatio` → `roles.colors.accent`

- **against:** `background`
- **minRatio:** `3`
- **standard:** `WCAG-AA-large`

> Firefox Orange (#FF7139) on White sits around 3.3:1 — clears AA-large for headlines but does NOT clear AA for body text. Reserve the orange for large display, the mark fill, and accent use; for body-text foreground, use Firefox Red (#E66000) which clears AA at ~4.5:1. 

### 💡 recommendation (2)

#### `compositionConstraint` → `roles.colors.accent`

- **pairsWith:** firefox-yellow, firefox-red

> The Firefox flame is the canonical orange-yellow-red gradient. Pairing Firefox Orange with its companion yellow and red preserves the brand's documented gradient expression; substituting unrelated hues breaks it. 

#### `fontPairing` → `typography.heading`

- **requires:** `body`
- **minSizeRatio:** `1.5`

> Mozilla and Firefox surfaces use a humanist sans for both heading and body. Maintain at least a 1.5× heading-to-body ratio to preserve hierarchy. 

## Provenance

- **Source:** <https://brand.mozilla.com/>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Mozilla and Firefox are trademarks of the Mozilla Foundation, used by the Mozilla Corporation. Brand colors documented here are the values published on the Mozilla Brand Portal (brand.mozilla.com) and verified against the simple-icons project: Mozilla Black #161616 (corporate near-black); Firefox Orange #FF7139 (the flame mark primary). The Mozilla and Firefox marks are not redistributed by this atom. 
- **Imported:** `2026-05-18`
- **Notes:** Mozilla and Firefox share a brand ecosystem but maintain distinct expressions. The Mozilla corporate mark is the "::" wordmark on near-black; the Firefox product mark is the fox-circling-globe on the orange-yellow flame gradient. This atom encodes both layers: `identity` points at Mozilla Black (the corporate canvas), while the supporting palette carries the full Firefox flame gradient and product family. 

---

*Generated by the brand-atoms converter. Source: `mozilla@1.0.0` from the encyclopedia.*