---
version: alpha
name: Firefox-design-analysis
description: "A layered, privacy-minded browser system built on the Acorn token model: named layers (layer1 to layer5), actions, text, icons and borders resolved per theme, on a cool gray scale with one confident blue (#0060df) and a violet and purple pair for private browsing. The website uses Mozilla's own Headline and Text typefaces."
status: Draft
appVersion: "iOS source snapshot 2026-10-06; Android source from the archived firefox-android repository (last updated 2024-06)"
platformsCovered: [iOS, Android, Web]
reviewer: ""
verifiedAt: ""

colors:
  primary: "#0060df"
  primary-hover: "#0250bb"
  primary-deep: "#054096"
  violet: "#7542e5"
  violet-deep: "#592acb"
  private-purple: "#952bb9"
  ink: "#15141a"
  ink-secondary: "#5b5b66"
  ink-on-dark: "#fbfbfe"
  layer-1: "#f9f9fb"
  layer-2: "#ffffff"
  layer-3: "#f0f0f4"
  layer-emphasis: "#e0e0e6"
  action-secondary: "#e0e0e6"
  action-secondary-hover: "#cfcfd8"
  border-strong: "#bfbfc9"
  dark-layer-1: "#1c1b22"
  dark-layer-2: "#2b2a33"
  dark-layer-3: "#42414d"
  dark-layer-5: "#15141a"
  success: "#2ac3a2"
  success-soft: "#b3ffe3"
  warning-soft: "#ffea80"
  warning: "#e27f2e"
  critical: "#c50042"
  critical-soft: "#ff848b"
  sepia: "#fff4de"
  accent-pink: "#e21587"
  accent-orange: "#ff7139"
  ink-deep: "#1d1133"
  on-primary: "#fbfbfe"
  web-green: "#00d230"
  web-pink: "#ff97e2"
  web-orange: "#ff9456"
  web-ink: "#161616"
  web-light-gray: "#f4f4f4"

typography:
  title-large:
    fontFamily: "Mozilla Headline, Helvetica Neue, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: -0.01em
  title-medium:
    fontFamily: "Mozilla Headline, Helvetica Neue, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.01em
  app-headline:
    fontFamily: "sans-serif"
    fontSize: 20sp
    fontWeight: 500
    lineHeight: 24sp
  app-subtitle:
    fontFamily: "sans-serif"
    fontSize: 16sp
    fontWeight: 500
    lineHeight: 24sp
  app-body:
    fontFamily: "sans-serif"
    fontSize: 16sp
    fontWeight: 400
    lineHeight: 24sp
  app-body-small:
    fontFamily: "sans-serif"
    fontSize: 14sp
    fontWeight: 400
    lineHeight: 20sp
  app-caption:
    fontFamily: "sans-serif"
    fontSize: 12sp
    fontWeight: 400
    lineHeight: 16sp
  web-body:
    fontFamily: "Mozilla Text, Helvetica Neue, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  pill: 9999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 64px
  section: 80px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.app-subtitle}"
    rounded: "{rounded.md}"
    height: 48px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.md}"
  button-secondary:
    backgroundColor: "{colors.action-secondary}"
    textColor: "{colors.ink}"
    typography: "{typography.app-subtitle}"
    rounded: "{rounded.md}"
    height: 48px
  private-banner:
    backgroundColor: "{colors.private-purple}"
    textColor: "{colors.ink-on-dark}"
    rounded: "{rounded.md}"
    padding: 12px
  dark-card:
    backgroundColor: "{colors.dark-layer-2}"
    textColor: "{colors.ink-on-dark}"
    rounded: "{rounded.lg}"
    padding: 16px
---

## Overview

Firefox's interface is a token system before it is a look. Every surface, action, text and icon color on iOS comes from a named role in the Acorn palette (for example `layer1` to `layer5`, `actionPrimary`, `textSecondary`, `iconAccent`, `borderToolbarDivider`), and each of the Light, Dark, Private and Nova themes supplies its own values. The result is calm, cool and functional, with one blue for actions and a purple world for private browsing. [Measured]

Three decisions define the look:

1. **Layers, not shadows.** Depth comes from five named background layers that step from `#f9f9fb` through white to `#f0f0f4`, with dark equivalents from `#1c1b22` to `#42414d`. Separation is mostly fills and a toolbar divider. [Measured]
2. **One action blue, a violet and purple pair for identity.** Actions are `#0060df`, hover `#0250bb`. Violet `#7542e5` and `#592acb` appear in gradients and onboarding, and purple `#952bb9` marks private browsing. [Measured]
3. **A shared palette across Android and iOS.** Both apps pull from the same Photon-derived palette: blue, violet, purple, pink, green, yellow and a long run of light and dark grays. [Measured]

