Skip to content
Skip to content
Gestalt
Get started
Components
Foundations
Roadmap
What's new
  • Get started
    • About Us
    • Designers
    • Developers
    • How to work with us
    • FAQ

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

© 2023 Pinterest
; Opens a new tab
Careers
; Opens a new tab
Code sandbox
; Opens a new tab
GitHub
; Opens a new tab
This site is powered by Netlify
; Opens a new tab