Firefox Brand Design System Deep-Dive

1. Brand Overview

Firefox’s visual language is consistent with its product ethos: open, privacy-focused, and user-friendly, but not sterile. The design feels human tech—serious enough to be trusted, friendly enough to be approachable. Mozilla has been moving away from skeuomorphism and heavy gradients for years, and here, the interface is crisp, flat, and color-driven.

The brand identity leans on a strong primary blue (#0060df) for interaction states—clean, high-contrast against white backgrounds—and a deep charcoal (#42414d) for grounding. The blue is not the hyper-aggressive neon of some tech brands; it’s a confident, saturated mid-tone that still feels accessible.

Typography is custom: Mozilla Headline and Mozilla Text. Both are modern sans-serifs with subtle quirks. Headline is heavier, more geometric—used for high-level headings. Text is softer, more readable—used for body copy and UI text. There are no external Google or Adobe font dependencies, which suggests Mozilla controls rendering and licensing tightly.

Layout-wise, Firefox stays on an 8px spacing grid, with occasional 4px adjustments for tight UI elements. Breakpoints are thoughtful, keeping content readable across devices: small screens break at 479px/480px, mid-tier tablets at 767px/768px, desktop shifts at 1023px/1024px, and there’s a large-screen breakpoint at 1312px.

Overall, the design is functional, legible, and built for global use. They avoid over-designed elements: buttons are flat, shadows are subtle and rare, borders are clean. This works because Firefox’s brand is about trust and clarity—not visual gimmicks.

2. Color System

2.1 Primary Colors

The main brand color: Blue (#0060df). This is the action color—used for CTA buttons, key links, and interactive highlights. Blue in branding signals trust, reliability, and technology. Competitors like Chrome lean on multi-color logos but use simpler blues in UI. Safari uses a lighter blue, almost pastel; Firefox’s choice is richer, more assertive.

The secondary semantic color is White (#ffffff), used for backgrounds and primary text on dark surfaces.

2.2 Complete Palette

Color Name / Role	Hex	Usage
Charcoal UI (`rgb(66,65,77)`)	#42414d	Button text, headings, body text on light backgrounds
White (`rgb(255,255,255)`)	#ffffff	Backgrounds, text on dark surfaces
Black (`rgb(0,0,0)`)	#000000	Text, borders, outlines
Primary Blue (`rgb(0,96,223)`)	#0060df	CTAs, primary links, navigation logo highlight
Light Grey (`rgb(191,191,201)`)	#bfbfc9	Footer text, language switcher links
Deep Grey (`rgb(22,22,22)`)	#161616	Menu item text, dark backgrounds
Deep Purple (`rgb(32,18,58)`)	#20123a	Accent backgrounds
Mid Grey (`rgb(179,179,179)`)	#b3b3b3	Footer, secondary text
Cyan Tint (`rgb(128,235,255)`)	#80ebff	Accent, highlight states
Dark Blue Hover (`rgb(2,80,187)`)	#0250bb	Hover/focus states for primary actions

2.3 Color Relationships

Contrast is generally strong: blue (#0060df) on white passes WCAG AA easily for normal text. Charcoal (#42414d) on white is comfortably readable. White on deep grey (#161616) is high contrast.

Dark mode elements use inverted colors: #000 backgrounds, #f4f4f4 text from CSS variables. The link hover inverse (#d6ffcd) is a pale green—interesting choice, possibly hinting at Firefox’s environmental initiatives.

2.4 Usage Guide

Primary Blue: Use exclusively for interactive elements. Don’t use it for static headings—keeps the action affordance clear.
Charcoal & Black: For text on light backgrounds. Charcoal feels softer than pure black, good for body copy.
Light Grey: For secondary UI text—avoid on primary content; it’s too low contrast.
Deep Purple: Rare—use for special sections or brand visuals.
Cyan Tint: Works well as hover effects but avoid using for text—contrast is poor on white.
Avoid mixing Deep Grey (#161616) with Charcoal in the same UI section—it muddies the hierarchy.

3. Typography

3.1 Font Families

Mozilla Headline — fallback: Helvetica Neue, Arial, X-LocaleSpecific. Used for headings, hero text.
Mozilla Text — fallback: Helvetica Neue, Arial, X-LocaleSpecific or Inter, Helvetica Neue, Arial, X-LocaleSpecific in some contexts. Used for body, links, and buttons.

No Google Fonts or Adobe Fonts. No variable fonts detected. This is controlled, predictable rendering.

3.2 Type Scale

Element Context	Font Family	Size px/rem	Weight	Line Height	Spacing
heading-1	Mozilla Headline	48px / 3rem	600	1.10	-0.48px
heading-1	Mozilla Text	48px / 3rem	400	1.10	null
link	Mozilla Text	48px / 3rem	700	1.10	null
heading-1	Mozilla Headline	40px / 2.5rem	400	1.10	-0.4px
heading-1	Mozilla Headline	38px / 2.38rem	400	1.10	-0.38px
link	Mozilla Text	28px / 1.75rem	700	1.10	null
link	Mozilla Headline	28px / 1.75rem	700	1.10	-0.48px
heading-1	Mozilla Headline	24px / 1.5rem	600	1.10	-0.24px
heading-1	Mozilla Text	24px / 1.5rem	400	1.20	null
heading-1	Mozilla Text	24px / 1.5rem	700	1.20	-0.24px
heading-1	Mozilla Headline	18px / 1.13rem	400	1.10	-0.18px
heading-1	Mozilla Headline	18px / 1.13rem	600	1.10	-0.18px
heading-1	Mozilla Text	16px / 1rem	400	1.50	null
button	Mozilla Text	16px / 1rem	700	1.50	null
link	Mozilla Text	16px / 1rem	400	1.20	null
link	Mozilla Text	16px / 1rem	600	1.20	null
heading-1	Mozilla Text	16px / 1rem	700	1.00	null
link	Mozilla Text	16px / 1rem	700	1.20	null
heading-1	Mozilla Text	16px / 1rem	400	1.10	-0.16px
heading-1	Mozilla Text	16px / 1rem	700	1.20	-0.16px
heading-1	Mozilla Text	16px / 1rem	600	1.20	-0.16px
link	Mozilla Text	16px / 1rem	600	1.20	-0.16px
link	Mozilla Text	14px / 0.88rem	400	1.20	null
link	Mozilla Text	12px / 0.75rem	400	1.20	null

3.3 Hierarchy

The typography scale is tight—small increments between heading levels keep visual rhythm. Headings rarely exceed 48px, which maintains balance on mobile. Line heights are mostly 1.10 for headings—compact, making them feel bold. Body text has more breathing room (1.50).

4. Spacing & Layout

4.1 Spacing Scale

Firefox runs an 8px base grid. Common values:

px	rem	Count	Usage Example
1	0.06rem	68	Hairline borders, fine adjustments
3	0.19rem	4	Icon spacing
6	0.38rem	28	Button vertical padding
8	0.50rem	35	Small gaps
10	0.63rem	8	Input padding
12	0.75rem	1	Rare—possibly icon container
16	1.00rem	63	Base body spacing
20	1.25rem	26	Section padding
24	1.50rem	22	Card padding
32	2.00rem	10	Large gaps
48	3.00rem	1	Hero text spacing
60	3.75rem	6	Major section gaps
64	4.00rem	9	Hero padding
80	5.00rem	5	Page section spacing
86	5.38rem	3	Rare—image padding
88	5.50rem	1	Large hero gaps
96	6.00rem	19	Major vertical spacing

4.2 Layout

Breakpoints:

Mobile: 479px / 480px
Tablet: 600px, 767px / 768px
Desktop: 1023px / 1024px
Large: 1312px

These are non-standard pairs—likely separate min/max break conditions for nuanced responsive changes.

5. Visual Elements

Border Radius:

0px 0px 8px 8px — bottom-rounded containers
4px — buttons, small UI elements
16px — rare, maybe cards
60px — large pill shapes

Shadows: Sparse. Mostly multi-layer subtle shadows with low opacity—used sparingly.

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

Borders: Clean, 2px solid rgb(0,0,0) or light grey rgb(232,232,232). No ornate styles—functional only.

6. Components

6.1 Buttons

Primary Button (mzp-c-button):

Default:

Background: #0060df
Text: #ffffff
Padding: 6px 24px
Border radius: 4px
Border: 2px solid rgba(0,0,0,0)
Font weight: 700
Font size: 16px

Hover:

Text: rgb(231,223,255)
Background: #fafafa

Active:

Text: rgb(231,223,255)
Background: #ededf0

Focus:

Box-shadow: rgba(0,144,237,0.5) 0px 0px 0px 2px
Outline: 1px dotted #000
Border: 1px solid

6.2 Links

Multiple link styles:

Blue links: Default #0060df, underline; hover #aaf2ff.
Dark text links: #161616 no underline; hover #aaf2ff underline.
White links: #ffffff underline; hover #aaf2ff.
Charcoal links: #42414d no underline; hover #aaf2ff.
Light grey links: #bfbfc9 underline; hover #aaf2ff.

6.3 Forms

Select:

Default: Background #161616, text #fafafa, border 2px solid #fafafa, radius 0px, padding 8px 40px 8px 36px.
Focus: Background #fafafa, text #000, border color #42425a, box-shadow rgba(255,79,94,0.5) 0px 0px 0px 2px.

6.4 Cards

No explicit card data, but shadow values suggest minimal depth, with padding at 24px or 32px.

7. Design Tokens (CSS Custom Properties)

:root {
  /* Colors */
  --color-charcoal-ui: #42414d;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary-blue: #0060df;
  --color-light-grey: #bfbfc9;
  --color-deep-grey: #161616;
  --color-deep-purple: #20123a;
  --color-mid-grey: #b3b3b3;
  --color-cyan-tint: #80ebff;
  --color-dark-blue-hover: #0250bb;

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

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-60: 60px;
  --space-64: 64px;
  --space-80: 80px;
  --space-86: 86px;
  --space-88: 88px;
  --space-96: 96px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 60px;

  /* Shadows */
  --shadow-1: 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-2: rgba(29, 17, 51, 0.25) 0px 5px 16px 2px;
}

8. AI Coding Assistant Prompt

# Firefox Design System Specification

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

## Brand Context
Firefox’s design is clean, flat, and color-driven. It values clarity, trust, and accessibility over decoration. Typography is custom, spacing is on an 8px grid, and components are consistent across breakpoints.

## Color Palette
- Charcoal UI: #42414d — button text, headings, body text on light backgrounds
- White: #ffffff — backgrounds, text on dark surfaces
- Black: #000000 — text, borders, outlines
- Primary Blue: #0060df — CTAs, primary links, navigation logo highlight
- Light Grey: #bfbfc9 — footer text, language switcher links
- Deep Grey: #161616 — menu item text, dark backgrounds
- Deep Purple: #20123a — accent backgrounds
- Mid Grey: #b3b3b3 — footer, secondary text
- Cyan Tint: #80ebff — accent, highlight states
- Dark Blue Hover: #0250bb — hover/focus states for primary actions

## Typography
Fonts:
- Headings: "Mozilla Headline", Helvetica Neue, Arial, X-LocaleSpecific
- Body/UI: "Mozilla Text", Helvetica Neue, Arial, X-LocaleSpecific

Sizes:
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 48px | 600 | 1.10 | Page titles |
| H1 light | 48px | 400 | 1.10 | Hero headings |
| Link large | 48px | 700 | 1.10 | Promo links |
| H2 | 40px | 400 | 1.10 | Section headings |
| H3 | 38px | 400 | 1.10 | Sub-headings |
| Link medium | 28px | 700 | 1.10 | Large navigation links |
| H4 | 24px | 600 | 1.10 | Card titles |
| Body large | 24px | 400 | 1.20 | Lead paragraphs |
| H4 bold | 24px | 700 | 1.20 | Emphasis headings |
| Small heading | 18px | 400 | 1.10 | Labels |
| Small heading bold | 18px | 600 | 1.10 | UI section titles |
| Body | 16px | 400 | 1.50 | Paragraphs |
| Button | 16px | 700 | 1.50 | Button text |
| Link small | 16px | 400 | 1.20 | Inline links |
| Link bold | 16px | 600 | 1.20 | Emphasis links |
| Caption | 14px | 400 | 1.20 | Captions |
| Micro | 12px | 400 | 1.20 | Legal text |

## Spacing & Grid
Base: 8px grid
Scale: 1px, 3px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px, 48px, 60px, 64px, 80px, 86px, 88px, 96px
Usage:
- Button padding: 6px vertical
- Card padding: 24px
- Section gaps: 60px–96px

## Border Radius
- none: 0 — flat containers
- sm: 4px — buttons, small inputs
- md: 8px — bottom corners for containers
- lg: 16px — cards
- pill: 60px — pill-shaped elements

## Shadows & Depth
- Layered subtle shadow: rgba(29,17,51,0.04)... — cards, modals
- Medium shadow: rgba(29,17,51,0.25)... — hover elevation

## Component Specifications

### Primary Button
Default:
- background: #0060df
- color: #ffffff
- padding: 6px 24px
- border-radius: 4px
- border: 2px solid transparent
- font-weight: 700
- font-size: 16px

Hover:
- color: rgb(231,223,255)
- background: #fafafa

Active:
- color: rgb(231,223,255)
- background: #ededf0

Focus:
- box-shadow: rgba(0,144,237,0.5) 0px 0px 0px 2px
- outline: 1px dotted #000
- border: 1px solid

### Link Styles
- Blue link: default #0060df underline, hover #aaf2ff underline
- Dark text link: #161616 no underline, hover #aaf2ff underline
- White link: #ffffff underline, hover #aaf2ff underline

### Input Fields (Select)
Default:
- background: #161616
- color: #fafafa
- border: 2px solid #fafafa
- radius: 0px
- padding: 8px 40px 8px 36px

Focus:
- background: #fafafa
- color: #000
- border-color: #42425a
- box-shadow: rgba(255,79,94,0.5) 0px 0px 0px 2px

## Layout & Responsive Rules
Breakpoints:
- Mobile: <480px
- Tablet: 600–768px
- Desktop: >1024px
- Large: >1312px

## Interaction Rules
- Transition: 150ms ease for state changes
- Focus indicators: visible outlines
- Hover states: color shifts only

## DO List
- Use ONLY colors from the palette
- Stick to 8px grid for spacing
- Use Mozilla Headline for headings
- Keep buttons flat—no gradients
- Maintain strong contrast for text

## DON'T List
- Don’t use unapproved colors
- Don’t mix rounded and sharp corners in the same element
- Don’t add drop shadows to buttons
- Don’t reduce contrast below WCAG AA

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #0060df;
  color: #ffffff;
  padding: 6px 24px;
  border-radius: 4px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 16px;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #fafafa;
  color: rgb(231,223,255);
}
.btn-primary:focus {
  box-shadow: rgba(0,144,237,0.5) 0 0 0 2px;
  outline: 1px dotted #000;
}
```

Card:
```css
.card {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 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;
}
```

Select Input:
```css
.select {
  background: #161616;
  color: #fafafa;
  border: 2px solid #fafafa;
  padding: 8px 40px 8px 36px;
  border-radius: 0;
}
.select:focus {
  background: #fafafa;
  color: #000;
  border-color: #42425a;
  box-shadow: rgba(255,79,94,0.5) 0 0 0 2px;
}
```

9. Summary

TL;DR — Firefox’s design system is clean, flat, and color-led. Blue (#0060df) drives interaction, typography is custom and controlled, and spacing sticks religiously to an 8px grid. Shadows are rare; borders and color shifts define states.

Brand Keywords:

trust-driven
tech-accessible
flat-interactive
open-minimalist
global-consistent

Firefox Design System: Clean Accessible UI Patterns

Brand Identity

Color Palette

Typography

Design Style

Full Analysis