Source for this file: the public iOS repository, the archived Android repository (last updated June 2024) and firefox.com, read on 2026-10-06. No on-device capture was done. See Known Gaps.

## Core

### Colors

| Role | Light | Dark |
|------|-------|------|
| Action primary | `#0060df` | not extracted |
| Action primary hover | `#0250bb` | |
| Action secondary | `#e0e0e6` | |
| Layer 1 (page) | `#f9f9fb` | `#1c1b22` |
| Layer 2 (card) | `#ffffff` | `#2b2a33` |
| Layer 3 | `#f0f0f4` | `#42414d` |
| Layer emphasis | `#e0e0e6` | |
| Text primary | `#15141a` | `#fbfbfe` |
| Text secondary | `#5b5b66` | |
| Border strong | `#bfbfc9` | |
| Private accent | `#952bb9` | |
| Success, warning, critical | `#2ac3a2`, `#e27f2e`, `#c50042` | |
| Sepia layer | `#fff4de` | |

Accent icon colors: violet `#592acb`, blue `#0250bb`, pink `#e21587`, green `#2ac3a2`, yellow `#e27f2e`. Gradients pair violet `#592acb` and `#7542e5`. Opacity variants (for example blue at 44 percent) are used for selection and information backgrounds. [Measured]

The website palette is separate: white `#fff`, off-white `#fafafa`, black `#000`, off-black `#161616`, grays `#f4f4f4`, `#e8e8e8`, `#b3b3b3`, `#6d6d6d`, `#414141`, plus green `#00d230`, pink `#ff97e2` and orange `#ff9456` with light and dark partners. [Measured]

### Typography

- **Website:** Mozilla Headline for titles (weight 600, letter spacing `-0.01em`) and Mozilla Text for body, buttons and labels, both with Helvetica Neue and Arial fallbacks. The scale is 48, 32, 24, 18, 16 and 14px for titles and 24, 18, 16 and 14px for body, with a 12px label. [Measured]
- **Android app:** the system sans. The Fenix scale in sp: 24 regular, 20 medium (24 line), 16 medium, 16 regular, 14 medium, 14 regular and 12 and 10 for captions, with line heights from 14 to 24. [Measured]
- **iOS app:** the system font through standard text styles. [Inferred]

### Shape and spacing

- Website spacers: `4px`, `8px`, `16px`, `24px`, `32px`, `64px`, `80px`. Grid margin `16px`, gutter `8px`. [Measured]
- App corner radii were not extracted. [Inferred]

### Iconography and motion

Icons are simple glyphs tinted by role: `iconPrimary`, `iconSecondary`, `iconAccent`, `iconCritical`. A spinner color and onboarding gradients exist. [Measured]

### Themes

Mobile has Light, Dark and Private themes, and iOS also defines Nova variants and a Sepia layer for reading. [Measured]

## Platform: iOS

How the iOS app looks and behaves. Items come from public source files.

### Back and up navigation

Expected on iOS: chevron plus previous title, swipe from the left edge.

Browser-style back and forward controls in the toolbar plus the system edge swipe. [Inferred]

### Primary navigation

Expected on iOS: bottom tab bar, about five items.

Not a classic tab bar. The browser has an address toolbar and a bottom toolbar with back, forward, share, menu and tabs, and a tab tray. Tab active and inactive colors are theme roles (`actionTabActive`, `actionTabInactive`). [Measured for the roles, Inferred for the layout]

### Main action

Expected on iOS: nav bar or bottom bar button.

The address bar is the main action. There is no floating button. [Inferred]

### Sheets, dialogs and messages

Expected on iOS: action sheets, alerts, modals.

Layer roles exist for scrims (`layerScrim`), popovers and glass toolbars (`layerToolbarGlass`, `layerSurfaceMediumAltGlass`), so translucent chrome is part of the system. [Measured]

### Controls

Expected on iOS: Cupertino switches, pickers, segmented controls.

Form roles define off-state surfaces and knobs (`formSurfaceOff`, `formKnob`), so switches are themed rather than stock. [Measured]

### Text sizing

Expected on iOS: Dynamic Type.

Reader mode has its own font size and font type controls. System Dynamic Type support elsewhere was not verified. [Measured]

### Touch and pointer targets

Expected on iOS: 44pt minimum.

Not verified. [Inferred]

### Insets and system bars

Expected on iOS: safe areas, status bar.

Standard handling with glass toolbars. [Inferred]

### Icons

Expected on iOS: SF Symbols or custom.

Custom icon set tinted by role. [Inferred]

### Account and sign-in rules

Expected on iOS: equivalent login option when third-party sign-in exists (Guideline 4.8) and in-app account deletion. Note the date checked.

