Firefox Acorn

---
name: mozilla-acorn
description: Apply the Firefox Acorn visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Firefox Acorn, mentions Acorn, Acorn Design System, Firefox design system, or describes lavender-tinted gray ramp, blue accent that turns cyan in dark mode, system-font UI at 15px root — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Firefox Acorn Design System

Mozilla's design system for Firefox surfaces: system fonts at a 15px root, near-black #15141a ink on white with the lavender-tinted gray ramp (#f0f0f4, #bfbfc9, #1c1b22), a vivid blue accent that becomes cyan in dark mode, 4/8px radii, soft layered shadows, and tokens engineered around light-dark() pairs, prefers-contrast, and forced-colors modes.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Firefox Acorn.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (Acorn, Acorn Design System, Firefox design system, Mozilla Acorn), or describes its traits: lavender-tinted gray ramp; blue accent that turns cyan in dark mode; system-font UI at 15px root; light-dark() token pairs; soft multi-layer shadows; forced-colors and prefers-contrast support.

## Design tokens

### Color palette

- --background-color-canvas light (color-white): `#ffffff` (--color-bg)
- --background-color-box-info light (gray-20) — cards, info boxes, alternating rows: `#f0f0f4` (--color-surface)
- --text-color light (gray-100): `#15141a` (--color-text)
- approximation of --text-color-deemphasized (color-mix 69% text over bg); equals gray-70: `#5b5b66` (--color-text-muted)
- --color-accent-primary light = blue-60 oklch(55% 0.24 260), converted to hex (gamut-clipped approximation): `#0062fa` (--color-accent)
- blue-70 oklch(48% 0.2 260) converted to hex — hover state (active: blue-80 ≈ #0041a4): `#0053cb` (--color-accent-hover)
- --border-color light (gray-50); deemphasized border gray-30 #bac2ca: `#bfbfc9` (--color-border)
- --border-color-interactive light (gray-60): `#8f8f9d` (--color-border-interactive)
- --text-color-error light = red-70 oklch(48% 0.2 15), converted to hex approximation: `#b20037` (--color-error)

### Dark mode overrides

When building dark mode, override these roles (all other tokens stay the same):

- --background-color-canvas dark (gray-90) — Firefox's charcoal: `#1c1b22` (--color-bg)
- --background-color-box-info dark (gray-80): `#23222b` (--color-surface)
- --text-color dark (gray-0): `#fbfbfe` (--color-text)
- computed approximation of --text-color-deemphasized (69% of #fbfbfe over #1c1b22): `#b8b7bd` (--color-text-muted)
- --color-accent-primary dark = cyan-30 oklch(76% 0.14 205), converted to hex approximation: `#00cadb` (--color-accent)
- cyan-20 oklch(83% 0.11 205) converted to hex — hover state: `#61dce9` (--color-accent-hover)
- --border-color dark (gray-70): `#5b5b66` (--color-border)
- --border-color-interactive dark (gray-50): `#bfbfc9` (--color-border-interactive)
- --text-color-error dark = red-20 oklch(83% 0.14 15), converted to hex approximation: `#ffa0aa` (--color-error)

### Typography

- Display / headings: system-ui (fallback: -apple-system, Segoe UI, Ubuntu, sans-serif)
- Body: system-ui (fallback: -apple-system, Segoe UI, Ubuntu, sans-serif)
- Type scale: 1.133 ratio, base 15px — computed steps: 15px / 17px / 19px / 22px / 25px / 28px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 600, line-height 1.3, letter-spacing 0
- Body: line-height 1.5, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 4, 8, 12, 16, 24, 32, 48 — Browser-chrome economy: --font-size-root 15px with 13px small text (0.867rem), 8/12/16px control padding, and settings pages that hold a 664px content column with 64px top spacing — roomy for a browser, tight for the web.
- Border radius: xs 2px, sm 4px, md 8px, lg 16px, circle 9999px — --border-radius-xsmall/small/medium/large tokens; buttons use medium 8px, panels and cards 8–16px, checkboxes 4px.
- Border treatment: 1px solid #bfbfc9 — --border-width is 1px globally; interactive controls use the darker gray-60 #8f8f9d border, and prefers-contrast mode hardens all borders to full-contrast colors.

### Shadows

- level-1: `0 0 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2)` — --box-shadow-level-1 (light values) — subtle raise on small controls
- card: `0 0.25px 0.75px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.05)` — --box-shadow-level-2 / --card-box-shadow — cards at rest (hover lifts to level-4)
- popup: `0 0.375px 1.5px rgba(0, 0, 0, 0.03), 0 3px 12px rgba(0, 0, 0, 0.05)` — --box-shadow-level-3 / --popup-box-shadow — menus and panels (dark theme raises alphas)

### Layout

- Max content width: 664px
- In-content pages (settings, about:*) center a 664px main column (--page-main-content-width) with 64px block-start spacing
- Sidebar + content split in preferences; categories as a slim icon+label rail
- Browser chrome itself is horizontal: toolbar rows of 32px icon buttons with 8px gaps
- Cards and message bars span the content column full-width with 16px internal padding

### Effects

- light-dark() CSS pairs on every color token — theme switching is native CSS, not class toggling
- Hover/active button fills derive from currentColor at 7/14/21% opacity, adapting to any surface automatically

### Motion

- Easing: cubic-bezier(0.07, 0.95, 0, 1); durations 100ms / 250ms / 500ms
- Panel and menu pops are quick with a slight overshoot ease
- Tab and toolbar interactions are instant; motion is reserved for spatial changes (panel open, tab move)
- All animation gated behind prefers-reduced-motion

## CSS variables (drop-in)

```css
:root {
  --color-bg: #ffffff;
  --color-surface: #f0f0f4;
  --color-text: #15141a;
  --color-text-muted: #5b5b66;
  --color-accent: #0062fa;
  --color-accent-hover: #0053cb;
  --color-border: #bfbfc9;
  --color-border-interactive: #8f8f9d;
  --color-error: #b20037;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-circle: 9999px;
  --shadow-level-1: 0 0 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-card: 0 0.25px 0.75px rgba(0, 0, 0, 0.03), 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-popup: 0 0.375px 1.5px rgba(0, 0, 0, 0.03), 0 3px 12px rgba(0, 0, 0, 0.05);
  --border-default: 1px solid #bfbfc9;
  --font-display: system-ui, -apple-system, "Segoe UI", Ubuntu, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Ubuntu, sans-serif;
  --text-base: 15px;
  --leading-heading: 1.3;
  --leading-body: 1.5;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: cubic-bezier(0.07, 0.95, 0, 1);
  --duration-fast: 100ms;
  --duration-base: 250ms;
  --duration-slow: 500ms;
}
```

All fonts are system fonts — nothing to load.

## Component recipes

- **Nav:** Category rail (settings) or toolbar chrome: 32px rows/buttons, system-font 15px labels, selected state uses the accent-primary tint at 20% (--background-color-list-item-hover pattern)
- **Hero:** about:welcome-style onboarding: centered illustration, 24px semibold heading, short body, one primary button in accent blue (cyan in dark)
- **Card:** moz-card: canvas background, 8px radius, level-2 shadow or 1px gray-30 border, 16px padding; info variant sits on gray-20 #f0f0f4 with an info icon
- **Button (primary):** Accent fill (#0062fa light / #00cadb dark with dark text), white/near-black label, 8px radius, 32px tall; hover steps to blue-70/cyan-20; focus draws a 2px accent outline with 2px offset
- **Button (secondary):** currentColor-derived ghost: 7% fill of the text color, same geometry; ghost/toolbar variants drop the resting fill entirely
- **Form fields:** 15px label, input on canvas with 1px gray-60 #8f8f9d border, 4–8px radius, 32px tall; focus outline 2px accent; error text in red-70 (red-20 on dark)

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The dark-mode accent swap: interactive blue (blue-60) becomes bright cyan (cyan-30) on Firefox's #1c1b22 charcoal — links, focus rings, and primary buttons all pivot hue rather than merely lightening. Spend boldness here; keep everything else quiet.

## Do

- Author every color as a light-dark() pair from the shared palette — Acorn tokens never fork per-theme stylesheets
- Use system fonts; Firefox renders native platform type and so should Acorn-styled surfaces
- Let hover/pressed states derive from currentColor opacities so they work on any background
- Test in prefers-contrast and forced-colors modes — the token set ships explicit overrides for both

## Don't

- Don't reuse the retired Photon values (#0060df blue, #ededf0 grays) as current tokens — the modern set is oklch-based with the values recorded here
- Don't keep blue as the dark-mode accent; Acorn's dark accent is cyan, and mixing the two reads as off-brand
- Don't widen in-content pages past the 664px column
- Don't use heavy shadows — Acorn's elevation levels are deliberately faint (3–5% alphas)

## Accessibility notes

- Acorn tokens ship first-class prefers-contrast and forced-colors (Windows High Contrast) variants — ButtonText/SelectedItem system colors replace accents automatically; preserve those layers when reusing the CSS
- Accent, error, and several palette colors are published as oklch() in tokens-shared.css; the hex values here are sRGB conversions (gamut-clipped where needed) and marked as approximations in their role descriptions
- Muted text is a color-mix over the background rather than a fixed gray — the recorded #5b5b66/#b8b7bd are computed equivalents that keep ≈6:1 contrast on their canvases

## Reference sites

- Acorn Design System: https://acorn.firefox.com
- Firefox design tokens source docs: https://firefox-source-docs.mozilla.org/toolkit/themes/shared/design-system/docs/README.design-tokens.stories.html
- Acorn color styles: https://acorn.firefox.com/latest/styles/color-MZHBVuZc

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip mozilla-acorn.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/mozilla-acorn.json

Settings → Capabilities → Skills → Upload skill → mozilla-acorn.zip