# Pinterest: brand book and build spec

One red, a white page and a wall of real photos in rounded tiles. Pinterest keeps the frame quiet (black and warm-gray type, 16px-radius buttons, a heavy friendly grotesk) so Pinners' pictures carry all the color, and talks in short, warm, slightly playful lines.

From unfairly.ai/brand-guidelines/pinterest, checked 2026-10-31. Unofficial study; not affiliated with Pinterest.

Every value is labelled with where it came from: **published** (the brand says it), **observed** (measured or seen on its live site, with the date), **our reading** (inferred from the evidence) or **our recipe** (how we apply the system). Files beside this one: tokens.css, tokens.json (DTCG 2025.10), kit.json.

**Thesis (our reading):** The content is the brand. Pinterest designs a neutral frame of white, black and warm gray with a single red action, and lets a grid of rounded photo tiles do the expressing. Based on: Gestalt: baseline colors "allow the Pinterest content to shine"; brand expression must never compete with Pins; the homepage uses red only on buttons and the logo.

## Purpose

Purpose (design system): Build experiences that inspire people to create the life they love. (published; https://gestalt.pinterest.systems/)

Story: Pinterest presents itself as a visual search and shopping platform: people find ideas as Pins, collect them on boards, and act on them. Its newer framing adds Pinterest Intelligence (visual understanding plus AI) and a "more positive place online" stance built on inclusive search, teen safety and wellbeing. (published)

| Value | What it means in the work | Source |
|---|---|---|
| Inspiration starts with inclusion | A diverse, equitable workplace and inclusive product features (paraphrase). | published: https://newsroom.pinterest.com/company/ |
| A more positive platform | Everyone who visits should feel seen and safer (paraphrase). | published: https://newsroom.pinterest.com/company/ |
| Protecting our planet | Credible emissions cuts and renewable power (paraphrase). | published: https://newsroom.pinterest.com/company/ |

## Fixed and flexible

Never changes:
- The red P badge, never altered
- Pushpin red #E60023 as the only action color
- Real photos in rounded tiles
- Short, warm, sentence-case copy

The one thing that varies: How much brand color: product UI stays neutral; brand moments (onboarding, celebrations, launches) may use color fills and reserved colors when contrast holds.

## Positioning

- **Statement**: The visual search and shopping platform where people discover ideas and turn inspiration into action. (published)
- **Category**: Visual search and shopping platform (newsroom); visual discovery for ideas, plans and shopping (published)
- **Audience**: People looking for ideas for their home, style, food, beauty and plans; and, on the business side, advertisers who want to reach them while they plan and shop. (published)
- **Problem**: Feeds built for likes instead of for what you actually like; ideas you can't yet put into words (paraphrase). (published)
- **Promise**: Find ideas that fit your taste, save them, and bring them to life. (published)
- **Differentiators**: Visual search: search within an image to find the objects and styles in it.; Boards: collections of saved Pins for planning, shareable as group boards.; Inclusive filters: skin tone range, hair type and body type.; Intent: people arrive to plan and shop, so ads are welcome rather than interruptions.
- **Alternatives**: Social feeds built around likes and followers (implied by "not just what gets likes").; Text search for ideas you can't describe in words (implied by visual search framing).

## Messaging

Boilerplate (published): Pinterest is a visual search and shopping platform where over 600 million people a month discover ideas, find products they love and turn inspiration into action, powered by Pinterest Intelligence. Headquartered in San Francisco; on iOS, Android and pinterest.com.

Taglines:
- Create the life you love (Homepage H1 ("...on Pinterest"); echoes Gestalt's purpose line)
- A more inspired internet. A better world. (Newsroom company page, impact section)
- Then get started. All on Pinterest (Newsroom company page header (with "Get inspired"))

| Pillar | Claim | Proof | Label |
|---|---|---|---|
| Inspiration to action | Discover an idea, save it, then try, buy or do it. | 661 million monthly active users (newsroom footnote 1).; 1.5 billion Pins saved every week. | published |
| A more positive place online | Find what you actually like, not just what gets likes; safety and wellbeing built in. | Pinterest Impact Fund: $30M invested in 60+ nonprofits for emotional wellbeing.; 100% renewable electricity in Pinterest offices. | published |
| Search that sees you | Visual search and inclusive filters (skin tone range, hair type, body type) so results reflect the person. | Search results can be customized by skin tone range and hair type. | published |
| Shopping with intent | People come to plan and shop, so ads feel relevant rather than distracting. | More than 50% of users think of Pinterest as a place to shop. | published |

They never claim:
- Never imply Pinterest sponsors, endorses or partners with you (badge only with a link to your own account).
- Don't call your Pins "trending"; "popular" only with Analytics proof.
- Pinterest in video, TV or film needs written approval from a partner manager, requested 10+ business days ahead.
- Audience numbers differ by page (newsroom: "over 600 million" in the boilerplate, 661 million in the stat block, "500+ million" in the impact copy): quote the dated stat with its footnote.

## Voice

Tone words: Simple, Conversational, Clever.

Traits:
- Simple, but not Fluffy (published)
- Conversational, but not Stiff (published)
- Clever, but not Hyperbolic (published)

- Pinterest voice: simplify ideas to make the complex clear; keep it conversational so you don't lose your reader; add a dash of cleverness to grab attention (Gestalt).
- Short sentences and short words; read it out loud; put the best stuff up top.
- Wordplay, a pun or alliteration is welcome when it fits and avoids hyperbole. The seasonal homepage does exactly this ("spellbinding", "bewitching").
- Homepage voice is plainer than campaigns: an invitation ("Create the life you love on Pinterest"), then feature names stated as verbs plus outcome ("Search by skin tone", "Collaborate with group boards").
- Sentence case everywhere on the homepage (observed): headlines, buttons, footer links.
- Third-party rules (business brand guidelines) govern how others talk about Pinterest; the "save, not Pin" verb rule applies to Pinterest's own copy too.

Rules a copy check enforces:
- Sentence case headlines
- American spelling
- Write as "we", to "you"
- Sentences of 20 words or fewer
- No exclamation marks
- Say "save", not "pin (as a verb)" or "pinned" or "pinning"
- Never: Trending on Pinterest, Trending Pins. Say "Popular on Pinterest" (only with Analytics proof) instead
- Primary partner call to action is "Follow on Pinterest"; approved alternates: Follow us, Popular, Find us, Visit us on Pinterest; Find more ideas / Get inspired on Pinterest
- Say "Popular on Pinterest" only when Pinterest Analytics shows high impressions, clicks or saves, and put your Pinterest URL after it
- Whenever you reference Pinterest, also reference your Pinterest account
- Never use "Pin", "Pinterest" or a variation in a product name or domain
- Capitalize product nouns Pin and Pins; lowercase board(s) in running copy ("65 Pins", "group boards")
- Every big initiative gets a short, clear description as its first line
- Avoid fluff and hyperbole; cleverness only when it helps clarity
- Contractions are fine ("you'll love")

Their words: ideas, inspiration, save, Pins, boards, discover, try.
Never: Trending on Pinterest (partners), Trending Pins (partners), Pin as a verb.

## Color

| Name | Hex | Role | Use |
|---|---|---|---|
| Pushpin 450 | #E60023 | accent | Hero product color and the logo. Primary buttons. The only red. |
| Mochimalist 0 | #FFFFFF | paper | Page ground; text on 500+ colors. |
| Black | #000000 | ink | Homepage headlines and body (observed). Gestalt publishes Cosmicore 900 #111111 for product text. |
| Ink | #211922 | ink (headings) | Warm near-black on section and feature headings (observed). |
| Muted | #62625B | ink_muted | Counts, placeholders, helper and legal text (observed). |
| Secondary | #E5E5E0 | accent_secondary | Secondary buttons and the search field (observed). |
| Wash | #F6F6F3 | surface | Top of the band gradients; badge tile (observed). |
| Cosmicore 900 | #111111 | product text | Baseline light-mode text in the product. |
| Skycicle 500 | #0074E8 | link | Baseline blue for links and info. |
| Roboflow 500 | #767676 | secondary | Baseline secondary text and icons. |
| Roboflow 200 | #E9E9E9 | secondary ground | Baseline secondary background. |
| Flaminglow 450 | #EE376A | reserved | Brand moments only. |
| Skycicle 450 | #007CFF | reserved | Brand moments only. |
| Spabattical 450 | #009990 | reserved | Brand moments only. |
| Matchacado 450 | #1DAD65 | reserved | Brand moments only. |
| Mysticool 450 | #8A39FA | reserved | Brand moments only. |
| Firetini 450 | #FF5B45 | reserved | Brand moments only. |
| Caramellow 450 | #D86800 | reserved | Brand moments only. |

## Typography

| Role | Their face | Licence | Open stand-in (Google Fonts) | Fallback |
|---|---|---|---|---|
| display | Pin Sans | Proprietary, Pinterest's own; not licensed for others | Figtree | Figtree, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif |
| body | Pin Sans | Proprietary | Figtree | Figtree, -apple-system, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif |

| Role | Token | Face | Desktop | Phone | Line height | Tracking | Weight |
|---|---|---|---|---|---|---|---|
| Signup headline | --text-display-xl-* | display | 70px | 70px | 1.2 | 0px | 600 |
| Hero H1 / seasonal H2 | --text-display-l-* | display | 48px | 48px | 1.1 | -2px | 800 |
| Section H2 (Bring...) | --text-heading-xl-* | display | 50px | 50px | 1.2 | 0px | 700 |
| Feature H3 | --text-heading-l-* | display | 38px | 38px | 1.18 | 0px | 700 |
| Carousel heading | --text-heading-m-* | display | 36px | 36px | 1.1 | -1.5px | 800 |
| Banner card title | --text-title-l-* | display | 32px | 11px | 1.06 | 0px | 700 |
| Signup card title | --text-title-m-* | display | 28px | 28px | 1.1 | -0.5px | 700 |
| Lead | --text-body-l-* | body | 20px | 20px | 1.4 | 0.2px | 400 |
| Board title / footer heading | --text-body-strong-* | body | 16px | 16px | 1.4 | 0px | 700 |
| Nav link / button label | --text-label-* | body | 16px | 16px | 1.2 | 0.15px | 500 |
| Body / footer link | --text-body-* | body | 16px | 16px | 1.4 | 0px | 400 |
| Meta / legal | --text-caption-* | body | 12px | 12px | 1.5 | 0px | 400 |

## Layout

Measured on https://www.pinterest.com/: computed styles and geometry in headless Chrome at 1440x900 and 390x844, desktop user agent, after scrolling the full page; fonts calibrated by rendering.

| Measure | Desktop (1440) | Phone (390) |
|---|---|---|
| Page margin | 150px | 8px |
| Section padding | 100px | 100px |
| Container max width | 1140px | full |
| Hero text width | max 480px | full |
| Grid columns | 2 | 2 |
| Gutter | 16px | 16px |
| Card gap | 16px | 16px |
| Navigation height | 80px | 80px |

Breakpoints weren't measured. tokens.css switches to the phone values at 600px; that number is our default, not Pinterest's.

Homepage bands, top to bottom (observed):
1. Navigation
   - Desktop: 80px fixed
   - Phone: 80px, same items at fixed widths, overflowing to the right; no search
   - No border or shadow
2. Hero
   - Desktop: y 80-594
   - Phone: y 80-455, H1 cut at the right edge, collage offscreen
   - Collage is one image under the nav
3. Seasonal band
   - Desktop: y 594-1943
   - Phone: y 455-1512
   - Ground is a #F6F6F3-to-transparent top-down gradient on white
4. Bring your favorite ideas to life
   - Desktop: y 1943-2275
   - Phone: y 1512-2020
   - Same gradient, restarted
5. Feature rows x3
   - Desktop: rows at y 2275, 2925, 3575 (550 tall, 100 gap)
   - Phone: rows at 2020, 2670, 3320; image partly offscreen, text in a narrow column
   - Image left, right, left
6. Signup band
   - Desktop: y 4225-5048
   - Phone: y 3970-4793
   - Card 450x695 radius 20px
7. Footer
   - Desktop: y 5048-5452
   - Phone: y 4793-5215

## Page anatomy

How Pinterest's own landing pages are built, part by part (observed; https://www.pinterest.com/, 2026-10-31). A homepage pattern, not a brand law: follow it for landing pages.

**Navigation**
- summary: White 80px header, fixed to the top. Left: red Pinterest wordmark logo, Explore, Shop. Middle: a wide #E5E5E0 search field. Right: About, Businesses, Create, News, then a red Log in button and a #E5E5E0 Sign up button. No border, no shadow.
- ground: #FFFFFF (the header box is transparent over the white page); stays white when scrolled
- height: 80px desktop and phone
- border: none
- logo: variant red Pinterest wordmark with the P-circle mark (nav-logo-pinterest-wordmark.svg: #E60023 shapes, white P counter); px 98x18 inside a 122x21 link; position x 28, y 30 (vertically centred in 80px); link starts x 16; file inline SVG on https://www.pinterest.com/ (aria-label "Pinterest logo")
- links: count 6; labels Explore, Shop (left of search); About, Businesses, Create, News (right of search; each opens a new tab); size 16px/19.2px; weight 500; color #000000; box each link is a 48px-tall box with 6px 14px padding inside a 2px transparent border, radius 16px (text box + 32px); alignment desktop x positions: Explore box x 138 (w 88), Shop 226 (w 72); About 876 (w 79), Businesses 955 (w 116), Create 1071 (w 82), News 1153 (w 74); labels sit at y 30; hover rgba(246,246,243,0.5) fill (#F6F6F3 at 50%)
- search: Field x 314-861 (547x48) at y 16, fill #E5E5E0, radius 12px, padding 0 8px 0 16px; 16px search icon #62625B at x 330; placeholder "Search for easy dinners, fashion, etc." 16px/400 #62625B at x 354. Its wrapper is x 298-877 with 16px padding each side. Hidden on phone
- actions:
  - Log in: 76x48 at x 1252, fill #E60023, label #FFFFFF 16px/500, radius 16px, padding 6px 14px, 2px transparent border; hover #CC001F
  - Sign up: 88x48 at x 1336 (8px gap), fill #E5E5E0, label #000000 16px/500, radius 16px; hover #DADAD3. Right edge at x 1424 (16px from the edge)
- sticky: position fixed at the top; white; no shadow when scrolled
- phone: shows The same desktop header, unchanged (Pinterest serves its desktop web layout to a desktop-browser user agent at 390px): logo x 28, Explore 138, Shop 226, About 298 are visible; Businesses 376, Create 492, News 575, Log in 673 and Sign up 757 run off the right edge. The search field is hidden. 80px tall; menu none: no hamburger; cta Log in and Sign up are offscreen to the right at 390 (reachable by horizontal scroll); document width The document is 800px wide at a 390 viewport (horizontal overflow); full-page captures are 800px wide; rebuild To match Pinterest at 390, do not build a reflowed phone layout: keep every desktop size and the phone x/y values given in each section (html min-width 800px, sections still 390px-based where the phone values say so). The visible 390px viewport then shows exactly what Pinterest shows: logo, Explore, Shop, About; H1 cut after "Create the life you"; the gray button cut at the edge

**Hero**
- summary: Two columns on white: a two-line 48px heavy black headline with a red and a gray button at left; a collage of six rounded photo tiles at right, touching the bottom of the nav.
- desktop: section y 80-594 (514px), container x 118-1322 with padding 0 32px, so content runs x 150-1290 (1140px); column split text column from x 150; media column x 768-1290 (522px); vertical anchors H1 top y 242, two lines, bottom y 348 (line 52.8px); buttons y 384-432; collage image y 80-530 (starts directly under the nav); text max width H1 box 473px: "Create the life you love" / "on Pinterest" (break after "love"; set max-width 480px or a <br>); buttons Join Pinterest for free 192x48 at x 150 (fill #E60023, label #FFFFFF 16px/500); 8px gap; I already have an account 219x48 at x 350 (fill #E5E5E0, label #000000 16px/500); both radius 16px; media ONE image file, hero-collage.jpg (735x634), placed at x 768, y 80, 522x450, object-fit cover, no radius on the img (the six tiles and their rounded corners and white gaps are inside the image)
- phone: order Same two-column row as desktop at fixed widths (no reflow): H1 at x 32 y 172 (box 473px, so "Create the life you" is cut at the right edge of the 390 viewport), buttons y 314-362 at x 32 and x 232 (the gray one cut at the edge); the collage image sits offscreen at x 569, y 80, 360x311; alignment left, 32px from the edge; sizes H1 48px/52.8px 900 -0.5px in 2 lines; buttons 48px tall; section y 80-455 (375px)
- at rest: collage The collage is a vertical slideshow; at rest it shows hero-collage.jpg: top-left flowers on yellow (cropped by the nav), top-right plant (cropped), centre-left man in a lime hoodie, centre the tall tile of red hair under an orange-and-pink checked scarf on blue, right a manicured hand on sage, bottom-right an orange sofa. Place the image; never rebuild the tiles in CSS; scroll chevrons Scroll up/down controls exist (48x48 at x 720) but are white-on-white and invisible at rest: draw nothing
- type: H1 "Create the life you love on Pinterest" 48px/52.8px weight 900 (stand-in Figtree 800, -2px), -0.5px on the real face, #000000
- cta: primary red + secondary gray, 48px tall, 16px radius, 8px apart
- proof: none

**Seasonal band: Spooky season starts here**
- summary: Warm off-white wash fading to white; a centred 48px headline and 20px subline, a 1140x600 rounded photo banner with a floating white board card, then a "More bewitching ideas" heading row with See more and a carousel of four board cards.
- ground: white page with linear-gradient(to bottom, #F6F6F3 0%, rgba(246,246,243,0) 100%) over the whole band (y 594-1943), so it is #F6F6F3 at the top and white at the bottom
- desktop: band y 594-1943 (1349px); h2 "Spooky season starts here" 48px/52.8px 900 -0.5px #000000, centred, one line (555px wide) at y 694 (100px under the band top); sub "Uncover inspiration for every spellbinding moment" 20px/28px 400 #000000, centred, y 763; banner 1140x600 at x 150, y 855, radius 32px, overflow hidden, photo object-fit cover (seasonal-banner-nails.jpg at rest); banner card white card 450x140 centred in the banner (x 495, y 1085), radius 40px, padding 20px 24px 20px 20px, box-shadow 0 0 100px rgba(0,0,0,0.2); 100x100 thumbnail (seasonal-banner-nails-thumb.jpg, radius 20px) at the left; 16px gap; title "Spooky nails" 32px/34px 700 #000000 at x 631 y 1120; "17 Pins" 24px/28px 400 #62625B under it (y 1162); pause a small white pause glyph (two 3x12px bars, no fill behind) at the banner bottom-left, about x 200 y 1398; heading row "More bewitching ideas" 36px/39.6px 900 -0.5px #000000 at x 150, y 1499 (one line, 352px); See more button 103x48 at x 1187, y 1495 (fill #E5E5E0, label #211922 16px/500, radius 16px); carousel four board cards visible at x 150, 439, 728, 1017 (273px wide, 289px pitch, 16px gap), top y 1567; the row is clipped at x 1290 (the fifth card starts at 1306 and is hidden). A 36x36 white circular Next button (16px black chevron, soft shadow) sits over the right edge of card 4 at x 1242, y 1640; no Previous button at rest
- phone: band y 455-1512 (1057px), the same gradient, 390px wide; h2 48px/52.8px 900 centred in 374px (x 8), 2 lines "Spooky season / starts here", y 555; sub 20px/28px centred, 2 lines "Uncover inspiration for every / spellbinding moment", y 676; banner 374x197 at x 8, y 796, radius 32px, showing seasonal-banner-party.jpg (the phone capture caught the Party planning slide). The whole banner, card included, scales by 374/1140: card about 148x46 centred, 33px thumbnail, title "Party planning" about 11px 700, "26 Pins" about 8px #62625B; pause glyph bottom-left; heading row "More bewitching ideas" 36px/39.6px 900 at x 8, 2 lines (283px wide) y 1033; See more 83x54 at x 299 y 1045 with its label wrapped to 2 lines ("See / more"); carousel cards at the desktop size (273px) from x 9 with 289px pitch, top y 1137; card 1 fully visible, card 2 cut at the 390 edge; Next button 36x36 at x 334, y 1209
- anatomy:
  - Board card (273x253): image block 273x182 = one 182x182 main tile (radius 16px 0 0 16px) + two 91x91 tiles stacked at right (top radius 0 16px 0 0, bottom 0 0 16px 0), the two small tiles carry a 1px white border on their inner edges as the seam (182 + 91 = 273); wrapper fill #E5E5E0, placeholder #EFEFEF, a rgba(0,0,0,0.04) wash on each tile
  - Card text, inset 8px: title 16px/22.4px 700 #000000 at image bottom + 8px (y 1757); category line 12px/18px 400 #000000 + 12px verified badge #DD0E0E 4px after it, optional "+ 1" (y 1782); meta "65 Pins · 1w" 12px/18px 400 #62625B (y 1802)
  - Board titles are Pinterest's own editorial content and are exempt from the partner copy rules (keep them verbatim). Card 1 "Trending halloween costumes" Fashion, 65 Pins · 1w; card 2 "Costume planning starts here" Fashion, 105 Pins · 1mo; card 3 "Spooky season aesthetic" Inspiration + 1, 70 Pins · 2mo; card 4 "Halloween home inspo" Home Decor + 1, 59 Pins · 2mo
  - Images: carousel-cardN-main / -top / -bottom.jpg for N = 1-4 (object-fit cover)
  - Card radius on the link: 8px; press feedback transform 0.085s ease-out
- components: button_secondary (See more), board_card, carousel_arrow, banner_board_card

**Bring your favorite ideas to life**
- summary: Centred intro to the feature rows: a 50px bold headline and a two-line 20px lead on the same off-white-to-white wash.
- ground: white with linear-gradient(to bottom, #F6F6F3 0%, rgba(246,246,243,0) 100%), y 1943-2275
- desktop: band y 1943-2275 (332px); h2 "Bring your favorite ideas to life" 50px/60px 700 #211922, centred, one line (710px) at y 2043; lead "With Pinterest, you can unlock tools that spark your creativity and help you" / "find more inspiration." 20px/28px 400 #000000, centred, max-width 700px, 2 lines at y 2119
- phone: band y 1512-2020 (508px); h2 50px/60px 700 #211922 centred in 294px (x 48), 3 lines "Bring your / favorite / ideas to life" at y 1612; lead 20px/28px centred in 294px, 4 lines "With Pinterest, you can unlock / tools that spark your creativity / and help you find more / inspiration." at y 1808
- anatomy:
  - No button, no image; the gradient restarts at the top of this band so there is a faint seam at y 1943

**Feature row 1: Search by skin tone (media left)**
- summary: A 550x550 rounded panel image at left, heading, body and a red Join Pinterest button at right, text vertically centred on the panel.
- ground: #FFFFFF
- desktop: band y 2275-2825 (550px), then 100px white before the next row; media feature-skin-tone.jpg 550x550 at x 218, y 2275, radius 32px (the beige panel, phone mock, swatches and photos are all inside the image); text column at x 858: H3 "Search by skin tone" 38px/45px 700 #211922 at y 2455 (one line); body "Search with skin tone ranges for beauty ideas that" / "represent you" 20px/28px 400 #000000, max-width 500px, at y 2516; button Join Pinterest 134x48 at y 2596 (24px under the body's last line); gap 90px between the image (right edge 768) and the text (858)
- phone: band y 2020-2570; layout the row keeps the 550px image and shrinks the text column: image at x -271 (only its right 279px shows), text column x 311-437 (126px): H3 3 lines "Search / by skin / tone" at y 2082, body 7 lines at y 2233, button "Join Pinterest" 126x54 with its label wrapped to 2 lines at y 2453
- anatomy:
  - H3 top = row top + 180px; button = 48px, label #FFFFFF 16px/500, fill #E60023, radius 16px

**Feature row 2: Collaborate with group boards (media right)**
- summary: Mirror of row 1: text at left, 550x550 panel at right.
- ground: #FFFFFF
- desktop: band y 2925-3475; text column at x 125: H3 "Collaborate with group boards" 38px/45px 700 #211922 at y 3105 (one line, 543px); body "Visualize your ideas with others, using a Pinterest" / "account" 20px/28px max-width 500px at y 3166; Join Pinterest 134x48 at x 125, y 3246; media feature-group-boards.jpg 550x550 at x 765, y 2925, radius 32px
- phone: band y 2670-3220; layout text column at x -201 (offscreen left, 210px wide: H3 3 lines, body 3 lines, button 134x48 at x -201 y 3050); image 550x550 at x 41 (visible x 41-390)
- anatomy:
  - Same type and spacing as row 1

**Feature row 3: Search visually with images (media left)**
- summary: Same as row 1 with the visual-search panel.
- ground: #FFFFFF
- desktop: band y 3575-4125; media feature-visual-search.jpg 550x550 at x 218, y 3575, radius 32px; text column at x 858: H3 "Search visually with images" 38px/45px 700 #211922 at y 3755 (one line, 491px); body "Search objects within an image to find" / "more styles you'll love" 20px/28px max-width 400px at y 3816; Join Pinterest 134x48 at y 3896
- phone: band y 3320-3870; layout image at x -275 (right 275px visible), text column x 307-442 (135px): H3 4 lines "Search / visually / with / images" at y 3377, body 6 lines at y 3573, button 134x48 at y 3765
- anatomy:
  - 100px white below, then the signup band

**Signup band: Sign up to get your ideas**
- summary: A full-bleed wall of rounded photo tiles under a 50% warm-dark scrim; a 70px white headline at left and the white signup card at right.
- ground: photo-dark: signup-photo-wall.jpg (1748x1307) placed 1408x1053 centred on the band (x 16, y 4110; object-fit contain), clipped to the band, under a rgba(36,36,33,0.5) scrim (#242421 at 50%)
- desktop: band y 4225-5048 (823px), overflow hidden; h2 "Sign up to get" / "your ideas" 70px/84px 600 #FFFFFF at x 123, y 4552 (2 lines, 475px), in a left half (x 0-720) and vertically centred; card white card 450x695 at x 855, y 4289, radius 20px, box-shadow 0 3px 12px rgba(0,0,0,0.2), content x 879-1281 (24px padding)
- phone: band y 3970-4793; layout no reflow: the wall image sits at x -509; H2 at x -195 (only "up to" / "ur ideas" fragments show at the left edge); the card at x 165, y 4034 (its left 225px visible)
- anatomy:
  - Card top: 64x64 tile #F6F6F3 radius 20px at x 879 y 4313 holding the 36px red P badge (signup-p-badge.svg)
  - Title "Welcome to Pinterest" 28px/30.8px 700 -0.5px #000000 at y 4393, left-aligned; subline "Join Pinterest for free to discover more ideas" 16px/22.4px 400 at y 4428
  - Inputs 402x56, radius 12px, 1px solid #91918C, white, padding 15.8px 11px, placeholder 16px #62625B: "Enter your email" y 4474; "Create a password" y 4537 with two 16px icons (info, eye) at x 1217 and 1249; helper "Use 8 or more letters, numbers and symbols" 12px/18px #62625B at y 4601; "Enter your birthday (mm/dd/yyyy)" 402x58 at y 4627 with info and calendar icons
  - Continue 402x48 red #E60023, radius 16px, label #FFFFFF 16px/500, y 4701; "OR" 14px #000000 centred y 4757; Continue with Google 402x48 white, 1px #91918C, radius 16px, padding 12px 44px 12px 16px, 20px Google G at the left (x 896), label 16px/500 #000000 centred, y 4783
  - "Already have an account? Log in" 16px/22.4px 400 at y 4855 and "Are you a business? Get started here" at y 4885 (links underlined, #000000); legal 12px/18px #62625B 2 lines at y 4924: "By continuing, you agree to Pinterest's Terms of Service and" / "acknowledge you've read our Privacy Policy. Notice at collection." (the three link names underlined)
- components: signup_card, input, button_primary, button_google

**Footer**
- summary: Black footer: white script Pinterest logo at left, three short link columns at right, copyright under the logo.
- ground: #000000, y 5048-5452 (404px) desktop; phone y 4793-5215
- anatomy:
  - Logo: white script "Pinterest" wordmark 165x40 at x 150, y 5148 (footer-logo-pinterest-script.svg)
  - Columns 160px wide at x 746, 938, 1130 (192px pitch); headings 16px/22.4px 700 #FFFFFF at y 5148; links 16px/22.4px 400 #FFFFFF at y 5187, 5226, 5264 (39px pitch), no underline
  - Get the app: iOS, Android | Quick links: Explore, Shop, Help Center | Policies: Terms of service, Privacy policy, Non-user notice
  - Copyright "© 2026 Pinterest" 12px/18px 400 #FFFFFF at x 150, y 5333
  - No social icons, no address, no phone number, no language selector
- phone: Same layout at fixed widths: logo x 150, columns x 240, 432, 624 (third column offscreen), copyright wraps to 2 lines ("© 2026 / Pinterest") in a 90px box at x 150, y 5078

**On dark grounds**
- secondary button: not used on dark grounds on the homepage
- link: #FFFFFF, no underline (footer)
- muted text: none: footer text is all #FFFFFF
- hairline: none
- logo variant: white script wordmark (footer); the red wordmark only on white (nav)

## Components

- **button primary** (observed): fill #E60023, text #FFFFFF, radius 16, height 48, padding 6px 14px (inside a 2px transparent border), padding x 16, font size 16, weight 500, face body, example Log in (76x48), Join Pinterest for free (192x48), Join Pinterest (134x48), Continue (402x48)
  - hover (observed): fill #CC001F
  - active (observed): transition transform 0.085s ease-out (the scale value is our reading)
- **button secondary** (observed): fill #E5E5E0, text #000000, radius 16, height 48, padding 6px 14px (inside a 2px transparent border), padding x 16, font size 16, weight 500, face body, example Sign up (88x48), I already have an account (219x48), See more (103x48, label #211922)
  - hover (observed): fill #DADAD3
- **button google** (observed): fill #FFFFFF, text #000000, radius 16, height 48, ring px 1, ring #91918C, padding 12px 44px 12px 16px, padding x 16, font size 16, weight 500, face body, example Continue with Google (402x48), 20px G icon left
- **nav link** (observed): fill none, text #000000, radius 16, height 48, padding 6px 14px, font size 16, weight 500. hover fill rgba(246,246,243,0.5)
- **search field** (observed): fill #E5E5E0, radius 12, height 48, padding 0 8px 0 16px. 16px #62625B icon, 16px #62625B placeholder; 547px wide at 1440
- **input** (observed): fill #FFFFFF, border 1px solid #91918C, radius 12, height 56, padding 15.8px 11px. 402px wide; placeholder 16px #62625B
- **board card** (observed): radius 16. 273x253: 182 main tile + two 91 tiles, 1px white seams, outer corners 16px; text inset 8px (16/700 title, 12px category with red verified badge, 12px #62625B meta)
- **carousel arrow** (observed): fill #FFFFFF, radius pill, height 36. 36x36 white circle, 16px #000000 chevron, soft shadow; Next only at rest
- **banner board card** (observed): fill #FFFFFF, radius 40. 450x140, padding 20px 24px 20px 20px, shadow 0 0 100px rgba(0,0,0,0.2), 100px thumbnail radius 20px, 32/700 title + 24/400 #62625B count
- **signup card** (observed): fill #FFFFFF, radius 20. 450x695, 24px padding, shadow 0 3px 12px rgba(0,0,0,0.2)
- **media panel** (observed): radius 32. feature images 550x550 and the 1140x600 seasonal banner

## Motion tokens

| Name | Easing | Duration | Use | Label |
|---|---|---|---|---|
| press | ease-out | 85ms | transform transition on links, buttons, board cards and the footer logo (press feedback) | observed |
| elevation-floating |  |  | Not motion: shadow token. Floating = black at 10%, blur 8; raised = black at 12%, y +/-2, blur 8 | published |
| principles |  |  | Helpful (sparingly, with a clear reason), Focused (as long as needed), Accessible (respect reduced motion); visual: Soft, Bouncy, Physical. No curves or durations published | published |
| slideshow |  |  | Hero collage and seasonal banner advance automatically; the banner has a pause control. Interval not measured | observed |

## Icon tokens

Grid not published (24-unit viewBox observed), stroke UI glyphs (search, chevrons, badge, P) are filled; the form-field info, eye and calendar icons are light outlined glyphs (observed).
| Name | Size | Use |
|---|---|---|
| nav | 16px | search, carousel chevrons, form field icons |
| badge | 12px | verified badge |
| large | 24px | hero scroll chevrons |
| brand | 36px | P badge on the signup card |

## Signature moves

### Rounded photo tiles in a loose grid

Where: hero collage, board cards (one big + two small tiles), seasonal banner, signup photo wall.
Do: real photography in rounded tiles (16px small, 32px large) separated by white gaps, never full-bleed squares; the grid itself is the brand: content first, chrome quiet. One collage per section.
Don't: put text on the photos (Gestalt: no text over photography) or square the corners.
Example: "Create the life you love".

### One red, on buttons only

Where: Log in, Join Pinterest, Continue, the logo.
Do: Pushpin #E60023 is the only saturated UI color: 48px buttons with a 16px radius and white 16px/500 labels; everything else is black, white, the warm grays #E5E5E0/#F6F6F3 and photos.
Don't: use the reserved 450 colors or red for text or backgrounds.
Example: "Join Pinterest for free".

### Warm off-white wash

Where: tops of the seasonal and Bring bands.
Do: linear-gradient(to bottom, #F6F6F3, transparent) over white: a barely-there warm ground that fades within the band.
Don't: use a cold gray or a flat tint block.

### The board card

Where: carousels, banner overlay, feature panels.
Do: a board = a cluster of saved photos plus a bold title and a "N Pins" count in #62625B; on photos it floats as a white card with a 40px radius and a soft 100px shadow.
Don't: invent stats on the count: use the board's real Pin count.

## Messaging: rules

Pinterest's story is inspiration turned into action: discover, save, then try, buy or do. The newsroom adds Pinterest Intelligence and a "more positive place online"; the homepage keeps it to one invitation and three feature names.

Why it works: One verb chain (find, save, do) carries every message, so the product explains itself.

- Lead with the outcome for the person ("Create the life you love")
- Name features as verb plus object ("Search visually with images")
- Quote audience numbers with their date and footnote
- Don't inflate numbers or mix the 500M/600M/661M figures

Sources: https://newsroom.pinterest.com/company/, https://about.pinterest.com/, https://www.pinterest.com/

## Voice: rules

Three guiding words: simplify, keep it conversational, add a dash of cleverness. On the homepage the voice is short and warm; seasonal copy plays with words ("spellbinding", "bewitching").

Why it works: Short, spoken sentences keep the words out of the way of the pictures.

- Short sentences, short words, no fluff
- Read it out loud; if you stumble, rewrite
- Best stuff first: one clear line per initiative
- Wordplay or alliteration when it helps, never hyperbole
- Sentence case; no exclamation marks (observed)
- Say save, not pin, as the verb
- Don't use "Trending on Pinterest" or "Trending Pins" about your own Pins
- Don't use Pin as a verb

Do and don't:
- Do: "Find more ideas on Pinterest". An approved partner phrase.
- Don't: "Trending on Pinterest". Banned for partners' own Pins.
- Do: "Save this idea". Save is the verb.
- Don't: "Pin this idea". Never Pin as a verb.

Real examples, to look at on Pinterest's own pages (not for reuse):
- Gestalt: the Pinterest voice (screenshot): https://gestalt.pinterest.systems/v1/foundations/content_standards/voice

Sources: https://gestalt.pinterest.systems/v1/foundations/content_standards/voice, https://business.pinterest.com/brand-guidelines/

## Logo: rules

The primary logo is a script white P in a red circle. Others may use only that badge, never the wordmark, always with a call to action and their own account. It may go black or white when color is limited.

Why it works: One small, unmistakable mark that always points to a real account keeps the badge from implying endorsement.

|  |  |
|---|---|
| Primary | white script P in a red circle |
| Alternates | black or white |
| Clear space | not published |
| Minimum size | not published |

- Third parties: badge only, never the wordmark
- Always add a call to action, and show your account when the context isn't interactive
- Use the badge templates so the CTA text stays proportionate
- Primary red; black or white when color is limited
- Lockups: centred (badge above CTA and handle) or left-aligned (badge left); centred for social and broadcast
- Interactive lockups: no container, gray container over white, or white container
- Don't outline the logo
- Don't add filters or effects
- Don't remove the P from the circle
- Don't alter the logo color
- Don't build your own app or brand from Pinterest marks or names

Not published: clear space; minimum size.

Real examples, to look at on Pinterest's own pages (not for reuse):
- Our logo and logo examples: primary red, secondary black or white (screenshot): https://business.pinterest.com/brand-guidelines/
- Four things to avoid with the logo, and a Follow on lockup (screenshot): https://business.pinterest.com/brand-guidelines/

Sources: https://business.pinterest.com/brand-guidelines/

## Color: rules

Shared by brand and Gestalt: a baseline palette (Pushpin red, near-black, blue, grays, white), eight reserved 450 colors for brand moments, and an extended 0-900 ramp per color with playful names (Pushpin, Flaminglow, Skycicle, Spabattical, Matchacado, Mysticool, Firetini, Caramellow; Roboflow grays, Cosmicore black, Mochimalist white). The homepage uses only red, black, white and warm grays; color comes from the photos.

Why it works: A neutral frame lets Pinners' photos carry all the color, and one red makes every action obvious.

|  |  |
|---|---|
| Hero | Pushpin 450 #E60023 |
| Text | Cosmicore 900 #111111 (product); #000000/#211922 on the homepage |
| Link | Skycicle 500 #0074E8 |
| Token pattern | color-{common}-{pinterest}-{n} |

- Pushpin 450 #E60023 is the hero color; other 450s only when absolutely necessary
- Text on colors 400 and below: dark gray; on 500 and above: white
- Meet WCAG 2.1 AA contrast
- Brand color fills only for brand moments (onboarding, celebrations, announcements), never on core UI, text components or form controls
- Use semantic tokens, not raw palette values
- Don't recolor components or text with alternative colors
- Don't put text over photography
- Don't use color without a purpose

Not published: color proportions.

Do and don't:
- Do: "Join Pinterest". Red only on the action.
- Don't: "Join Pinterest". No red section grounds on core pages.

Real examples, to look at on Pinterest's own pages (not for reuse):
- Gestalt color palette: baseline and reserved (screenshot): https://gestalt.pinterest.systems/v1/foundations/color/palette

Sources: https://gestalt.pinterest.systems/v1/foundations/color/palette, https://gestalt.pinterest.systems/v1/foundations/brand_expression/guidelines

## Typography: rules

Pinterest Sans (served as Pin Sans) is the brand face; Gestalt's product UI uses system fonts and keeps Pinterest Sans for occasional branded graphics. The homepage sets everything in Pin Sans: very heavy, slightly tight headlines, medium 16px buttons, regular 20px leads.

Why it works: A heavy, friendly grotesk reads as confident and approachable at headline size while the system UI stays fast.

|  |  |
|---|---|
| Brand face | Pin Sans / Pinterest Sans (proprietary) |
| Stand-in | Figtree (Google Fonts, OFL) |
| Homepage H1 | 48px 900, -0.5px |
| Product scale | 12/14/16/20/28/36px |

- Product UI: system fonts; Pinterest Sans never for UI
- Few sizes: 12, 14, 16, 20, 28, 36 (Gestalt scale)
- Headings semibold in product; body regular
- Start-aligned by default; centre only very short text
- Body max width 664px (about 90 characters)
- Paragraph spacing 75% of body size
- Underline inline links
- Don't set body or controls below 14px except brief secondary text
- Don't skip heading levels

Real examples, to look at on Pinterest's own pages (not for reuse):
- Gestalt typography principles (screenshot): https://gestalt.pinterest.systems/v1/foundations/typography

Sources: https://gestalt.pinterest.systems/v1/foundations/typography, https://www.pinterest.com/ (2026-10-31)

## Graphic elements: rules

Rounded photo tiles, the board card (a cluster of photos with a bold title and Pin count), 16px-radius buttons in red or warm gray, and a faint warm wash. No lines, no patterns, no illustration on the homepage.

Why it works: The UI is built from Pinterest's own content units, so the page looks like the product.

- Radius 16 on buttons and small tiles, 32 on big media, 20 on cards, 40 on floating board cards
- Elevation by shadow only for floating things (cards over photos, modals)
- Separate by space and ground, not lines
- Don't add hairlines or decorative shapes
- Don't square off photos

Sources: https://www.pinterest.com/ (2026-10-31), https://gestalt.pinterest.systems/v1/foundations/elevation

## Iconography: rules

Filled single-color glyphs at 12, 16 and 24px from Gestalt's icon library (search, chevrons, info, eye, calendar, verified badge).

Why it works: Small, solid icons stay legible over busy photo grids.

- Use the existing icon library
- One color per icon
- Use an icon when an illustration would be too big
- Don't mix outline and filled styles

Not published: grid; stroke; construction.

Sources: https://gestalt.pinterest.systems/v1/foundations/iconography/library, https://www.pinterest.com/ (2026-10-31)

## Illustration: rules

Gestalt line illustrations exist for product states only (empty, error, success, loading) in large, medium and small sizes: a sad plant, a disco ball, an hourglass, a sad coffee.

Why it works: Illustration explains a state; it never competes with Pins.

- Always pair with text and give it a descriptive title
- Use the prescribed size; generous white space around it
- Match the type to the state (loading for processing)
- Don't use illustration as decoration
- Don't resize past the prescribed size
- Don't place it over images or text
- Don't change its color, line weight or subject
- Don't replace messaging components with it

Real examples, to look at on Pinterest's own pages (not for reuse):
- Gestalt illustration states (screenshot): https://gestalt.pinterest.systems/v1/foundations/illustration

Sources: https://gestalt.pinterest.systems/v1/foundations/illustration

## Photography: rules

Real Pinners' photos everywhere: bright, saturated, colored-ground studio shots in the hero; moody seasonal photography in the banner; lifestyle tiles on the signup wall. Always in rounded tiles.

Why it works: The pictures are the product; showing many of them at once says "ideas" better than any headline.

- Depict the real interface on the right device (mobile UI on a phone)
- Make imagery work in light and dark mode; add alt text
- Own the rights to every image you show
- Don't put text over photos
- Don't show a desktop UI on a phone

Sources: https://business.pinterest.com/brand-guidelines/, https://gestalt.pinterest.systems/v1/foundations/brand_expression/guidelines, https://www.pinterest.com/ (2026-10-31)

## Motion: rules

Principles only: helpful, focused, accessible; soft, bouncy, physical. On the site: an 85ms ease-out press, and auto-advancing hero and banner slideshows with a pause control.

Why it works: Motion that feels tactile and brief makes saving feel playful without slowing anyone down.

- Animate only with a clear reason
- Only as long as needed
- Respect reduced motion
- Soft entrances, a little bounce, small physical scale changes
- Don't animate for its own sake

Not published: easing curves; durations.

Real examples, to look at on Pinterest's own pages (not for reuse):
- Gestalt motion principles (screenshot): https://gestalt.pinterest.systems/v1/foundations/motion/principles

Sources: https://gestalt.pinterest.systems/v1/foundations/motion/principles, https://www.pinterest.com/ (2026-10-31)

## Interface and layout: rules

Product layout is the Pin grid: 2 Pin reps per row on phones, 3-4 on tablets, 8px image margins and gutters, 16px text margins. The homepage is a centred 1140px column with 100px between sections.

Why it works: A consistent grid lets content of any shape tile cleanly.

- 16px margins for text content, 8px for image content
- 32px between content blocks; 24px between Pin reps with metadata, 8px without
- Phone banners and toasts: full width minus 8px margins

Sources: https://gestalt.pinterest.systems/v1/foundations/layout, https://www.pinterest.com/ (2026-10-31)

## Rules: rules

The business guidelines are written for partners: promote your presence without implying sponsorship.

- Never imply Pinterest sponsors or endorses you
- Badge plus CTA plus your own account
- Match device and interface in product depictions
- Get written approval for video, TV or film 10 business days ahead
- Brand expression only in onboarding, celebrations, marketing moments; never on critical tasks
- Don't use the wordmark (partners)
- Don't name your product with Pin or Pinterest
- Don't say "Trending on Pinterest"

Sources: https://business.pinterest.com/brand-guidelines/, https://gestalt.pinterest.systems/v1/foundations/brand_expression/guidelines

## Campaigns

### Seasonal homepage: Spooky season starts here (2026)

For Halloween the logged-out homepage adds a seasonal band: a punny headline, a rotating photo banner of boards (Spooky nails, Party planning, Costume ideas, Halloween decor) and a carousel titled with wordplay.

How the system shows: Same red buttons, same tiles; the season lives in the photos and the words.
Why it works: The frame never changes, so seasonal content can swap in without a redesign.
Channels: homepage. Source: https://www.pinterest.com/ (2026-10-31)

## Applications

| Format | What | Source |
|---|---|---|
| partner CTA lockups | Badge with "Follow on Pinterest" in centred or left-aligned lockups, interactive and static, with handle or URL. | https://business.pinterest.com/brand-guidelines/ |
| product brand moments | Onboarding, milestones, upsells and hero banners in product may use color fills and brand imagery. | https://gestalt.pinterest.systems/v1/foundations/brand_expression/guidelines |
| homepage | Logged-out pinterest.com: hero collage, seasonal band, feature rows, signup band. | https://www.pinterest.com/ (2026-10-31) |

## By format

How our engine applies Pinterest's system per format. Our recipe from their rules and homepage, not something Pinterest publishes. Loudness runs 0 (nothing but the essentials) to 5 (the signature moves at full volume).

| Format | Loudness 0–5 | Must appear | What varies |
|---|---|---|---|
| Landing page | 2 | Build it the way pinterest.com is built (kit.spec.page, homepage voice): white page, 80px white nav with the red wordmark, heavy 48px sentence-case H1 with a red and a warm-gray 48px button (16px radius), real photos in rounded tiles (hero collage, board cards, 550px panels with 32px radius), #F6F6F3-to-white washes, a photo-wall signup band under a 50% scrim, black footer | which sections, the seasonal theme, how many feature rows |
| Deck | 2 | White grounds, heavy sentence-case headlines, photos in rounded tiles, red only on the call to action | one brand-moment slide in a reserved color fill |
| Proposal page | 1 | White ground, black copy, one red CTA, rounded photo tiles of the buyer's own work | board-card style summary |
| Social post | 3 | Photo grid in rounded tiles, short clever headline, centred lockup with a link to the account | seasonal wordplay |
| Email | 2 | White, one red button, photo tiles, short lines | a board card |

## Checks before anything ships

- **Logo hidden**: Cover the logo. A page of rounded photo tiles, one red 16px-radius button and short heavy sentence-case headlines should still read as Pinterest.
- **Photo first**: If type or color is louder than the pictures, cut it back.
- **Verb check**: Search the copy for "pin" used as a verb and for "trending" claims.

## Make it your own

Keep the system: color roles and proportions, type, layout, components, the signature moves, the voice traits and rules. Replace everything that is Pinterest's own: name and logo, positioning, pillars, proof, taglines, boilerplate and any real line quoted above. kit.json lists these under make_it_yours.

## Not published

- Logo clear space and minimum size: not published.
- Color proportions: not published.
- Motion easing curves and durations: not published (only principles); 85ms ease-out press is observed.
- Icon grid and construction: not published.
- Photography rules beyond device-matching, rights and light/dark: not published.
- A marketing type scale for Pinterest Sans: not published (Gestalt publishes the product scale only).
- Pinterest Sans licence: proprietary, not available; Figtree is our stand-in.
- The full brand site brand.pinterest.com sits behind a login; Gestalt 2.0 sits behind Okta. This book uses the public business brand guidelines and the public legacy Gestalt docs (marked "might be outdated").
- Mission statement: not found on a public page we could read; the Gestalt home line is used as purpose.
- The homepage varies per load and by season; the anatomy records the 2026-10-31 seasonal variant.

Logos and reference images belong to Pinterest. Look at them on Pinterest's own pages; don't reuse them.