Color

Overview

Acorn's semantic color palette corresponds to the semantic color concepts used throughout the product (e.g. Blue 50 = Color Accent Primary). This is the palette designers and developers refer to when styling our user interfaces. All of our semantic colors are aliases of the colors from the full color palette.

Action Primary

A primary brand action color is used on recurring user interface elements to give Firefox a distinct look.

We are currently improving action color parity between platforms. Android's primary action color is currently a violet shade while iOS’s action color is a blue shade.

Android

#312a64
#7743e7
primary
Use for the background of elements used to convey an action that reinforces our brand, such as: buttons and snackbars.

iOS

#0060df
#00b3f4
primary
Use for the background of elements used to convey an action that reinforces our brand, such as: buttons, toasts, and switches.

Layer

#f9f9fb
#2b2a33
1
iOS: - Header - Page - Tab Bar - Subheadings - Warnings Android: - App Bars - Page
#ffffff
#42414d
2
Shared: - Cards - Menu Android: - Dialogs - Banners - Share Sheets
#f0f0f4
#1c1b22
3
Shared: - Search iOS: - Secondary Menu

Text

#15141a
#fbfbfe
primary
Use for primary text, such as body copy, headings, and buttons.
#5b5b66
#cfcfd8
secondary
Use for secondary text such as captions.
rgba(21,20,26,0.4)
rgba(251,251,254,0.4)
disabled
Use for tertiary text such as disabled text and input field placeholder text.
#fbfbfe
#15141a
inverted
Use for inverted text.
#c50042
#ff9aa2
critical
Use for text communicating critical information.

Border

#e0e0e6
#5b5b66
primary
Use for the background color of borders used to visually group or separate UI elements, such as list items.
#f0f0f4
#52525e
secondary
Segmented Control Divider