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 Gestalt Colors & Styles Figma 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.
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.
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.
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.
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.
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.
Inverse background color
Color used to indicate an inverted background.
$color-background-inverse-base - Use to create an inverted background.
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.
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.
Inverse text color
Color used on top of inverted backgrounds.
$color-text-inverse - Use this token for text layered on top of inverted backgrounds.
Iconography color
The icon colors available indicate status and match the messaging text colors for consistency. For icon colors purposes, use the tokens:
$color-text-icon-default - Use as the default color for icons.
$color-text-icon-subtle - Use as the secondary color for icons.
$color-text-icon-success - Use for success icons.
$color-text-icon-warning - Use for warning icons.
$color-text-icon-error - Use for error icons.
$color-text-icon-inverse - Use for icons paired with inverted backgrounds.
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: