Utilities / iOS / Android / Web

Firefox

Firefox is a token system first: named layers, actions and text roles on cool grays, one confident blue for actions, and purple reserved for private browsing.

Download
  • #0060DF
  • #592ACB
  • #952BB9
  • #15141A
  • #F9F9FB
  • #E0E0E6

Color

Every color token in the file, grouped by role.

Brand

  • primary#0060DF
  • primary hover#0250BB
  • primary deep#054096
  • ink secondary#5B5B66
  • action secondary#E0E0E6
  • action secondary hover#CFCFD8
  • accent pink#E21587
  • accent orange#FF7139
  • on primary#FBFBFE

Text

  • ink#15141A
  • ink on dark#FBFBFE
  • ink deep#1D1133
  • web pink#FF97E2
  • web ink#161616

Lines

  • border strong#BFBFC9

Status

  • success#2AC3A2
  • success soft#B3FFE3
  • warning soft#FFEA80
  • warning#E27F2E

More

  • violet#7542E5
  • violet deep#592ACB
  • private purple#952BB9
  • layer 1#F9F9FB
  • layer 2#FFFFFF
  • layer 3#F0F0F4
  • layer emphasis#E0E0E6
  • dark layer 1#1C1B22
  • dark layer 2#2B2A33
  • dark layer 3#42414D
  • dark layer 5#15141A
  • critical#C50042
  • critical soft#FF848B
  • sepia#FFF4DE
  • web green#00D230
  • web orange#FF9456
  • web light gray#F4F4F4

Typography

Each style is set with the file's own family, size, weight and spacing.

  • Mozilla HeadlineOpen font, shown as published.
  • sans-serifSystem font, drawn with the default on your device.
  • Mozilla TextOpen font, shown as published.
  • title large32px / 600 / 1.15

    Firefox

  • title medium24px / 600 / 1.2

    Pack my box with five dozen liquor jugs

  • app headline20px / 500 / 24sp

    Pack my box with five dozen liquor jugs

  • app subtitle16px / 500 / 24sp

    The quick brown fox jumps over the lazy dog

  • app body16px / 400 / 24sp

    The quick brown fox jumps over the lazy dog

  • app body small14px / 400 / 20sp

    The quick brown fox jumps over the lazy dog

  • app caption12px / 400 / 16sp

    Continue to checkout

  • web body16px / 400 / 1.5

    The quick brown fox jumps over the lazy dog

Shape

Corner radius tokens.

  • sm4px
  • md8px
  • lg12px
  • xl16px
  • pill9999px

Spacing

The spacing scale, drawn to size.

  • xs4px
  • sm8px
  • md16px
  • lg24px
  • xl32px
  • xxl64px
  • section80px

Components

Component tokens drawn with the colors, type and corners they name.

  • button primary
    button-primary
  • button primary hover
    button-primary-hover
  • button secondary
    button-secondary
  • private banner
    private-banner
  • dark card
    dark-card
Read the full DESIGN.md The written rationale behind the tokens
Design tokens YAML front matter, 134 lines
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

RoleLightDark
Action primary#0060dfnot 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.