Firefox

---
version: alpha
name: Firefox landing-page reference
description: An expressive browser landing page with deep-purple chapters, oversized
  condensed headlines, orange-to-pink fox illustrations, soft lavender feature cards
  and a prominent rounded download action. White editorial sections and an asymmetric
  benefit grid create a playful, privacy-focused narrative.
colors:
  primary: '#7543E3'
  surface: '#210340'
  on-surface: '#FFFFFF'
  secondary: '#F1E7F8'
  accent: '#15141A'
typography:
  headline:
    fontFamily: '"Mozilla Headline VF", -apple-system, BlinkMacSystemFont, "Segoe
      UI", Roboto, sans-serif'
    fontSize: 80px
    fontWeight: '600'
    lineHeight: 72px
  body:
    fontFamily: '"Mozilla Text VF", -apple-system, BlinkMacSystemFont, "Segoe UI",
      Roboto, sans-serif'
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 22.4px
  mobile-headline:
    fontFamily: '"Mozilla Headline VF", -apple-system, BlinkMacSystemFont, "Segoe
      UI", Roboto, sans-serif'
    fontSize: 48px
    fontWeight: '600'
    lineHeight: 43.2px
---

# Firefox landing-page reference

## Overview

Observed on 2026-09-19T06:04:44.052263+00:00 at 1440 × 1000 CSS pixels, device scale 1, with a 390 × 844 mobile opening view. The Mozilla download URL redirects to Firefox's English-US landing page. This is an independent visual reference, not an official brand manual. A saturated, character-led composition makes a privacy-oriented browser feel welcoming: condensed headlines and large fox illustrations carry the story, while the download action remains visually consistent.

## Colors

The sampled page background is #210340; acquisition buttons use #7543E3, white text and pale lavender supporting links (measured rgb(199, 168, 255)). White chapters reverse the contrast with #15141A text. #F1E7F8 appears as a pale feature-panel surface. Use orange, yellow and pink in the fox artwork as a warm counterpoint to violet; those artwork colors are visual descriptions, not measured global tokens. Keep gradients inside illustration fields and selected panels instead of tinting all body copy. The dark workspace panel is separately sampled at rgb(21, 2, 38).

## Typography

The hero declares Mozilla Headline VF at 80px, weight 600, line-height 72px on desktop. Its tall, compressed letterforms give the headline its distinctive silhouette. At 390px the same heading becomes 48px/43.2px and wraps into three compact lines within a 294px box at x=48. Large chapter headings use 64px/57.6px on desktop and 40px/36px on mobile. Feature-card headings reduce from 32px/33.6px to 24px/25.2px. Body and controls declare Mozilla Text VF. Preserve the distinction between expressive display letters and an open, readable text face. The 16px download label uses weight 600 and 16px line height. These are measured samples, not a complete typographic scale; available font assets determine the actual rendered face.

## Layout

Begin with a sparse full-width purple navigation: small wordmark left, three centered menu categories and a download pill right. Leave a substantial top gap before the centered two-line desktop statement, supporting paragraph, download button and privacy link. Anchor the warm fox illustration from beyond the left edge, sweeping beneath the message toward the middle. Four equal rounded feature cards overlap this illustrated field; the heading boxes measure 286px wide with x positions 49, 401, 753 and 1105 at 1440px.

Continue the purple chapter with a centered switching message and a migration-interface illustration, then turn to white sections for privacy and cross-device sync. Use a mixed-height two-column benefits grid: a tall lavender reading panel, a dark workspace panel and a compact yellow AI panel. A wide violet data-protection panel returns the fox illustration before an oversized final download pill and a multi-column purple footer. Generous chapter separation and tightly grouped labels/cards form the rhythm; exact section-gap tokens were not measured.

At 390px, the long navigation disappears in favor of two 36px icon controls at x=286 and x=330, each with an 8px corner radius. Keep the wordmark at x=24. The hero paragraph wraps within the narrow centered column; the main 218px download pill remains centered. The illustration is intentionally cropped by the viewport and the first feature card spans the page with 24px outer margins. DOM measurements show the remaining card headings share that single-column position. Neither inspected width has horizontal document overflow. The mobile opening was visually reviewed; intermediate breakpoints and the full mobile scroll sequence were not.

## Elevation & Depth

Use layered illustration, overlapping cards and alternating dark/white chapters for depth. Soft shading belongs to the product mockups and bright icon artwork. Major feature cards are largely flat, with unusually large rounded corners rather than hard borders. Exact shadow values were not sampled, so do not invent a general elevation system.

## Shapes

The main download control has a measured 128px radius and 12px 24px padding. Mobile header actions use 8px radii. Larger card and chapter corners are visually broad, with rounded lower corners ending the first purple chapter; their exact radii are unmeasured. Combine these soft geometric containers with the fox's sweeping organic tail, rather than replacing all shapes with uniform small rectangles.

## Components

Use a repeated violet download pill with a small download glyph, followed by a quieter underlined privacy link. Feature cards combine small uppercase category labels, a short centered benefit, one luminous icon and compact supporting copy. The switching module includes a browser-import interface, while privacy and sync rely on large illustrations. The lower asymmetric grid pairs prose with browser chrome, fox characters and controlled pastel fields. The final acquisition component is deliberately much larger than the header pill. Do not make every section a conversion banner.

This is one static rendering. No menu-open state, download flow, hover system or animation timeline was exercised. Intentional browser-preview illustration and cropped artwork are content, not missing page elements.

## Do's and Don'ts

- Do preserve the contrast between compressed display headings and roomy body text.
- Do use the fox illustration to connect sections while keeping copy readable.
- Do keep the download action and its privacy link paired and consistently ordered.
- Don't flatten the whole page into purple cards; retain white editorial chapters.
- Don't copy brand artwork as generic decoration in an unrelated product.
- Don't extrapolate unobserved interactive behavior from the static capture.