The Mozilla account is optional and is the product's own account, so Guideline 4.8 is likely not triggered. Account deletion was not checked. [Inferred] Checked: 2026-10-06 against source only.

### Platform conformance

Expected on iOS: system components and Dynamic Type.

The app uses its own full token system and custom toolbars, a deliberate deviation for a browser that needs dense, themeable chrome. [Inferred]

## Platform: Android

How the Android app looks and behaves. Items come from public source files.

### Back and up navigation

Expected on Android: system back and gesture, up arrow in the top bar.

System back navigates tabs and pages. [Inferred]

### Primary navigation

Expected on Android: navigation bar, rail on tablets.

The browser toolbar sits at the top or bottom by user choice, with a tabs counter button. There is no Material bottom navigation bar for the main structure. [Inferred]

### Main action

Expected on Android: floating action button.

The address bar is the main action. No floating action button was found in the files read. [Inferred]

### Sheets, dialogs and messages

Expected on Android: bottom sheets, dialogs, snackbars.

A custom contextual feature recommendation popup (CFR) with its own shape component exists. Standard dialogs and snackbars are expected. [Measured for the CFR]

### Controls

Expected on Android: Material switches, pickers, chips.

Components themed with the Acorn colors. [Inferred]

### Text sizing

Expected on Android: font scale.

Sizes are in `sp`, so system font scale applies. [Measured]

### Touch and pointer targets

Expected on Android: 48dp minimum.

Not verified. [Inferred]

### Insets and system bars

Expected on Android: edge to edge, system bars.

Not verified. [Inferred]

### Icons

Expected on Android: Material Symbols or custom.

Custom icon set. [Inferred]

### Account and sign-in rules

Expected on Android: account deletion and data safety requirements. Note the date checked.

Optional Mozilla account. Deletion and data safety were not checked. [Inferred] Checked: 2026-10-06 against source only.

### Platform conformance

Expected on Android: Material 3 components and roles.

Follows its own Acorn system rather than Material roles. It adopts Android conventions such as system back and a top or bottom toolbar. [Inferred]

## Platform: Web

The firefox.com marketing site, built on Mozilla's own design tokens.

### Back and up navigation

Expected on Web: browser back, breadcrumbs.

Browser back and a persistent header. [Inferred]

### Primary navigation

Expected on Web: top nav or sidebar.

Top navigation. [Inferred]

### Main action

Expected on Web: page-level button.

A Download button as the main call to action. [Inferred]

### Sheets, dialogs and messages

Expected on Web: modals, toasts.

Not a feature of the marketing site. [Inferred]

### Controls

Expected on Web: native or custom.

Custom buttons using the button font role (16 to 24px). [Measured]

### Text sizing

Expected on Web: browser zoom.

Sizes are in `px`. [Measured]

### Touch and pointer targets

Expected on Web: pointer and keyboard.

Not verified. [Inferred]

### Insets and system bars

Expected on Web: viewport, scrollbars.

A 16px container padding and 16px grid margin. [Measured]

### Icons

Expected on Web: any.

SVG. [Inferred]

### Account and sign-in rules

Expected on Web: not applicable unless the product has accounts.

Informational site. [Inferred]

### Platform conformance

Expected on Web: web norms for links and forms.

Follows web norms and uses Mozilla's own typefaces and a named color set. [Measured]

## Cross-platform consistency

Shared: the Photon-derived palette and the single action blue, role-based color tokens, and a violet and purple private-browsing identity. [Measured]

Differences: the website has a bolder, more graphic palette (green, pink and orange) than the apps, which are cool grays with one blue. Android type is specified in `sp` while iOS relies on system styles. [Measured]

## Do's and Don'ts

### Do

- Express every color as a named role (layer, action, text, icon, border) and resolve it per theme.
- Use `#0060df` for primary actions and darken to `#0250bb` on hover.
- Use purple `#952bb9` to mark private browsing consistently.
- Use fills and thin dividers for depth, not heavy shadows.
- Offer Light, Dark, Private and reading (Sepia) themes.

### Don't

- Don't hard-code hex values in components. Use the role.
- Don't use the website's bright green, pink and orange in the app chrome.
- Don't add floating action buttons to the browser UI.

## Known Gaps

- No on-device capture was done. All app statements come from reading source, so layouts, spacing and behavior are not confirmed.
- The Android source is from an archived repository last updated in June 2024. The current Android app now lives inside Mozilla's main code repository and may differ.
- Dark-theme values for most iOS roles and all corner radii were not extracted.
- The iOS and Android navigation structure is inferred from product knowledge, not from source.
- Account deletion and store policy rules were not verified.