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.
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
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.