---
name: Pinterest
colors:
  primary: '#e60023'
  consumer-ink: '#211922'
  muted: '#62625b'
  secondary-surface: '#e5e5e0'
  control-border: '#91918c'
  canvas: '#ffffff'
  business-ink: '#111111'
  business-action: '#111111'
  on-action: '#ffffff'
typography:
  consumer-ui:
    fontSize: 12px
    fontWeight: 400
    use: Repeated consumer product/auth control sample
  consumer-form:
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    use: Consumer auth form input
  business-body:
    fontSize: 16px
    fontWeight: 400
    use: Business-marketing actions and body samples
  business-tab:
    fontSize: 15px
    fontWeight: 700
    use: Business-marketing tab
rounded:
  consumer-control: 16px
  business-tab: 12px
  business-action: 30px
spacing:
  xs: 4
  sm: 8
  md: 12
  lg: 20
components:
  consumer-primary-action:
    type: button
    backgroundColor: '#e60023'
    textColor: '#000000'
    border: 2px solid transparent
    rounded: 16px
    padding: 6px 14px
    typography: 12px / 400 Pin Sans
    states: Default baseline captured; no changed interaction style promoted.
    use: Consumer header action; home::[data-omd-capture=7]
    height: 48px
    pressed: 'bg #b2001b, transform matrix(0.944444, 0, 0, 0.944444, 0, 0) (:hover + :active)'
    focus: 'border #ffffff, outline #435ee5 solid 2px on :focus-visible'
  consumer-secondary-action:
    type: button
    backgroundColor: '#e5e5e0'
    textColor: '#000000'
    border: 2px solid transparent
    rounded: 16px
    padding: 6px 14px
    typography: 12px / 400 Pin Sans
    states: Default baseline captured; no changed interaction style promoted.
    use: Consumer header secondary action; home::[data-omd-capture=8]
  consumer-form-input:
    type: input
    textColor: '#000000'
    border: '1px solid #91918c'
    rounded: 16px
    padding: 11px 15px
    typography: 16px / 400 Pin Sans
    states: Default baseline captured; no changed focus or error style promoted.
    use: Consumer auth input; home::[data-omd-capture=19]
  business-action:
    type: button
    backgroundColor: '#111111'
    textColor: '#ffffff'
    rounded: 30px
    padding: 0px 20px
    typography: 16px / 400 PinterestSansPro
    states: Default baseline captured; no changed interaction style promoted.
    use: Business-marketing action; surface-3::[data-omd-capture=9]
  business-outline-action:
    type: button
    backgroundColor: '#ffffff'
    textColor: '#111111'
    rounded: 30px
    padding: 0px 20px
    typography: 16px / 400 PinterestSansPro
    states: Default baseline captured; no changed interaction style promoted.
    use: Business-marketing outline action; surface-3::[data-omd-capture=10]
  business-tab:
    type: tab
    textColor: '#111111'
    rounded: 12px
    padding: 14px 16px
    typography: 15px / 700 PinterestSansPro
    states: 'selected observed: #ffffff text; interaction capture records tab-selected'
    use: Business-marketing tab; surface-3::[data-omd-capture=16]
fonts:
  roles:
    ui: Pin Sans
    business-marketing: PinterestSansPro
---

# Design System Inspiration of Pinterest

## Overview

### Visual Theme & Atmosphere

Pinterest is a visual discovery platform for searching, saving, and shopping ideas. Its public Gestalt design-system introduction frames the product as helping people create a life they love; the public business explanation describes Pins as the image, video, and link-bearing units that connect browsing to action. The supplied consumer capture expresses that role with an image-led, low-chrome surface: a warm plum ink, quiet olive-gray supporting text, a single red action, and compact rounded account controls. Official brand guidance similarly fixes the recognizable mark as a white script P in a red circle.

The observed public ecosystem is deliberately not one uniform UI. The signed-out consumer/auth route uses loaded `Pin Sans`, warm `#211922` ink, `#E60023` consumer action, and `#E5E5E0` secondary surface. Pinterest Business is a separate marketing surface with loaded `PinterestSansPro`, `#111111` actions, larger 30px pills, and a selected-tab treatment. These route-local facts are documented side by side without treating business lead-generation chrome as consumer-product UI.

### Primary tasks

- Search for an idea and save it to come back to.
- Click through from a Pin to buy what it shows.

### Iconography & Imagery

Pinterest’s official business guidance describes Pins as visual content that can include images or videos and recommends that creative put visuals first. The supplied captures do not establish a reusable icon set, stroke width, media-card ratio, or image treatment, so those details are omitted.

#### Do

- Keep the Pinterest badge in its red circle and pair external uses with an account context or call to action, as the official brand guidelines require.
- Keep consumer and business-marketing component examples source-scoped.
- Let visual content carry the discovery story rather than inventing unobserved decorative chrome.

#### Don't

- Do not recolor, outline, or add effects to the Pinterest badge.
- Do not represent a Pinterest Business action as an observed consumer-product CTA.
- Do not substitute a system or third-party font for a named Pinterest family.

