Foundations overview
Use this as a guide for styling and structuring inclusive interfaces while leveraging common interaction patterns for all Pinterest products.
Accessibility
How to create accessible designs and components that contribute to an accessible product
Motion
Guidelines for animation in product and implementation options
Brand expression
Guidelines for representing brand moments in product
Color
Palettes and guidelines for using color across product interfaces and surfaces
Content Standards
When writing at Pinterest, keep these guiding words in mind
Design tokens
An expanded color palette for charts, graphs and other data visualizations. Includes guidelines for accessibility and usage.
Data visualization
Data visualization
Elevation
How and when to lift UI elements from the base surface via color, borders, shadows and other methods
Forms
Guidelines for form layout, behavior and usage
Iconography
Our current icon library, complete with guidelines on using and creating icons
Illustration
How to use illustration for communicating empty, success, error and loading statuses in the product
International design
Guidelines for internationalization, localization and right-to-left (RTL) languages
Layout
Layout guidelines for mobile and tablet surfaces
Messaging
How to communicate errors, warnings, successes, recommendations and general information on system status
Screen sizes
Responsive breakpoints and screen sizes for desktop, iOS and Android
Typography
A typographic system for a content hierarchy that is scannable and efficient