Brand expression

We consider brand expression in the product the combination of visual elements (colors, typography, photography, motion, and other assets) to provide a delightful experience for Pinners by bringing Pinterest brand touch-points through the user experience, such as promoting a new feature, launching new tools, and reinforcing marketing messages within the product UI.

The guidelines below aim to guide you on how to incorporate brand expression into the product, adding unique value to Pinners. They aren't intended to determine what specific surfaces must look like; instead, it is meant to illustrate the principles and general usage of brand expressions respecting usability and accessibility best practices.

These guidelines will broadly align with the brand standards. Still, they will follow our design principles, and there are areas where they may diverge as our focus is brand expression specific to product UI rather than marketing materials and campaigns.

We suggest continuously checking for comprehension and usability when bringing brand moments to the product.

Usage guidelines

When to use
  • Onboarding flows
  • Celebratory moments (first launching the app, first boards, reaching a certain amount of followers, special milestones)
  • In-product marketing moments
  • Ads campaigns, challenges or trends
  • Launch or login screens
When not to use
  • Performing critical tasks or blocking users to complete a task
  • Competing with content and Pins
  • Modifying product UI patterns or Gestalt components
  • Causing comprehension or accessibility issues
  • Without a purpose as a decorative element

Be mindful of when and where to bring brand expressions into your design. If color fills, imagery and other brand elements are needed to reinforce brand touch-points within your design, then go for it; if not, aim to follow our foundation guidelines. A consistent design allows Pinterest content to shine while ensuring a great usability experience.

Below we list the UI elements you can use and the ones you should avoid when bringing brand expression within your product UI.

UI elements and Brand expression

UI elements to bring brand expression

UI elements to bring brand expression
  • Product upsells
  • Hero banners
  • Cards
  • Carousels
  • Modals/OverlayPanels

Consider brand expression

When to consider brand expression
  • Dashboards(when applicable and it does not break a component

Elements to avoid brand expression

Elements to avoid brand expression
  • Core UI patterns
  • Text components
  • CTAs and other action components
  • Tables
  • Form components

Best practices

Example of appropriate use of brand baseline colors to emphasize a brand moment.
Do

Use color fills (brand baseline colors) to emphasize brand moments if appropriate to create a delightful Pinner experience (e.g., feature improvement announcement, in-product marketing moments). Ensure to check color contrast achieving WCAG 2.1 AA accessibility standards.

Example of inappropriate use of alternative colors to emphasize a brand moment.
Don't

Use alternative colors to modify components colors or UI patterns. Color should be applied purposefully as it can convey meaning in multiple ways.

Example of using color fills in a celebratory moment.
Do

Use color fills in celebratory moments, such as telling good news or highlighting Pinner's achievements.

Example of inappropriately adding text over photography.
Don't

Apply text over photography as it could lead to contrast issues and make it inaccessible through assistive devices.

Example of using appropriate colors with typography.
Do

Apply text over color fills using the appropriate text color tokens. It will ensure an accessible, readable experience.

Example of using inappropriate colors with typography.
Don't

Use alternative colors on text content and icons as it could lead to major contrast accessibility and usability issues. This rule doesn't cover marketing materials, and promotional landing pages.

Example of using color fills to announce a new feature.
Do

Use color fills when announcing new features (e.g., new way to search for hairstyle ideas).

Example of using color fills in core UI patterns.
Don't

Apply color fills on core UI patterns and critical tasks actions. It can distract Pinners from completing a task.

Accessibility

Be mindful of color usage. Pinterest’s goal as a company is to meet WCAG 2.1 AA standards, so 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.

When adding photography or any imagery source, ensure it translates well in both themes (light and dark-mode). Your image source should be equally visible in both themes, especially when you have colored backgrounds contrasting with a photo or an illustration.

Ensure to add ALT text to your image, so users who rely on assistive technologies can access your image content.

Localization

Make sure to localize in-product marketing assets considering all the languages and cultures.

Voice and tone

Check out our brand voice guidelines.

Accessibility
How to create accessible designs and components that contribute to an accessible product

Color
Palettes and guidelines for using color across product interfaces and surfaces

Design tokens
An expanded color palette for charts, graphs and other data visualizations. Includes guidelines for accessibility and usage.

Edit page on GitHub