Foundations overview
Here you will find the foundational elements for designing UI components, surfaces and patterns. These include graphic elements like iconography, color and typography to structural. They also cover elevation, layout and accessibility.
Accessibility
How to create accessible designs and components that contribute to an accessible product
Animation
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
Layouts
How to create accessible designs and components that contribute to an accessible product
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