Color

Overview

Acorn's iOS semantic color palette corresponds to roles based on usage (ex. layer, text, icon, etc). All of our semantic colors are aliases of the colors from the full color palette.

Layer

#f9f9fb

#2b2a33

Syntax: iOS

layer1

#ffffff

#42414d

Syntax: iOS

layer2

#f0f0f4

#1c1b22

Syntax: iOS

layer3

rgba(224,224,230,0.6)

rgba(74,74,85,0.7)

Syntax: iOS

layer4

#ffffff

#3a3944

List items

Syntax: iOS

layer5

#f0f0f4

#4a4a55

5Hover

List item hover

Syntax: iOS

layer5Hover

#f0f0f4

#2b2a33

surfaceLow

Syntax: iOS

layerSurfaceLow

#ffffff

#1c1b22

surfaceMedium

Syntax: iOS

layerSurfaceMedium

rgba(255,255,255,0.8)

rgba(28,27,34,0.8)

surfaceMediumAlpha

Syntax: iOS

layerSurfaceMediumAlpha

rgba(207,207,216,0.8)

rgba(58,57,68,0.8)

surfaceMediumAlt

Syntax: iOS

layerSurfaceMediumAlt

rgba(43,42,51,0.9)

rgba(249,249,251,0.9)

inverse

Syntax: iOS

layerInverse

#952bb9

accentPrivate

Use for the background of elements used to reinforce private mode, but with more emphasis.

Syntax: iOS

layerAccentPrivate

rgba(149,43,185,0.1)

rgba(149,43,185,0.3)

accentPrivateNonopaque

Use for the background of elements used to reinforce private mode, but with less emphasis.

Syntax: iOS

layerAccentPrivateNonopaque

rgba(0,115,223,0.3)

rgba(0,221,255,0.2)

accentNonOpaque

Use for the background of elements used to reinforce our brand, but with less emphasis.

Syntax: iOS

layerAccentNonOpaque

#ffea80

rgba(196,90,39,0.77)

warning

Use for the background of elements used to emphasize warning.

Syntax: iOS

layerWarning

#b3ffe3

#005e5e

success

Use for the background of elements used to emphasize success.

Syntax: iOS

layerSuccess

#ffbdc5

#7f145b

critical

Use for the background of elements used to emphasize error or danger.

Syntax: iOS

layerCritical

rgba(255,223,231,0.6)

criticalSubdued

Use for a subdued background of elements used to emphasize error or danger.

Syntax: iOS

layerCriticalSubdued

rgba(0,96,223,0.44)

#0060df

information

Use for the background of elements used to emphasize information.

Syntax: iOS

layerInformation

#fff4de

sepia

Use for the background of elements in sepia mode.

Syntax: iOS

layerSepia

rgba(91,91,102,0.43)

rgba(251,251,254,0.34)

autofillText

Use for the background of autofill text in the address bar.

Syntax: iOS

layerAutofillText

#0060df

#0090ed

selectedText

Use for the background of selected text in the address bar.

Syntax: iOS

layerSelectedText

#e0e0e6

#1c1b22

emphasis

Use for the background that provides visual emphasis on top of other layers.

Syntax: iOS

layerEmphasis

Linear Gradient, #592acb, 0.00%, #7743e7, 100.00%)

gradient

Linear Gradient, #3a3944, 0.00%, #3a394400, 100.00%)

Linear Gradient, #cfcfd8, 0.00%, #cfcfd800, 100.00%)

gradientOverlay

Linear Gradient, #f9f9fb, 0.00%, #d9bfff, 50.00%, #ffd5b2, 90.00%)

Linear Gradient, #8f8f9d, 0.00%, #ab71ff, 50.00%, #ff8a50, 90.00%)

gradientAiSubtle

Linear Gradient, #9059ff, 0.00%, #ff4aa2, 50.00%, #ffa436, 90.00%)

gradientAiStrong

