Color fills
Pinterest product UI should be comprised of our hero and neutrals colors. We should continue to use our baseline color palette to allow photography, actions, and content to stand out. However, there are situations where color fills can help to express brand moments on product surfaces.
We recommend using the extended color palette to bring attention to a specific brand or marketing moment, such as celebratory news, a new feature announcement, or educational flows. However, be mindful of color choices when applying color fills to UI elements next to status messages, as they use semantic colors to convey a specific meaning. See background color usage for reference.
The Core brand team created a baseline brand palette with some of our extended colors; you can enable it as a library in your Figma file.
Color usage
Color fills and dark-mode
Aim for sufficient color contrast in all appearances, no matter the color theme (light or dark mode). Our colors were defined to support you in achieving a reasonable contrast ratio between your foreground and background content in both appearances. At a minimum, ensure the contrast ratio between colors is no lower than 4.5:1, as this ratio ensures that your foreground content stands out from the background and helps your content meet recommended WCAG 2.1 AA accessibility standards.
We suggest checking
Brand color expression + accessibility for references on color combination considering both themes. You can also use
color pairing Figma plugin to test your color contrast level.
When using images or icons over color fills, ensure they look good in both themes. For icons, use the appropriate color tokens for each theme to provide readability and a great usability experience. For images, we suggest using the same asset if it looks good in both light and dark appearances. Consider softening the image treatment to avoid eye strain or to improve visibility; use your best judgment.
For more information about colors, check out our color documentation.
Color fills and typography
Headings
Avoid using extended colors to text elements, as changing colors could lead to usability and cognitive issues due to their semantic meaning and required contrast level. Refer to our text color tokens for guidance.
Body
Body should always be $color-text-default (default color), $color-text-inverse (text over a dark-colored background), or $color-text-subtle (secondary color), with the exception of status text colors, as they are needed to convey a certain meaning for specific cases. Avoid using alternative colors on body content, which could lead to accessibility issues.
Please note: It only applies to product UI elements. For marketing websites, materials or promotional landing pages reach out to Core Brand for text color guidance.
See below examples of UI elements using the appropriate text colors over color fills.
Color fills and iconography
Gestalt icons should always use established colors, as our color props are semantically aligned with our iconography principles.
If colors are needed to express a brand moment on the product, consider adding a colored background to the icon instead of adding alternative colors to the icon component. Ensure it meets the WCAG 2.1 AA accessibility standard with the proper contrast between foreground and background. See the examples below.
Accessibility
When playing with color fills, we recommend using a tool like aremycolorsaccessible.com to check the foreground color against the background color. In Figma, you can use the Able or Pinterest brand color palettes plugins to check color contrast in your designs.
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.
Make sure your color fills have great contrast in our light and dark mode color themes.
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.
Extended color palette
The extended color palette displays all the available shades and tints of each color in the palette. The colors are named and numbered for easy reference. The usage of these colors come in handy for brand moments. In order to ensure accessible contrast for color pairings, we require our darkGray Text color to be used for any colors 400 and below. For 500 and above, we recommend using white. Learn more by checking our color palette documentation.
The 450 colors are primarily reserved for Brand usage as they are among the least accessible colors. This set works best within larger brand moments, and is not commonly used for functional color pairings.