Pinterest · Design system breakdown
Image-first design system tuned for visual discovery products.
A community-authored style reference in Markdown — colors, type, spacing, and an AI-ready prompt. Unofficial; not affiliated with Pinterest.
Pinterest open-sourced Gestalt in 2019 after years of internal use. It powers Pinterest's web and mobile surfaces — boards, pins, search, ads — and was built around a content type that's fundamentally visual rather than textual, which forces interesting decisions about contrast, density, and motion.
A central design systems team owns Gestalt; product designers and engineers contribute via a public RFC and review process. The library is open-source on GitHub with a maintained changelog and a discoverable component status taxonomy (alpha, beta, stable, deprecated).
The identity-bearing decisions, rendered. Names and values are illustrative — refer to the system's official tokens reference for the canonical, current set.
color-text-default
Default body text
color-background-default
Page surface
color-text-error
Pinterest red, error emphasis
space-400
Default control spacing
rounding-300
Default card and pin radius
elevation-floating
Hover and floating UI
Exactly what ships in gestalt-design.md — plus the same token snapshot restated as CSS custom properties. Copy either, or feed the Markdown straight to an AI coding tool as styling context.
# Gestalt — Design Style Reference > **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Pinterest. "Gestalt" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values. **System:** Gestalt **Owner:** Pinterest **Official documentation:** https://gestalt.pinterest.systems/ --- ## Summary Image-first design system tuned for visual discovery products. ## Origin Pinterest open-sourced Gestalt in 2019 after years of internal use. It powers Pinterest's web and mobile surfaces — boards, pins, search, ads — and was built around a content type that's fundamentally visual rather than textual, which forces interesting decisions about contrast, density, and motion. ## Governance A central design systems team owns Gestalt; product designers and engineers contribute via a public RFC and review process. The library is open-source on GitHub with a maintained changelog and a discoverable component status taxonomy (alpha, beta, stable, deprecated). ## Known for - Masonry layout primitives — Pinterest's pin grid is the canonical reference for asymmetric responsive grids and Gestalt ships them as supported components. - A documented motion language tuned for image-heavy surfaces — fades, scale-ins, and shimmer placeholders are first-class. - Public, opinionated guidance on internationalization and right-to-left layout that goes beyond mirroring. ## Underrated - Gestalt's icon set is large, internally consistent, and exported in a clean, themeable React component API. - The accessibility documentation per component (focus order, screen-reader expectations) is more complete than most peer systems acknowledge. ## Watch out for - Patterns assume image-led surfaces. Applying Gestalt to a content- or data-heavy product means rethinking density assumptions. - Theming is opinionated around Pinterest's brand; adopting Gestalt visually unaltered will make your product look like Pinterest. ## Design tokens (illustrative) Representative token values, restated as facts for reference. Names and values are illustrative — refer to the official tokens reference for the canonical, current set. | Token | Value | Role | | --- | --- | --- | | `color-text-default` | `#111111` | Default body text | | `color-background-default` | `#ffffff` | Page surface | | `color-text-error` | `#ad081b` | Pinterest red, error emphasis | | `space-400` | `16px` | Default control spacing | | `rounding-300` | `12px` | Default card and pin radius | | `elevation-floating` | `0 2px 8px rgba(0,0,0,0.1)` | Hover and floating UI | ## Style brief The identity-bearing decisions, at a glance: - **Surface:** `#ffffff` (Page surface) - **Body text:** `#111111` (Default body text) - **Corner radius:** `12px` (Default card and pin radius) - **Base spacing:** `16px` (Default control spacing) - **Elevation:** `0 2px 8px rgba(0,0,0,0.1)` (Hover and floating UI) ## Components worth studying - **Masonry** — Performance-tuned virtualized masonry grid — the reference implementation for image-led feeds. - **Pog (icon button)** — Compact icon-only action with documented focus, hover, and active states. - **Module** — Composable disclosure container used for filter rails and side panels. ## When to choose Gestalt Pick Gestalt if you're building visual discovery, content browsing, or media-led commerce experiences and want a real masonry primitive. Don't pick it for forms-heavy admin tools — it's not where its patterns live. ## Apply this style with an AI tool Paste this into your AI coding assistant as a direction, then iterate: > Design in the spirit of Gestalt by Pinterest — Image-first design system tuned for visual discovery products. Use corner radius around 12px, and a restrained, consistent scale. Lean into what it's known for: Masonry layout primitives — Pinterest's pin grid is the canonical reference for asymmetric responsive grids and Gestalt ships them as supported components. Match the intent, not the pixels; adapt it to my product rather than cloning it. ## Official references - [Gestalt docs](https://gestalt.pinterest.systems/) - [Gestalt on GitHub](https://github.com/pinterest/gestalt) - [Foundations](https://gestalt.pinterest.systems/foundations/accessibility) --- _Generated by [designsystems.one](https://www.designsystems.one/design-systems/gestalt) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._
If you're evaluating this system
Pick Gestalt if you're building visual discovery, content browsing, or media-led commerce experiences and want a real masonry primitive. Don't pick it for forms-heavy admin tools — it's not where its patterns live.