Linear Gradient, #e0e0e6, 0.00%, #e0e0e600, 100.00%)

Linear Gradient, #1c1b22, 0.00%, #1c1b2200, 100.00%)

gradientUrl

Linear Gradient, #f9f9fb, 0.00%, #f9f9fb, 50.00%, #f9f9fb, 100.00%)

Linear Gradient, #2b2a33, 0.00%, #2b2a33, 50.00%, #2b2a33, 100.00%)

homepage

Action

iOS / action

#0060df

#00b3f4

primary

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

Syntax: iOS

actionPrimary

#0250bb

#00ddff

primaryHover

The hover state of actionPrimary.

Syntax: iOS

actionPrimaryHover

rgba(0,96,223,0.5)

rgba(0,179,244,0.5)

primaryDisabled

The disabled state of actionPrimary.

Syntax: iOS

actionPrimaryDisabled

#e0e0e6

#5b5b66

secondary

Use for the background of elements used to convey a secondary action.

Syntax: iOS

actionSecondary

#cfcfd8

#80808e

secondaryHover

The hover state of actionSecondary.

Syntax: iOS

actionSecondaryHover

rgba(224,224,230,0.5)

rgba(91,91,102,0.5)

secondaryDisabled

The disabled state of actionSecondary.

Syntax: iOS

actionSecondaryDisabled

#88c7ff

#0060df

primaryAlt

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

Syntax: iOS

actionPrimary

#0060df

#88c7ff

primaryAltInverse

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

Syntax: iOS

actionPrimary

rgba(226,127,46,0.4)

rgba(255,189,79,0.41)

warning

Use for the background of a caution element on top of layerWarning.

Syntax: iOS

actionWarning

#2ac3a2

#008787

success

Use for the background of a success element on top of layerSuccess.

Syntax: iOS

actionSuccess

#ff848b

rgba(198,0,132,0.69)

critical

Use for the background of danger element on top of layerCritical.

Syntax: iOS

actionCritical

#0060df

#0250bb

information

Use for the background of an info element on top of layerInformation.

Syntax: iOS

actionInformation

#ffffff

formKnob

- Switch Knob On - Switch Knob Off

Syntax: iOS

actionFormKnob

#e0e0e6

#5b5b66

formSurfaceOff

Switch Background Off

Syntax: iOS

actionFormSurfaceOff

#ffffff

#42414d

tabActive

Tab Active (iPad)

Syntax: iOS

actionTabActive

#f0f0f4

#1c1b22

tabInactive

Tab Inactive (iPad)

Syntax: iOS

actionTabInactive

#ffffff

#42414d

closeButton

Syntax: iOS

actionCloseButton

Text

iOS / text

#15141a

#fbfbfe

primary

Use for primary text, such as body copy, headings, and buttons.

Syntax: iOS

textPrimary

#5b5b66

#cfcfd8

secondary

Use for secondary text such as captions.

Syntax: iOS

textSecondary

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.

Syntax: iOS

textDisabled

#c50042

#ff9aa2

critical

Use for text communicating critical information.

Syntax: iOS

textCritical

#0060df

#00b3f4

accent

Use for text links.

Syntax: iOS

textAccent

#fbfbfe

#15141a

inverted

Use for inverted text.

Syntax: iOS

textInverted

rgba(251,251,254,0.8)

rgba(21,20,26,0.7)

invertedDisabled

The disabled state of textInverted.

Syntax: iOS

textInvertedDisabled

#fbfbfe

onDark

Use for text on dark backgrounds.

Syntax: iOS

textOnDark

#15141a

onLight

Use for text on light backgrounds.

Syntax: iOS

textOnLight

#fbfbfe

onColorPrimary

Syntax: iOS

textOnColorPrimary

Icon

iOS / icon

#15141a

#fbfbfe

primary

Use for primary icons.

Syntax: iOS

iconPrimary

#5b5b66

