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.
- 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
- 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
- Product upsells
- Hero banners
Consider brand expression
- Dashboards(when applicable and it does not break a component
Elements to avoid brand expression
- Core UI patterns
- Text components
- CTAs and other action components
- Form components
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.
Use alternative colors to modify components colors or UI patterns. Color should be applied purposefully as it can convey meaning in multiple ways.
Use color fills in celebratory moments, such as telling good news or highlighting Pinner's achievements.
Apply text over photography as it could lead to contrast issues and make it inaccessible through assistive devices.
Apply text over color fills using the appropriate text color tokens. It will ensure an accessible, readable experience.
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.
Use color fills when announcing new features (e.g., new way to search for hairstyle ideas).
Apply color fills on core UI patterns and critical tasks actions. It can distract Pinners from completing a task.
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.
Make sure to localize in-product marketing assets considering all the languages and cultures.
How to create accessible designs and components that contribute to an accessible product
Palettes and guidelines for using color across product interfaces and surfaces
An expanded color palette for charts, graphs and other data visualizations. Includes guidelines for accessibility and usage.