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
Messaging
How to communicate errors, warnings, successes, recommendations and general information on system status.
Typography
A typographic system for a content hierarchy that is scannable and efficient
Iconography
Our current icon library, complete with guidelines on using and creating icons
Layouts
How to create accessible designs and components that contribute to an accessible product
Screen sizes
Responsive breakpoints and screen sizes for desktop, iOS and Android