Mozilla Brand Design System Analysis

1. Brand Overview

Mozilla’s design language is unapologetically functional. This is not a "throw gradients everywhere" kind of brand. The website at mozilla.org is stripped back, deliberate, and human. It feels like it’s designed to earn trust, not to sell you something flashy. That makes sense — Mozilla’s mission is about open web standards, privacy, and user control. The design reflects that ethos.

The vibe is stark: heavy use of black and white, with microbursts of high-saturation green (#00d230) and deep blue (#005fcc) for accents. No pastel distractions. It’s a color system that says "we’re serious" but still has energy when you interact with it.

Typography is custom — Mozilla Headline and Mozilla Text — tuned for clarity, boldness, and a kind of editorial authority. Headings are big and confident, body copy is readable and neutral. They’re not afraid of very large headlines (128px H1), which feels almost print-like in its scale.

Spacing is built on an 8px grid. The whole UI snaps to that rhythm — from button padding (8px) to section gaps (64px). The result is consistent vertical rhythm without arbitrary spacing decisions.

The components are flat. Borders are used for definition, shadows are rare and subtle. Buttons and inputs are rectangular with 0px border radius most of the time, occasionally 4px or 16px on specific elements, but no pill shapes or overly rounded corners.

If you’re building for Mozilla, the guiding principle is: high contrast, no fluff, straight talk. Everything is intentional. Nothing is decorative without purpose. This is a design system for a brand that values transparency and control.

2. Color System

2.1 Primary Colors

Mozilla’s primary is actually white (#ffffff) in semantic terms. That’s unusual. It reflects the heavy use of white text and backgrounds in their inverse/dark layouts. The semantic secondary is fully transparent — used for clear UI layers and invisible backgrounds.

The real "functional primary" in visual terms is black (#000000), which dominates text, logos, and UI outlines. The high-saturation #00d230 green is a secondary accent — used for interactive states, highlights, and to inject life into the monochrome base.

This works because black and white give maximum contrast, and the green pops without being overused. Competitors like Google lean on blue as their anchor; Mozilla’s green choice makes them feel more activist and eco-conscious.

2.2 Complete Palette

2.3 Color Relationships

Black (#000000) and white (#ffffff) are the foundation — ideal WCAG AAA contrast when paired. Even off-white #fafafa against black maintains high accessibility.

Accent green (#00d230) against black has sufficient contrast for interactive elements (contrast ratio ~3.8:1, borderline for small text but fine for buttons). Against white, the green is extremely visible.

Transparent variants of green are used for overlays and focus rings — these don’t need to meet text contrast because they’re non-text decoration.

Dark mode is simple: invert black and white, keep accents intact.

2.4 Usage Guide

• Primary text: #000000 on light backgrounds, #ffffff on dark
• Accents: Use #00d230 sparingly — CTAs, highlights, success messages
• Links: White on dark backgrounds, black on light; hover states adjust to maintain contrast
• Avoid: Using green for body text — it’s a brand signal, not a reading color
• Backgrounds: #fafafa for soft sections, #000000 for inverse modules

3. Typography

3.1 Font Families

Mozilla uses two custom families:

• Mozilla Headline — bold, geometric, sans-serif. Fallbacks: Helvetica Neue, Arial, X-LocaleSpecific
• Mozilla Text — readable sans-serif for body. Fallbacks: Inter, Helvetica Neue, Arial, X-LocaleSpecific or Helvetica Neue, Arial, X-LocaleSpecific depending on context.

No Google Fonts or Adobe Fonts — this is custom hosted. No variable fonts detected.

3.2 Type Scale

3.3 Hierarchy

Massive H1 sizes (128px, 80px) make headlines feel like print mastheads — strong editorial vibe. The step-down to 48px and 38px is smooth, with consistent weight (600) to keep headings assertive.

Body sizes (16px, 18px) are generous for readability, with comfortable line heights (1.25–1.5). Buttons often use 12px or 16px bold weights — functional, no-nonsense.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Common values:

4.2 Layout

Breakpoints:

• 320px — mobile small
• 480px — mobile large
• 600px — small tablet
• 768px — tablet
• 1023px — tablet landscape
• 1024px — desktop small
• 1312px — desktop medium
• 1440px — desktop large

The system scales predictably — no weird jumps. Content likely maxes around 1440px.

5. Visual Elements

Border Radius

Mostly square corners (0px) — 4px is the "soften" radius for small UI, 16px for occasional rounded modules.

Shadows

Rare. Examples:

• rgba(29, 17, 51, 0.04) 0px 6px 6px 1px, rgba(9, 32, 77, 0.12) 0px 8px 8px 2px, rgba(29, 17, 51, 0.12) 0px 5px 5px -3px — subtle multi-layer shadow
• rgba(29, 17, 51, 0.25) 0px 5px 16px 2px — slightly stronger depth
• Often, no shadow at all — flat UI

Borders

Frequent use of solid borders, especially black and white 2px lines. Borders define elements instead of shadows.

6. Components

6.1 Buttons

Variant: Pencil Banner Close (m24-pencil-banner-close)

• Default: transparent background, black text, 8px padding, 0px radius, 2px transparent border
• Hover: black background, white text
• Active: dark-mid-gray background, white text
• Focus: black background, white text, 2px blue (rgba(0, 144, 237, 0.5)) outline

Variant: Flag Button (m24-c-flag-button)

• Default: #161616 background, white text, 8px padding, 0px radius, 1px #414141 border
• Hover: black background, white text
• Active: dark-mid-gray background, white text
• Focus: black background, white text, 2px blue outline

6.2 Links

• Black links: underline, weight 900, hover keeps underline
• White links: underline, weight 600, hover switches to black — inverse pattern

6.3 Forms

Email input

• Default: #414141 background, white text, 2px white border, 0px radius, 8px padding
• Focus: black background, white text, border-color #42425A, 2px pinkish shadow (rgba(255, 79, 94, 0.5))

Select

• Default: #161616 background, #fafafa text, 2px #fafafa border, padding 8px 40px 8px 36px
• Focus: black background, white text, border-color #42425A, same pinkish shadow

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-off-white: #fafafa;
  --color-dark-gray: #161616;
  --color-mid-gray: #414141;
  --color-green: #00d230;
  --color-blue: #005fcc;
  --color-white: #ffffff;
  --link-color-hover-inverse: #d6ffcd;
  --link-color-visited-hover: #022611;
  --background-color-inverse: #000000;

  /* Typography */
  --font-mozilla-headline: "Mozilla Headline", Helvetica Neue, Arial, X-LocaleSpecific;
  --font-mozilla-text: "Mozilla Text", Helvetica Neue, Arial, X-LocaleSpecific;
  --font-mozilla-text-inter: "Mozilla Text", Inter, Helvetica Neue, Arial, X-LocaleSpecific;

  /* Spacing */
  --space-1: 1px;
  --space-4: 4px;
  --space-8: 8px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 16px;
  --radius-none: 0px;

  /* Shadows */
  --shadow-soft: rgba(29, 17, 51, 0.04) 0px 6px 6px 1px, rgba(9, 32, 77, 0.12) 0px 8px 8px 2px, rgba(29, 17, 51, 0.12) 0px 5px 5px -3px;
  --shadow-medium: rgba(29, 17, 51, 0.25) 0px 5px 16px 2px;
  --shadow-alt: rgba(29, 17, 51, 0.04) 0px 0px 6px 1px, rgba(9, 32, 77, 0.12) 0px 0px 8px 2px, rgba(29, 17, 51, 0.12) 0px 0px 5px -3px;
}

8. AI Coding Assistant Prompt

# Mozilla Design System Specification

You are a Mozilla design expert. Build UIs matching their visual language exactly.

## Brand Context
Mozilla values transparency, user control, and open web standards. The design is stark, high-contrast, with minimal decoration. Components are functional, typography is bold and clear, and spacing is consistent.

## Color Palette
- Black: #000000 — Primary text, logo, borders
- Off White: #fafafa — Background sections
- Dark Gray: #161616 — UI background, buttons
- Mid Gray: #414141 — Borders, input backgrounds
- Green: #00d230 — Accent for CTAs, focus
- Green Transparent: #00d230 — Hover/focus overlays
- Blue: #005fcc — Hover/focus highlight
- White: #ffffff — Text on dark backgrounds
- Link Hover Inverse: #d6ffcd — Link hover on dark
- Link Visited Hover: #022611 — Link visited hover
- Inverse Background: #000000 — Dark mode container

## Typography
- Headings: "Mozilla Headline", Helvetica Neue, Arial, X-LocaleSpecific
- Body: "Mozilla Text", Helvetica Neue, Arial, X-LocaleSpecific
- Alternate Body: "Mozilla Text", Inter, Helvetica Neue, Arial, X-LocaleSpecific

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 128px | 600 | 1.00 | Banner titles |
| H1 | 80px | 600 | 1.00 | Hero headings |
| H1 | 48px | 600 | 1.10 | Section titles |
| ... | ... | ... | ... | ... |

## Spacing & Grid
Base: 8px. Scale: 1px, 4px, 8px, 16px, 24px, 32px, 64px, 96px, 128px
- Buttons: 8px padding
- Cards: 24px padding
- Sections: 32px–64px gaps

## Border Radius
- none: 0px — most components
- sm: 4px — buttons, small divs
- md: 16px — occasional rounded modules

## Shadows & Depth
Mostly flat. Rare soft shadows:
- Soft: rgba(29, 17, 51, 0.04) 0px 6px ...
- Medium: rgba(29, 17, 51, 0.25) 0px 5px ...

## Component Specifications

### Primary Button (Pencil Banner Close)
Default:
- background: transparent
- color: #000000
- padding: 8px
- border: 2px solid transparent
Hover:
- background: #000000
- color: #ffffff
Active:
- background: var(--m24-dark-mid-gray)
Focus:
- background: #000000
- color: #ffffff
- box-shadow: rgba(0,144,237,0.5) 0px 0px 0px 2px

### Secondary Button (Flag Button)
Default:
- background: #161616
- color: #ffffff
- border: 1px solid #414141
Hover: same as primary hover
Focus: same focus outline

### Input Field (Email)
Default:
- background: #414141
- color: #ffffff
- border: 2px solid #ffffff
Focus:
- border-color: #42425A
- box-shadow: rgba(255,79,94,0.5) 0px 0px 0px 2px

## Layout & Responsive Rules
Breakpoints: 320px, 480px, 600px, 768px, 1023px, 1024px, 1312px, 1440px

## Interaction Rules
- Transition timing: 150ms ease for state changes
- Focus indicators: 2px outline or shadow

## DO List
- Use ONLY colors from the palette
- Maintain 8px grid spacing
- Use Mozilla Headline for headings, Mozilla Text for body
- Keep borders solid, 1–2px
- Use hover states to change background and text color

## DON'T List
- Don't use arbitrary shadows
- Don't mix rounded and sharp corners
- Don't invent new accent colors
- Don't remove focus indicators

## Code Examples

### Primary Button
```css
.btn-primary {
  background: transparent;
  color: #000;
  padding: 8px;
  border: 2px solid transparent;
  font-family: var(--font-mozilla-text);
  font-size: 16px;
  font-weight: 400;
}
.btn-primary:hover {
  background: #000;
  color: #fff;
}
.btn-primary:focus {
  box-shadow: rgba(0,144,237,0.5) 0 0 0 2px;
}

Secondary Button

.btn-secondary {
  background: #161616;
  color: #fff;
  padding: 8px;
  border: 1px solid #414141;
  font-size: 12px;
  font-weight: 600;
}

Input Field

.input-email {
  background: #414141;
  color: #fff;
  border: 2px solid #fff;
  padding: 8px;
}
.input-email:focus {
  border-color: #42425A;
  box-shadow: rgba(255,79,94,0.5) 0 0 0 2px;
}

---

## 9. Summary

**TL;DR** — Mozilla’s design system is black-and-white heavy with sharp corners, bold typography, and strict 8px spacing. Accents in green and blue are functional, not decorative. Borders define components; shadows are rare.

**Brand Keywords**:
- high-contrast-functional
- activist-minimalist
- bold-editorial
- trust-first