### Brand Narrative

Pinterest describes itself as a visual discovery platform where people search, save, and shop ideas. Its public Gestalt introduction connects the product system to experiences that inspire people to create a life they love, while its business explanation connects visual browsing to saving, clicking, and buying. Current official campaign coverage continues that position: inspiration is presented as a step toward life away from the screen rather than an end in itself.

The red-badge mark provides the most explicit first-party brand expression in the sources checked here. Public brand guidance defines it as a white script P in a red circle and limits black or white versions to constrained-colour contexts. This narrative evidence explains the documented mark and product purpose; it does not authorize additional UI tokens.

### Principles

1. **Visual discovery should lead to action.** *UI implication:* retain image/video-first content context where it is actually supplied; do not replace it with generic dashboard chrome.
2. **Inspiration is the product promise.** *UI implication:* make consumer action language practical and supportive, using the first-party guidance rather than invented hype.
3. **The badge retains its circle and colour treatment.** *UI implication:* do not recolour, outline, or add effects to the Pinterest mark.
4. **Source domains stay distinct.** *UI implication:* business-marketing typography and 30px actions are not defaults for consumer product/auth controls.

### Personas

Official sources checked for this update describe broad audiences such as people discovering ideas, shoppers, creators, and businesses, but do not provide verified user-persona definitions suitable for this reference.

## Colors

### Color & Typography

#### Color tokens

- `#E60023` — consumer primary action background on `home` and `surface-2`.
- `#211922` — consumer ink on the signed-out/product-auth surfaces.
- `#62625B` — consumer muted-text sample.
- `#E5E5E0` — consumer secondary-action background.
- `#91918C` — consumer auth-input border.
- `#FFFFFF` — observed consumer canvas/action text and business outline surface.
- `#111111` — Pinterest Business marketing ink and filled-action background; it is not promoted as a consumer-product substitute.

#### Typography evidence classes

- **Live consumer computed use:** `Pin Sans` is loaded/high confidence with 118 visible uses across body, heading, input, button, text, and toggle roles. The collector matches computed family use to eight Pinterest-hosted `s.pinimg.com/font/Pin-Sans-*` files. It is the consumer UI family token.
- **Live business-marketing computed use:** `PinterestSansPro` is loaded/high confidence with 199 visible uses across body, buttons, headings, list items, tabs, and text. The collector matches it to four Pinterest-hosted `Pinterest-Sans-Pro-*` files. It remains a business-marketing family token rather than a consumer-family replacement.
- **Declared-only assets:** `HaasGrotDisp`, `HaasGrotText`, `PinterestSans`, `PinterestSansLC`, `PinterestSansTPJ`, and `PinterestUI` have captured `@font-face` sources but zero visible use. They remain declared-only; no specimen or UI token is inferred.
- **Unresolved embedded face:** one Google Sign-In control reports `Google Sans` with no matching loaded FontFace or Pinterest source. It is third-party chrome and is not a Pinterest token.
- **Licence boundary:** the official search found Pinterest-hosted font files but no first-party public licence granting downstream reuse of Pin Sans or PinterestSansPro. The family names and observed metadata are recorded; the files are not reusable project assets.

## Layout

### Layout & Grid

- The supplied consumer capture is a public signed-out/product-auth route at 1440×900; it contains a 48px search control and 48px account actions.
- Pinterest Business is a public marketing route at 1440×900; its 60px action examples and 47px tabs are retained only for that surface.
- Pinterest’s official business guidance describes Pins as visual content and recommends vertical 2:3 advertising canvases, but the supplied capture does not establish a reusable consumer masonry-column count, card ratio, breakpoint, or responsive grid contract.

### Responsive Behavior

The raw bundle is desktop-only (1440×900). Pinterest’s official business creative guidance recommends a vertical 2:3 canvas for mobile advertising, but it does not prove a consumer-product breakpoint or responsive component behavior. No breakpoint table is inferred.

## Elevation & Depth

### Elevation

The retained consumer controls have `box-shadow: none`. Business marketing action samples include a 2px `#111111` outline-like shadow, but the one route-local observation does not establish a shared elevation scale.

### Values kept in prose

Measured values the DESIGN.md token grammar cannot carry, kept verbatim:

- `shadow.none`: `none`

## Shapes

### Spacing & Shape

Observed spacing values retained as a conservative source-bound set are `4 / 8 / 12 / 20px`. Consumer account and form controls use 16px radii; the business marketing tab is 12px and its large actions are 30px. These are observations of separate domains, not a universal radius prescription.

## Motion & Easing

No motion duration, easing curve, transition, or reduced-motion rule is supported by the supplied raw capture or the official sources checked for this update. No motion token is claimed.

## Components

### Consumer primary action

**Default**
- Background: `#E60023`
- Text: `#000000`
- Border: `2px solid transparent`
- Radius: `16px`
- Padding: `6px 14px`
- Font: `12px / 400 Pin Sans`
- Use: Consumer header action; `home::[data-omd-capture="7"]`, also repeated on `surface-2`.

### Consumer secondary action

