Acorn

# Acorn — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Mozilla / Firefox. "Acorn" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Acorn
**Owner:** Mozilla / Firefox
**Official documentation:** https://acorn.firefox.com/
**Visual character:** Browser-chrome civility: platform-native type, one principled Firefox blue, and privacy states given real visual weight.

---

## Summary

Mozilla's public design system documenting foundations, components, and patterns for the Firefox desktop and mobile browsers.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Firefox Blue / Accent | `#0060df` | `--color-accent-primary` | Primary actions and focus |
| Text Primary | `#15141a` | `--text-color` | Primary text (light) |
| Text Deemphasized | `#5b5b66` | `--text-color-deemphasized` | Secondary text |
| White | `#ffffff` | `--background-color-canvas` | Content background |
| Box Background | `#f0f0f4` | `--background-color-box` | Panels and toolbars |
| Border | `#cfcfd8` | `--border-color` | Borders |
| Critical Red | `#d7264c` | `--color-critical` | Errors and dangerous permissions |
| Success Green | `#017a40` | `--color-success` | Success |
| Warning Yellow | `#ffa436` | `--color-warning` | Warnings |

## Typography

- **Body:** System UI — weights 400, 600 — `system-ui, -apple-system, 'Segoe UI', Ubuntu, Cantarell, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-xlarge | `22px` | `28px` |
| heading-large | `17px` | `24px` |
| body | `15px` | `20px` |
| body-small | `13px` | `16px` |
| caption | `11px` | `16px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `4px` |
| medium | `8px` |
| circle | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| panel | `0 2px 6px rgba(58,57,68,0.2)` |

## Motion

| Name | Value |
| --- | --- |
| default | `150ms cubic-bezier(0.07, 0.95, 0, 1)` |

## Quick start (CSS)

```css
/* Acorn — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://acorn.firefox.com/ */

:root {
  /* Color */
  --color-accent-primary: #0060df; /* Primary actions and focus */
  --text-color: #15141a; /* Primary text (light) */
  --text-color-deemphasized: #5b5b66; /* Secondary text */
  --background-color-canvas: #ffffff; /* Content background */
  --background-color-box: #f0f0f4; /* Panels and toolbars */
  --border-color: #cfcfd8; /* Borders */
  --color-critical: #d7264c; /* Errors and dangerous permissions */
  --color-success: #017a40; /* Success */
  --color-warning: #ffa436; /* Warnings */

  /* Typography */
  --font-body: system-ui, -apple-system, 'Segoe UI', Ubuntu, Cantarell, sans-serif;

  /* Type scale */
  --text-heading-xlarge: 22px /* line-height 28px */;
  --text-heading-large: 17px /* line-height 24px */;
  --text-body: 15px /* line-height 20px */;
  --text-body-small: 13px /* line-height 16px */;
  --text-caption: 11px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radius */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-circle: 9999px;

  /* Elevation */
  --shadow-panel: 0 2px 6px rgba(58,57,68,0.2);

  /* Motion */
  --motion-default: 150ms cubic-bezier(0.07, 0.95, 0, 1);
}
```

## Engineering profile

- **Source model:** Hybrid
- **Figma:** Official Figma kit

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Acorn by Mozilla / Firefox — Mozilla's public design system documenting foundations, components, and patterns for the Firefox desktop and mobile browsers. Character: Browser-chrome civility: platform-native type, one principled Firefox blue, and privacy states given real visual weight. Use a primary colour near #0060df, the typeface "System UI" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 4px base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [Acorn documentation](https://acorn.firefox.com/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/firefox-acorn) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._