#cfcfd8

secondary

Use for secondary icons.

Syntax: iOS

iconSecondary

rgba(21,20,26,0.4)

rgba(251,251,254,0.4)

disabled

Use for icons in a disabled state.

Syntax: iOS

iconDisabled

#0060df

#00b3f4

accent

Use for icons that reinforce our brand.

Syntax: iOS

iconAccent

#c50042

#ff9aa2

critical

Use for icons communicating critical information.

Syntax: iOS

iconCritical

#fbfbfe

#15141a

inverted

Use for inverted icons.

Syntax: iOS

iconInverted

#fbfbfe

onColor

Use for icons on dark backgrounds.

Syntax: iOS

iconOnColor

rgba(251,251,254,0.4)

onColorDisabled

The disabled state of iconOnColor.

Syntax: iOS

iconOnColorDisabled

#592acb

#cb9eff

accentViolet

Use for violet icons on non-bold backgrounds when there is no meaning tied to the color, such as placeholder favicons.

Syntax: iOS

iconAccentViolet

#0250bb

#00b3f4

accentBlue

Use for blue icons on non-bold backgrounds when there is no meaning tied to the color, such as placeholder favicons.

Syntax: iOS

iconAccentBlue

#e31587

#ff8ac5

accentPink

Use for pink icons on non-bold backgrounds when there is no meaning tied to the color, such as placeholder favicons.

Syntax: iOS

iconAccentPink

#2ac3a2

#b3ffe3

accentGreen

Use for green icons on non-bold backgrounds when there is no meaning tied to the color, such as placeholder favicons.

Syntax: iOS

iconAccentGreen

#e27f2e

#ffea80

accentYellow

Use for yellow icons on non-bold backgrounds when there is no meaning tied to the color, such as placeholder favicons.

Syntax: iOS

iconAccentYellow

#8f8f9d

#ffffff

spinner

Use for spinner icon.

Syntax: iOS

iconSpinner

#80808e

#afafba

Use for the icon in the close button.

Syntax: iOS

iconClose

#cfcfd8

rgba(251,251,254,0.3)

ratingNeutral

Use for rating icons, such as an inactive star.

Syntax: iOS

iconRatingNeutral

Border

iOS / border

#e0e0e6

#5b5b66

primary

Use for the background color of borders used to visually group or separate UI elements, such as list items.

Syntax: iOS

borderPrimary

#f0f0f4

#52525e

secondary

Segmented Control Divider

Syntax: iOS

borderSecondary

#fbfbfe

onColor

Use for borders on dark backgrounds.

Syntax: iOS

borderOnColor

#fbfbfe

#15141a

inverted

Use for inverted borders.

Syntax: iOS

borderInverted

#0060df

#00b3f4

accent

Use for borders that reinforce our brand.

Syntax: iOS

borderAccent

rgba(0,115,223,0.3)

rgba(0,221,255,0.2)

accentNonopaque

Use for the border around the address bar in its focused state.

Syntax: iOS

borderAccentNonopaque

#952bb9

accentPrivate

Use for borders that reinforce privacy.

Syntax: iOS

borderAccentPrivate

#8f8f9d

radioButtonDefault

Syntax: iOS

border/iOS/borderRadioButtonDefault

#f9f9fb

#2b2a33

toolbarDivider

Use for the background of the divider within the toolbar to separate elements.

Syntax: iOS

borderToolbarDivider

Shadow

iOS / shadow

rgba(58,57,68,0.1)

rgba(28,27,34,0.1)

subtle

Syntax: iOS

shadowSubtle

rgba(58,57,68,0.12)

rgba(28,27,34,0.12)

default

Syntax: iOS

shadowDefault

rgba(58,57,68,0.16)

rgba(28,27,34,0.16)

strong

Syntax: iOS

shadowStrong

rgba(50,49,60,0.5)

border

Syntax: iOS

shadowBorder