**Default**
- Background: `#E5E5E0`
- Text: `#000000`
- Border: `2px solid transparent`
- Radius: `16px`
- Padding: `6px 14px`
- Font: `12px / 400 Pin Sans`
- Use: Consumer header secondary action; `home::[data-omd-capture="8"]`, also repeated on `surface-2`.

### Consumer auth input

**Default**
- Text: `#000000`
- Border: `1px solid #91918C`
- Radius: `16px`
- Padding: `11px 15px`
- Font: `16px / 400 Pin Sans`
- Use: Consumer auth input; `home::[data-omd-capture="19"]`, also repeated on `surface-2`.

### Business marketing action

**Default**
- Background: `#111111`
- Text: `#FFFFFF`
- Radius: `30px`
- Padding: `0px 20px`
- Font: `16px / 400 PinterestSansPro`
- Use: Pinterest Business marketing action; `surface-3::[data-omd-capture="9"]`.

### Business marketing outline action

**Default**
- Background: `#FFFFFF`
- Text: `#111111`
- Radius: `30px`
- Padding: `0px 20px`
- Font: `16px / 400 PinterestSansPro`
- Use: Pinterest Business marketing outline action; `surface-3::[data-omd-capture="10"]`.

### Business marketing tab

**Default**
- Text: `#111111`
- Radius: `12px`
- Padding: `14px 16px`
- Font: `15px / 700 PinterestSansPro`
- Selected: White text observed at `surface-3::[data-omd-capture="15"]`; tab selection is recorded by two `interactions[]` entries.
- Use: Pinterest Business marketing tab; unselected representative `surface-3::[data-omd-capture="16"]`.

No hover, focus, pressed, disabled, menu, dialog, validation, or responsive component variant is claimed beyond that tab-selection interaction provenance.

---

Legacy global component, font, responsive, motion, and product-state claims were removed because the supplied 2026-07-13 capture establishes only the selector- and surface-scoped observations above.

### Published component roster (86 published, none measured here)

Gestalt publishes **86 components**, read from its own index at  on
2026-09-19. Every host in this group serves a shell to a plain fetch, so the names come from the
rendered page in a browser. No value, state or geometry below is asserted by this reference.

Accordion, ActivationCard, Avatar, AvatarGroup, AvatarGroupCluster, Badge, BannerCallout, BannerOverlay, BannerSlim, BannerUpsell, Box, Button, ButtonGroup, ButtonLink, ButtonSocial, ButtonToggle, ChartGraph, Checkbox, Collage, ColorSchemeProvider, Column, ComboBox, Container, Datapoint, DateField, DatePicker, DateRange, Divider, Dropdown, Fieldset, Flex, Heading, HelpButton, Icon, IconButton, IconButtonFloating, IconButtonLink, IconCompact, Image, Indicator, Label, Layer, Letterbox, Link, List, Mask, Masonry, Modal, ModalAlert, NumberField, OverlayPanel, PageHeader, Pog, Popover, PopoverMessage, Pulsar, RadioGroup, SearchField, SearchGuide, SearchGuideLink, SegmentedControl, SelectList, SheetMobile, SideNavigation, Spinner, Status, Sticky, Switch, Table, TableOfContents, Tabs, Tag, TagData, TapArea, TapAreaLink, Text, TextArea, TextCompact, TextField, TextUI, TileData, Toast, Tooltip, Video, WashAnimated, ZIndex

This is the **web** platform list; Gestalt documents iOS and Android separately and those are
not enumerated here.

### States

The supplied evidence records two business-marketing tab interactions and selected/unselected text treatments. It does not establish consumer loading, empty, error, success, toast, disabled, modal, or validation state contracts. Those unobserved states are intentionally omitted rather than synthesized.

Live state probe, 2026-10-16 (), `consumer-primary-action`: pressed — bg #b2001b, transform matrix(0.944444, 0, 0, 0.944444, 0, 0); focus — border #ffffff, outline #435ee5 solid 2px.

## Voice & Tone

Pinterest’s first-party product and business materials consistently frame the service around inspiration becoming action: people search, save, shop, and create a life they love. The approved external-language examples in the brand guidelines include “Follow on Pinterest”, “Find more ideas on Pinterest”, and “Get inspired on Pinterest”; they prohibit “Trending on Pinterest”, “Trending Pins”, and using “Pin” as a verb. This is official communications guidance, not a reconstructed in-product copy library.

## Agent Prompt Guide

Use the requested source domain explicitly. For a consumer signed-out/auth example, use `Pin Sans`, plum `#211922` ink, `#E60023` primary action, and `#E5E5E0` secondary action with the selector-backed 16px control radius. For a Pinterest Business marketing example, use `PinterestSansPro`, charcoal `#111111`, and the observed 30px action radius. Do not blend the two into a claimed single system.

## Governance

### Known Gaps

- **Contrast, `consumer-primary-action`.** Text `#000000` on `#e60023` measures 4.39:1, below the WCAG AA 4.5:1 minimum for normal-size text. Recorded as measured, not adjusted.