Firefox Acorn

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.

Primary action

Card

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.

Palette

bg
#ffffff
surface
#f0f0f4
text
#15141a
text-muted
#5b5b66
accent
#0062fa
accent-hover
#0053cb
border
#bfbfc9
border-interactive
#8f8f9d
error
#b20037