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 this token when conveying a primary action.
$color-background-brand - Use this token 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 this token 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 this token 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 this token name 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 as a background color to indicate neutral information.
$color-background-success-base - Use as a background color to indicate success.
$color-background-warning-base - Use as a background color to indicate warning alerts.
$color-background-error-base - Use as a background color to indicate errors.
Weak background colors
Since they have a light tint, these colors can be used behind text.
$color-background-info-weak - Use this token as a background color to indicate neutral information.
$color-background-success-weak - Use this token as a background color to indicate success.
$color-background-warning-weak - Use this token as a background color to indicate warning alerts.
$color-background-error-weak - Use this tokens as a background color to indicate errors.
Inverse background color
Color used to indicate an inverted background. Use the token:
$color-background-inverse-base - Use this token as a background color on inverted backgrounds.
Typography color
Standard text colors
Typography colors are used on text elements such as headings and body.
Use the tokens:
$color-text-default - For default text-color, such as headings and body text.
$color-text-subtle - For secondary, subtle text-color, such as additional info or sub-header.
Status text colors
Text colors used to indicate status. Each color has a purposeful meaning. Use the tokens:
$color-text-success - Use this token as text color to indicate success.
$color-text-warning - Use this token as text color to indicate a warning or caution.
$color-text-error - Use this token as text color to indicate an error.
Inverse text color
Colors used on top of inverted backgrounds. Use the tokens:
$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 this token as the default color for icons.
$color-text-icon-subtle - Use this token as the secondary color for icons.
$color-text-icon-success - Use this token for success icons.
$color-text-icon-warning - Use this token for warning icons.
$color-text-icon-error - Use this token for error icons.
$color-text-icon-inverse - Use this token 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: