W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Mozilla
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).
1 palette 3 fonts 0 assets 9 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/mozilla/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/mozilla/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Mozilla
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 · [email protected] · 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 ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
Source Code Pro ([email protected]) |
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:
identitypoints 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: [email protected] from the encyclopedia.
Components — same template, themed by Mozilla
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Mozilla
A clear hierarchy in Mozilla's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ firefox-orange #FF7139 accent-hover
→ firefox-red #E66000 background
→ mozilla-white #FFFFFF identity
→ mozilla-black #161616 on-identity
→ mozilla-white #FFFFFF primary
→ mozilla-black #161616 primary-hover
→ firefox-red #E66000 surface
→ mozilla-off-white #F9F9FA text-primary
→ mozilla-black #161616 text-secondary
→ mozilla-gray #737373 Typography
code
→ mono Source Code Pro display
→ heading Inter prose
→ body Inter Palette mode mappings (from mozilla)
Light mode (14 roles)
accent
→ firefox-orange accent-hover
→ firefox-red background
→ mozilla-white error
→ firefox-red primary
→ mozilla-black primary-hover
→ firefox-red success
→ firefox-blue surface
→ mozilla-off-white surface-elevated
→ mozilla-white text-primary
→ mozilla-black text-secondary
→ mozilla-gray text-tertiary
→ firefox-red warning
→ firefox-yellow warning-hover
→ firefox-orange Dark mode (14 roles)
accent
→ firefox-purple accent-hover
→ firefox-blue background
→ mozilla-dark-canvas error
→ firefox-red primary
→ firefox-orange primary-hover
→ firefox-yellow success
→ firefox-blue surface
→ mozilla-black surface-elevated
→ mozilla-charcoal text-primary
→ mozilla-white text-secondary
→ mozilla-light-gray text-tertiary
→ firefox-orange warning
→ firefox-yellow warning-hover
→ firefox-orange Rules (9 typed constraints)
error · 5 rules
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 rules
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 rules
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.