# 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/
**Visual character:** Image-first warmth: generous 16px card corners, quiet grays that defer to Pins, and one unmistakable Pushpin red.

---

## Summary

Image-first design system tuned for visual discovery products.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Pushpin Red / Primary | `#e60023` | `--gestalt-red-pushpin-450` | Pinterest brand action |
| Dark Gray Text | `#111111` | `--color-text-default` | Primary text |
| Secondary Text | `#767676` | `--color-text-subtle` | Secondary text |
| White | `#ffffff` | `--color-background-default` | Surfaces |
| Gray Wash | `#efefef` | `--color-background-secondary-base` | Subtle background |
| Border | `#cdcdcd` | `--color-border-container` | Borders |
| Success | `#008753` | `--color-text-success` | Success |
| Error | `#cc0000` | `--color-text-error` | Errors |

## Typography

- **Body:** System stack — weights 400, 600, 700 — `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-600 | `36px` | `43px` |
| heading-500 | `28px` | `34px` |
| heading-400 | `24px` | `29px` |
| body-300 | `16px` | `24px` |
| body-200 | `14px` | `21px` |

## Spacing

Base unit: `4px (boints)`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| default | `8px` |
| large | `16px` |
| pill | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| floating | `0 0 8px rgba(0,0,0,0.10)` |

## Motion

| Name | Value |
| --- | --- |
| default | `200ms ease` |

## Quick start (CSS)

```css
/* Gestalt — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://gestalt.pinterest.systems/ */

:root {
  /* Color */
  --gestalt-red-pushpin-450: #e60023; /* Pinterest brand action */
  --color-text-default: #111111; /* Primary text */
  --color-text-subtle: #767676; /* Secondary text */
  --color-background-default: #ffffff; /* Surfaces */
  --color-background-secondary-base: #efefef; /* Subtle background */
  --color-border-container: #cdcdcd; /* Borders */
  --color-text-success: #008753; /* Success */
  --color-text-error: #cc0000; /* Errors */

  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Type scale */
  --text-heading-600: 36px /* line-height 43px */;
  --text-heading-500: 28px /* line-height 34px */;
  --text-heading-400: 24px /* line-height 29px */;
  --text-body-300: 16px /* line-height 24px */;
  --text-body-200: 14px /* line-height 21px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radius */
  --radius-default: 8px;
  --radius-large: 16px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-floating: 0 0 8px rgba(0,0,0,0.10);

  /* Motion */
  --motion-default: 200ms ease;
}
```

## 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.

## 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. Character: Image-first warmth: generous 16px card corners, quiet grays that defer to Pins, and one unmistakable Pushpin red. Use a primary colour near #e60023, the typeface "System stack" (or a close equivalent), corner radius around 8px, a spacing rhythm on a 4px (boints) base. 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._