Color usage

Our color palettes are shared between Brand and Gestalt, and represent our full range of options. Please refer to the Color Palette page for all the shades and tints available.

On this page, you will find guidance on how to use our color tokens for:

  • Primary and secondary elements
  • Additional UI elements, including colors for shopping, messages, typography, and iconography
  • Accessibility and inclusive design

Applying color to UI

When designing a product interface, you can choose between any color swatch available in our design tokens documentation. The color tokens represent the values used within Gestalt to construct layouts and components.

Colors available in our extended palette and not listed on the Gestalt Foundations library are reserved for larger brand moments, and they should not be applied to components.

By limiting the range of colors, the areas that receive color gain more attention, such as text, images, and components. Pinterest content is multicolored, and having a limited range of colors is a great way to keep consistency, making our product more visible and engaging.

If there is a need for a color not available in our design tokens, please reach out to the Core Brand team for guidance on using color to propose a brand moment within the product UI.

Primary color

A primary color is the color displayed most frequently across screens and components, used to convey high-emphasis actions. Our primary color related tokens are:
$color-background-primary-base - Use when conveying a primary action.
$color-background-brand - Use when a background color is needed to signify the Pinterest brand.

Light mode
Primary base
#E60023
Brand
#E60023
Dark mode
Primary base
#E60023
Brand
#E60023

Secondary color

A secondary color highlights medium to low-emphasis actions, creating a balance with the primary color. Our secondary color related token is:
$color-background-secondary-base - Use for secondary, medium to low-emphasis actions.

Light mode
Secondary base
#E9E9E9
Dark mode
Secondary base
#767676

Accent gray color

Our tertiary color offers ways to accent the UI when the primary color doesn't work well on the proposed layout. Our accent gray related token is:
$color-background-tertiary-base - Use on medium to low-emphasis actions.

Light mode
Tertiary base
#767676
Dark mode
Tertiary base
#CDCDCD

Shopping color

Instead of the Pushpin 450, the Skycicle 500 (blue) is the primary color to indicate shopping-related features. The related token is:
$color-background-shopping - Use when conveying a primary action on shopping experiences.

Light mode
Shopping
#0074E8
Dark mode
Shopping
#75BFFF

Background color

Background colors are used behind text or applied to other elements to deliver specific messages or meanings, such as information, success, warning, and error. They are divided into two categories: base colors and weak colors.

Base background colors

Use on UI elements to convey a specific status or message. Usually, they aren't used behind default text.
$color-background-info-base - Use to indicate neutral information.
$color-background-success-base - Use to indicate success.
$color-background-warning-base - Use to indicate warning alerts.
$color-background-error-base - Use to indicate errors.

Light mode
Info base
#0074E8
Recommendation base
#812AE7
Success base
#008753
Warning base
#BD5B00
Error base
#CC0000
Neutral (tertiary base)
#767676
Dark mode
Info base
#75BFFF
Recommendation base
#B190FF
Success base
#6BEC8C
Warning base
#FDC900
Error base
#F47171
Neutral (tertiary base)
#CDCDCD

Weak background colors

Since they have a light tint, these colors can be used behind text.
$color-background-info-weak - Use as a background for neutral information.
$color-background-success-weak - Use as a background for success information.
$color-background-warning-weak - Use as a background for warning alerts.
$color-background-error-weak - Uses as a background for errors.

Light mode
Info weak
#D7EDFF
Recommendation weak
#E9E4FF
Success weak
#C3F9C2
Warning weak
#FFE4C1
Error weak
#FFE0E0
Dark mode
Info weak
#003C96
Recommendation weak
#550AA9
Success weak
#00422C
Warning weak
#7C2D00
Error weak
#660000

Inverse background color

Color used to indicate an inverted background.
$color-background-inverse-base - Use to create an inverted background.

Light mode
Inverse base
#111111
Dark mode
Inverse base
#F9F9F9

Typography color

Standard text colors

Typography colors are used on text elements such as headings and body.
Use the tokens:
$color-text-default - The default text color, such as headings and body text.
$color-text-subtle - For secondary, subtle text color, such as additional info or sub-header.
$color-text-shopping - For text related to shopping products or surfaces.

Light mode
Default
#111111
Subtle
#767676
Shopping
#0074E8
Dark mode
Default
#FFFFFF
Subtle
#A5A5A5
Shopping
#75BFFF

Status text colors

Text colors used to indicate status. Each color has a purposeful meaning. Use the tokens:
$color-text-success - Use as text color to indicate success.
$color-text-warning - Use as text color to indicate a warning or caution.
$color-text-error - Use as text color to indicate an error.

Light mode
Success
#005F3E
Warning
#BD5B00
Error
#CC0000
Dark mode
Success
#39D377
Warning
#E18D00
Error
#F47171

Inverse text color

Color used on top of inverted backgrounds.
$color-text-inverse - Use this token for text layered on top of inverted backgrounds.

Light mode
Inverse
#FFFFFF
Dark mode
Inverse
#111111

Iconography color

The icon colors available indicate status and match the messaging text colors for consistency. For icon colors purposes, use the tokens:

$color-icon-default - Use as the default color for icons.
$color-icon-subtle - Use as the secondary color for icons.
$color-icon-info - Use for info icons.
$color-icon-recommendation - Use for recommendation icons.
$color-icon-success - Use for success icons.
$color-icon-warning - Use for warning icons.
$color-icon-error - Use for error icons.
$color-icon-inverse - Use for icons paired with inverted backgrounds.

Light mode
Default
#111111
Subtle
#767676
Info
#0074E8
Recommendation
#812AE7
Success
#005F3E
Warning
#BD5B00
Error
#CC0000
Inverse
#FFFFFF
Dark mode
Default
#FFFFFF
Subtle
#A5A5A5
Info
#75BFFF
Recommendation
#B190FF
Success
#39D377
Warning
#E18D00
Error
#F47171
Inverse
#111111

Color and accessibility

Please consider accessibility when using colors, as it is our responsibility to deliver an inclusive product that inspires everyone.

Section 508, which aligns with WCAG 2.0 Level AA, establishes a legal standard for the contrast level essential between text and its background. The baseline AA contrast standard is 4.5:1 for most text and 3:1 for large text. We also recommend avoiding pure black text on white helps dyslexia, Irlen Syndrome, light sensitivity, and autism.

Don’t use color exclusively to convey meaning. Color should only be used as an enhancement — if color is the only cue, that cue won’t get through as intended to everyone. Learn more about Accessibility Design considerations.

Other resources for reference: