--- version: alpha name: Firefox description: Mozilla's 2026 Firefox redesign — a deep-purple canvas lit by a vivid electric-purple accent and the literal flame, oversized rounded display type in Mozilla Headline VF, gigantic 128px corner radii, and the brand's signature fox-flame gradient as the one piece of heat in an otherwise cool, confident dark system. colors: # Surface / canvas — the dark purple Firefox world background: "#210340" # deep brand purple, hero + footer canvas background-deep: "#150226" # token-color-dark-purple-2, deepest panel surface: "#ffffff" # white feature cards on the purple canvas surface-icon: "#3a0f6e" # --fl-theme-color-icon-wrap, card icon wells # Ink / text ink: "#ffffff" # primary text — white on the dark purple canvas (was #15141a near-black, which matched the canvas; corrected to readable white) ink-on-dark: "#ffffff" # text + headlines on the purple canvas ink-muted-dark: "#c7a8ff" # soft purple links/labels on dark ink-secondary: "#7b7a82" # --sidebar-text-color, muted UI text ink-hover-dark: "#333336" # link hover ink (was rgb(51,51,54)) # Brand accent — electric Firefox purple primary: "#7543e3" # the download-button purple, the brand's voltage on-primary: "#ffffff" primary-hover: "#8c50ff" # brighter on hover primary-soft: "#ae89ff" # --token-color-nav-icon-purple primary-medium: "#4c2489" # --token-color-medium-purple primary-container: "#e4d8fc" # --token-color-soft-purple-2, tinted chip bg # Flame gradient stops — the fox's fire flame-yellow: "#fff04f" # gradient top — sunburst flame-orange: "#ffba4a" # gradient base — ember flame-magenta: "#ae49ec" # radial hero glow start (was rgb(174,73,236)) # Borders border: "#15141a" # 1px dark divider on dark option lists border-on-dark: "#ffffff" # 1px white outline on ghost buttons over purple border-card: "#f1e7f8" # 1px hairline on white cards border-translucent: "#3b1f53" # was rgba(255,255,255,.35) over purple — flattened # Semantic (Firefox's notification system) success: "#144a27" # --notification-green-border-color success-container: "#deffd6" # --notification-green-bg error: "#ff453f" # --notification-red-border-color warning: "#ff6d00" # --token-color-secondary-orange # Shadow tint shadow-soft: "#1a0233" # opaque approx of purple drop shadow over canvas typography: # Mozilla Headline VF — the bold rounded-grotesk display face display-hero: fontFamily: "Mozilla Headline VF, Mona Sans, -apple-system, system-ui, Segoe UI, Roboto, sans-serif" fontSize: 128px fontWeight: 700 lineHeight: 0.90 letterSpacing: -0.64px display: fontFamily: "Mozilla Headline VF, Mona Sans, -apple-system, system-ui, Segoe UI, Roboto, sans-serif" fontSize: 80px fontWeight: 600 lineHeight: 0.90 letterSpacing: 0px heading-section: fontFamily: "Mozilla Headline VF, Mona Sans, -apple-system, system-ui, Segoe UI, Roboto, sans-serif" fontSize: 32px fontWeight: 600 lineHeight: 1.05 letterSpacing: -0.32px heading-sub: fontFamily: "Mozilla Headline VF, Mona Sans, -apple-system, system-ui, Segoe UI, Roboto, sans-serif" fontSize: 32px fontWeight: 600 lineHeight: 1.20 letterSpacing: 0px card-title: fontFamily: "Mozilla Headline VF, Mona Sans, -apple-system, system-ui, Segoe UI, Roboto, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.50 letterSpacing: 0px # Mozilla Text VF — the humanist body face body-large: fontFamily: "Mozilla Text VF, -apple-system, system-ui, Segoe UI, Roboto, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0px body: fontFamily: "Mozilla Text VF, -apple-system, system-ui, Segoe UI, Roboto, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.20 letterSpacing: 0px body-strong: fontFamily: "Mozilla Text VF, -apple-system, system-ui, Segoe UI, Roboto, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.00 letterSpacing: 0px nav-link: fontFamily: "Mozilla Text VF, -apple-system, system-ui, Segoe UI, Roboto, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.00 letterSpacing: 0px button-ui: fontFamily: "Mozilla Text VF, -apple-system, system-ui, Segoe UI, Roboto, sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.00 letterSpacing: 0px label-loud: fontFamily: "Mozilla Text VF, -apple-system, system-ui, Segoe UI, Roboto, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.40 letterSpacing: 0.28px caption: fontFamily: "Mozilla Text VF, -apple-system, system-ui, Segoe UI, Roboto, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.40 letterSpacing: 0.24px eyebrow: fontFamily: "Mozilla Text VF, -apple-system, system-ui, Segoe UI, Roboto, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.00 letterSpacing: 0.24px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 32px 3xl: 40px 4xl: 64px 5xl: 80px 6xl: 128px rounded: none: 0px sm: 4px md: 8px lg: 12px xl: 24px 2xl: 48px 3xl: 128px # the signature giant card/button radius circle: 9999px components: # Primary download CTA — the brand purple, huge radius button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.3xl}" padding: 12px 24px borderColor: "{colors.primary}" transition: "color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease" button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.3xl}" padding: 12px 24px borderColor: "{colors.primary-hover}" # Dark utility CTA — near-black pill (header "Get Firefox") button-dark: backgroundColor: "{colors.background-deep}" textColor: "{colors.ink-on-dark}" typography: "{typography.button-ui}" rounded: "{rounded.3xl}" padding: 12px 24px # Ghost button on the purple canvas — white hairline outline button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.ink-on-dark}" typography: "{typography.nav-link}" rounded: "{rounded.3xl}" padding: 12px 24px borderColor: "{colors.border-on-dark}" button-ghost-hover: backgroundColor: "{colors.background-deep}" textColor: "{colors.ink-on-dark}" typography: "{typography.nav-link}" rounded: "{rounded.3xl}" padding: 12px 24px borderColor: "{colors.border-on-dark}" # White feature card on the purple canvas — giant top radius card: backgroundColor: "{colors.surface}" textColor: "{colors.ink-hover-dark}" typography: "{typography.card-title}" rounded: "{rounded.2xl}" padding: 32px borderColor: "{colors.border-card}" # Icon well inside a card card-icon: backgroundColor: "{colors.surface-icon}" textColor: "{colors.ink-on-dark}" rounded: "{rounded.circle}" padding: 16px # Tinted chip / pill on dark badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary-medium}" typography: "{typography.caption}" rounded: "{rounded.circle}" padding: 4px 12px # Form select on the dark canvas (locale picker) input: backgroundColor: "{colors.background}" textColor: "{colors.ink-on-dark}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 8px 36px borderColor: "{colors.border-on-dark}" input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink-on-dark}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 8px 36px borderColor: "{colors.primary}" # Link on the dark canvas link-on-dark: textColor: "{colors.ink-muted-dark}" typography: "{typography.body}" link-on-dark-hover: textColor: "{colors.ink-hover-dark}" typography: "{typography.body}" # Top navigation bar over the purple canvas nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink-on-dark}" typography: "{typography.nav-link}" padding: 16px 24px --- # Firefox Design System ## Overview Firefox's 2026 redesign is the rare big-brand site that commits fully to the dark, and to a *color*, not a neutral. The canvas is a deep, almost ecclesiastical purple (`{colors.background}`) — not navy hiding from boldness, but a saturated brand purple that runs from the header straight through to the footer. Against it, white feature cards (`{colors.surface}`) float like cut paper, and a single electric purple (`{colors.primary}`) carries every download CTA. This is the Mozilla Protocol design language grown up: where the old marketing pages leaned on Zilla Slab and Inter on white, the new system inverts everything — confident purple ground, oversized rounded display type, and the literal Firefox flame as the only warmth in the frame. The typography is the loudest signal. Display headlines run in **Mozilla Headline VF**, Mozilla's own libre variable face — a rounded humanist grotesk that goes enormous (`{typography.display-hero}` reaches 128px) at a tight `0.90` line-height and slightly negative tracking, so a two-line headline like "Find your way back to a better internet" reads as a single confident block. Body copy switches to **Mozilla Text VF**, a quieter humanist companion tuned for reading at 16px. There are no Google or Adobe fonts here — both faces are self-hosted variable woff2 files, a deliberately independent, open-source typographic stance that matches the brand's politics. The signature visual element is geometry pushed to an extreme: a **128px corner radius** (`{rounded.3xl}`) on buttons and cards. CTAs aren't pills by accident of height — they're explicitly rounded to 128px, and the feature cards carry a `0 0 128px 128px` bottom sweep that turns a rectangle into a soft-bottomed tab. The only heat in the whole composition is the fox-flame gradient — a sunburst yellow (`{colors.flame-yellow}`) melting into ember orange (`{colors.flame-orange}`) — and a radial hero glow that blooms from magenta (`{colors.flame-magenta}`) into the deep purple background. The overall impression is calm, modern, and quietly ideological: a browser that wants to feel like a sanctuary, not a dashboard. **Key Characteristics:** - Deep brand-purple canvas (`{colors.background}`) edge to edge — dark mode as the *default*, not an option - White feature cards (`{colors.surface}`) as the primary content surface against purple - Electric purple (`{colors.primary}`) reserved for download CTAs and focus — the brand's voltage - Mozilla Headline VF for display, going to 128px (`{typography.display-hero}`) at `0.90` line-height - Mozilla Text VF for body — self-hosted variable fonts, zero third-party type - Signature 128px corner radius (`{rounded.3xl}`) on buttons and cards - The fox-flame gradient (`{colors.flame-yellow}` → `{colors.flame-orange}`) as the only warm element - Radial hero glow blooming from `{colors.flame-magenta}` into `{colors.background}` - Soft-purple links (`{colors.ink-muted-dark}`) on dark instead of pure-white text everywhere - Fast, restrained motion: 150ms `ease` on links, 200ms on card transforms — nothing flashy ## Colors ### Surface / Canvas - **Brand Purple** (`{colors.background}`): The dominant canvas — hero, sections, and footer all sit on this deep purple. The brand's whole personality. - **Deep Purple** (`{colors.background-deep}`): The darkest panel tone, used for the most recessed surfaces and hover-darkened ghost buttons. - **White** (`{colors.surface}`): Feature cards and any light content block — the high-contrast counterpoint to the purple ground. - **Icon Well** (`{colors.surface-icon}`): A mid purple for the circular icon wells inside white cards. ### Text / Ink - **Near-Black** (`{colors.ink}`): Text on white cards and the dark utility CTA. - **White** (`{colors.ink-on-dark}`): Headlines and primary copy on the purple canvas. - **Soft Purple** (`{colors.ink-muted-dark}`): Links and secondary labels on dark — purple instead of grey keeps the dark canvas from feeling cold. - **Secondary** (`{colors.ink-secondary}`): Muted UI text, sidebar/meta labels. - **Hover Ink** (`{colors.ink-hover-dark}`): Link hover state (was `rgb(51,51,54)`). ### Brand Accent - **Firefox Purple** (`{colors.primary}`): The download-button purple — applied only to primary CTAs and focus rings to keep it potent. - **Purple Hover** (`{colors.primary-hover}`): Brighter purple on CTA hover. - **Soft / Medium / Container** (`{colors.primary-soft}`, `{colors.primary-medium}`, `{colors.primary-container}`): The tint ladder for nav icons, chip text, and chip backgrounds. ### Flame Gradient - **Flame Yellow** (`{colors.flame-yellow}`) → **Flame Orange** (`{colors.flame-orange}`): The fox's fire — the only warm gradient in the system. - **Flame Magenta** (`{colors.flame-magenta}`): The hero radial-glow start, blooming into `{colors.background}`. ### Borders - **Dark Divider** (`{colors.border}`): 1px hairlines on dark option lists. - **White Outline** (`{colors.border-on-dark}`): 1px outline on ghost buttons over purple. - **Card Hairline** (`{colors.border-card}`): Faint lilac border on white cards. - **Translucent** (`{colors.border-translucent}`): was `rgba(255,255,255,.35)` over purple — flattened to opaque. ### Semantic - **Success** (`{colors.success}` / `{colors.success-container}`), **Error** (`{colors.error}`), **Warning** (`{colors.warning}`): Firefox's in-product notification palette, surfaced sparingly on marketing pages. ## Typography ### Font Family - **Display**: `Mozilla Headline VF`, with fallbacks: `Mona Sans, -apple-system, system-ui, Segoe UI, Roboto, sans-serif` - **Body**: `Mozilla Text VF`, with fallbacks: `-apple-system, system-ui, Segoe UI, Roboto, sans-serif` - **Heritage note**: Earlier Mozilla Protocol marketing used Zilla Slab for display and Inter for body; the 2026 redesign replaced both with Mozilla's own libre variable faces. Both are self-hosted variable woff2 — no Google or Adobe Fonts. - **OpenType / Variable**: Both are variable fonts; the system exploits the weight axis (400–700) rather than swapping static families. ### Hierarchy The complete type scale is declared in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`) rather than restating values. | Token | Use | |---|---| | `display-hero` | 128px hero — single confident headline block | | `display` | 80px section display | | `heading-section` | 32px feature/section titles | | `heading-sub` | 32px secondary headings, looser line-height | | `card-title` | 16px bold card titles | | `body-large` | Lead paragraphs | | `body` | Standard reading text | | `body-strong` | Emphasized inline copy | | `nav-link` | Top navigation links | | `button-ui` | Button labels (700 weight) | | `label-loud` | Tracked 14px labels | | `caption` | Tracked uppercase captions | | `eyebrow` | Small uppercase eyebrow labels | ### Principles - **Big, tight, rounded**: Display type goes enormous at `0.90` line-height — the headline is meant to dominate, not whisper. - **Two faces, one axis**: Headline VF for display, Text VF for body; weight does the work, not extra families. - **Independent type**: Self-hosted libre variable fonts only — the typographic equivalent of "no trackers." - **Weight roles**: 400 body, 500–600 UI/labels, 700 buttons and card titles. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px — 8px dominates by an order of magnitude, with `{spacing.xl}` (24px) and `{spacing.4xl}` (64px) carrying section rhythm. Spacing is generous and breathing: the purple canvas gives copy room, and the white cards sit in wide gutters rather than crowding the viewport. ### Grid & Container - Centered hero, single-column headline + supporting copy, CTA stack below - Feature row: a 4-up grid of white cards on desktop - The flame illustration breaks the grid, overlapping from the left edge into the hero ### Whitespace Philosophy - **Dark room, lit objects**: The purple ground is mostly empty; white cards and the flame are the few lit objects in it. - **Wide gutters**: Cards keep clear space around them — no edge-to-edge density. - **Vertical air**: 64px–80px (`{spacing.4xl}`–`{spacing.5xl}`) between major sections. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Purple canvas, text blocks | | Card (Level 1) | Soft drop shadow tinted `{colors.shadow-soft}` | White feature cards over purple | | Hover Lift (Level 2) | 200ms `transform` translate-up on cards | Card hover | | Hero Glow | Radial `{colors.flame-magenta}` → `{colors.background}` | Atmospheric hero backdrop | | Focus | White or `{colors.primary}` outline | Keyboard focus on dark vs light surfaces | **Shadow Philosophy**: Depth here is barely about shadow and mostly about *contrast and color*. White cards read as elevated simply by being white on deep purple; a soft purple-tinted drop shadow (`{colors.shadow-soft}`) just grounds them. The real "depth" is the radial hero glow, where magenta light blooms out of the dark — light as elevation, not box-shadow stacks. Motion adds the rest: cards lift on hover via a 200ms `ease` transform rather than a shadow change. ## Shapes The complete radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Form selects, dark option lists | | `sm` | 4px | Inputs, small buttons | | `md` | 8px | Secondary buttons | | `lg` | 12px | Inputs, selects | | `xl` | 24px | Regions, smaller cards | | `2xl` | 48px | Feature cards | | `3xl` | 128px | Signature — primary buttons + card bottom sweep | | `circle` | 9999px | Icon wells, chips | The radius story is the opposite of subtle: the system reaches for an extreme **128px** (`{rounded.3xl}`) on its hero CTAs and card sweeps. Most buttons aren't height-derived pills — they're explicitly 128px-rounded, which gives the whole page its soft, friendly, distinctly-Firefox geometry. ## Components The complete component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`). ### Button variants - **`button-primary`** — Firefox purple (`{colors.primary}`), white label, 128px radius. The download CTA; hover brightens to `{colors.primary-hover}`. - **`button-dark`** — Near-black (`{colors.ink}`) utility pill, used for the header "Get Firefox". - **`button-ghost`** — Transparent over purple with a 1px white outline (`{colors.border-on-dark}`); hover darkens the fill to `{colors.background-deep}`. ### Cards - **`card`** — White surface on purple, 48px radius, 32px padding, faint lilac hairline (`{colors.border-card}`). Lifts on hover. - **`card-icon`** — Circular icon well in `{colors.surface-icon}` inside each card. ### Inputs - **`input`** — The dark-canvas form select: purple fill, white 1px outline, white text. Focus swaps the outline to `{colors.primary}`. ### Badges / Chips - **`badge`** — Soft-purple container (`{colors.primary-container}`) with medium-purple text, fully rounded. ### Navigation - **`nav-bar`** — Sits directly on the purple canvas, white 600-weight links, dark/purple CTA at the right. ### Links - **`link-on-dark`** — Soft purple (`{colors.ink-muted-dark}`) on dark, underlining and shifting toward `{colors.ink-hover-dark}` on hover. ## Do's and Don'ts ### Do - Build on the purple canvas (`{colors.background}`) — dark is the default, not a toggle. - Use white cards (`{colors.surface}`) as the primary light surface against the purple. - Reserve `{colors.primary}` for download CTAs and focus — keep its voltage. - Use Mozilla Headline VF huge and tight (`{typography.display-hero}`, `0.90` line-height). - Apply the 128px radius (`{rounded.3xl}`) to hero CTAs and card sweeps — it's the signature. - Use soft purple (`{colors.ink-muted-dark}`) for links on dark instead of pure white. - Let the flame gradient (`{colors.flame-yellow}` → `{colors.flame-orange}`) be the only warm element. - Keep motion fast and quiet — 150ms `ease` on links, 200ms on card lifts. ### Don't - Don't switch the canvas to navy or neutral grey — the purple *is* the brand. - Don't scatter `{colors.primary}` across non-CTA chrome; it loses its punch. - Don't reintroduce Zilla Slab / Inter — the live system is Mozilla Headline VF + Text VF. - Don't load the fonts from Google/Adobe — they're self-hosted variable woff2 by design. - Don't pile up box-shadow stacks for depth — contrast and the radial glow do that job. - Don't add a second warm accent; one flame gradient is the entire heat budget. - Don't use mid pill radii on hero CTAs — go to the full `{rounded.3xl}` (128px). - Don't put low-contrast grey text on the purple canvas; use white or soft purple. --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <400px | Single column, hero display scales way down, flame shrinks | | Mobile | 400–600px | Stacked cards, full-width CTAs | | Tablet | 600–768px | 2-up card grid begins | | Desktop | 768–1024px | 4-up feature card row, full flame illustration | | Large Desktop | >1024px | Centered max-width, generous purple margins | ### Touch Targets - CTAs use 12px 24px padding inside a 128px radius — comfortably tappable. - Nav links and form selects keep generous hit areas on dark. ### Collapsing Strategy - Hero: 128px display headline scales down sharply while keeping `0.90` line-height. - Feature cards: 4-up → 2-up → single column. - Flame illustration: overlapping desktop hero element → reduced/recentered on mobile. - Navigation: inline links → menu on small screens. ### Image Behavior - The flame illustration and radial glow are the hero's visual anchor; they scale and recenter rather than crop. - White cards keep their large radius at every size. --- ## Agent Prompt Guide ### Quick Color Reference - Background: Brand Purple `{colors.background}` - Card surface: White `{colors.surface}` - Heading text on dark: White `{colors.ink-on-dark}` - Body text on dark: Soft Purple `{colors.ink-muted-dark}` - Text on cards: Near-Black `{colors.ink}` - Brand accent / CTA: Firefox Purple `{colors.primary}` - Border on dark: White `{colors.border-on-dark}` ### Example Component Prompts - "Create a hero on a deep purple background `{colors.background}` with a radial glow from `{colors.flame-magenta}` to `{colors.background}`. Headline in Mozilla Headline VF at 128px (`{typography.display-hero}`), weight 700, line-height 0.90, letter-spacing -0.64px, color `{colors.ink-on-dark}`. Subcopy in Mozilla Text VF 16px (`{typography.body-large}`), color `{colors.ink-muted-dark}`. Primary CTA: purple `{colors.primary}`, white text, 128px radius (`{rounded.3xl}`), 12px 24px padding." - "Design a feature card: white surface `{colors.surface}`, 48px radius (`{rounded.2xl}`), 32px padding, 1px `{colors.border-card}` border, soft purple-tinted drop shadow. Circular icon well `{colors.surface-icon}` on top, title in `{typography.card-title}` color `{colors.ink}`. Lift on hover with a 200ms ease transform." - "Build the primary download button: background `{colors.primary}`, label `{colors.on-primary}`, typography `{typography.button-ui}` (700 weight), 128px radius (`{rounded.3xl}`), 12px 24px padding; hover background `{colors.primary-hover}`." - "Create a ghost button over the purple canvas: transparent fill, 1px `{colors.border-on-dark}` outline, white label `{typography.nav-link}`, 128px radius; hover fill `{colors.background-deep}`." - "Make a top nav bar on `{colors.background}`: white 600-weight links `{typography.nav-link}`, a dark utility pill (`{colors.ink}`) and a purple CTA `{colors.primary}` at the right, 16px 24px padding." - "Build a soft-purple chip: background `{colors.primary-container}`, text `{colors.primary-medium}`, fully rounded `{rounded.circle}`, 4px 12px padding, typography `{typography.caption}`." ### Iteration Guide 1. Start dark: lay the purple canvas `{colors.background}` first — it's the foundation, not an afterthought. 2. Place white cards `{colors.surface}` as the lit objects; let contrast do the elevation. 3. Use `{colors.primary}` only on download CTAs and focus rings. 4. Set display type huge and tight — Mozilla Headline VF at `0.90` line-height. 5. Apply the 128px radius (`{rounded.3xl}`) to hero CTAs and card sweeps. 6. Add exactly one warm element: the flame gradient `{colors.flame-yellow}` → `{colors.flame-orange}`. 7. Keep motion fast and quiet — 150ms `ease` links, 200ms card lifts, no heavy shadows. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Firefox. Brand names and trademarks belong to their respective owners.