01 — Color

## Color Palette

Pinterest Red on a quiet warm-cream chrome. The brand red carries every primary action; everything else is monochrome neutral with a faint warm cast.

Brand & Accent

Pinterest Red (primary)

#e60023

Sign-up CTA, brand wordmark, active-tab indicator

Pinterest Red Pressed

#cc001f

Pressed state for primary button

Surface

Canvas

#ffffff

True white — primary nav, modals, feature cards

Soft Surface

#fbfbf9

Faintly cream-tinted off-white page wash

Surface Card

#f6f6f3

Pin tile background, search-bar default fill

Secondary BG

#e5e5e0

Secondary button fill

Surface Dark

#262622

Warm near-black for rare dark CTA strips

Hairline

#dadad3

1px row dividers, footer column rules

Text

Ink

#000000

Headlines, button text, primary nav links

Ink Soft

#211922

Inline-link color in body prose — warm near-black

Body

#33332e

Default paragraph text

Mute

#62625b

Metadata, footer links, secondary captions

Ash

#91918c

Disabled button text, placeholder text

Stone

#c8c8c1

Least-emphasis utility text, disabled-state borders

Semantic

Error

#9e0a0a

Validation messages

Success Deep

#103c25

In-product success messaging

Success Pale

#c7f0da

Pale success-pill background

Focus Outer

#435ee5

2px outer focus ring around inputs and buttons

Accent Purple

#7e238b

Editorial recommendation badge

02 — Typography

## Typography Scale

Pin Sans across every text role with -1.2px tracking on display tiers. Steep hierarchy: 70px display drops directly to 16px body with no intermediate.

display-xlPin Sans
70px / 600 / lh 1.1 / -1.2px
Create the life you love
display-lgPin Sans
44px / 700 / lh 1.15 / -0.8px
Where your content can thrive
heading-xlPin Sans
28px / 700 / lh 1.2 / -1.2px
Bring your favorite ideas to life
heading-lgPin Sans
22px / 600 / lh 1.25
Welcome to Pinterest
heading-mdPin Sans
18px / 600 / lh 1.3
Card title or in-grid pin label
body-mdPin Sans
16px / 400 / lh 1.4
Default body copy carries every paragraph and modal text at 16px regular weight.
body-strongPin Sans
16px / 600 / lh 1.4
Inline emphasis or primary nav link
body-smPin Sans
14px / 400 / lh 1.4
Footer copy, in-grid pin metadata, helper text
body-sm-strongPin Sans
14px / 700 / lh 1.4
Search-result count label
caption-mdPin Sans
12px / 500 / lh 1.5
Caption text, link metadata
link-mdPin Sans
16px / 600 / lh 1.4
Inline body anchor link
button-mdPin Sans
14px / 700 / lh 1
Sign up
button-smPin Sans
12px / 700 / lh 1
Compact pill chip

03 — Components

## Button Variants

Pinterest Red primary, gray-cream secondary, transparent tertiary, plus pill-on-image and circular-icon variants for in-pin chrome.

button-primary

bg primary · text on-primary · rounded 16px · 40px height

button-primary-pressed

bg primary-pressed · text on-primary

button-secondary

bg secondary-bg · text ink · rounded 16px

button-secondary-pressed

bg secondary-pressed · text ink

button-tertiary

transparent · text ink · rounded 16px

button-icon-circular

bg surface-card · 40px circle · rounded full

button-pill-on-image

bg canvas · text ink · rounded full · sits on photography

button-disabled

bg surface-card · text ash

filter-chip + filter-chip-active

default: surface-card bg · active: ink fill + on-dark text

Search for ideas
bold lip

search-bar + search-bar-focused

surface-card bg · rounded full · 48px height · canvas + 1px ash on focus

04 — Signature

## Pin Masonry Grid

Column-based layout where each pin's natural aspect ratio is preserved. Tiles are 16px-radius cards (32px for large) with 8px gutters — the imagery effectively touches across columns.

Cherry red
Editorial
Preppy look
Bold lip

05 — Tiles

## Category Tiles

Square 1:1 tiles with a 16px radius and a category label anchored at the bottom over a darkened image gradient.

Search by skin tone
Group boards
Visual search
Trending now
Bold lip
Editorial

06 — Cards

## Feature Cards · Modal · CTA Strip

Three card families: a standard feature card on canvas, a soft variant on cream, the modal-card overlay, and the dark hero CTA strip on create.pinterest.com.

### Search by skin tone

Search with skin tone ranges for beauty ideas that represent you.

### Collaborate with group boards

Visualize your ideas with others, using a Pinterest account.

### Search visually with images

Search objects within an image to find more styles you'll love.

Modal Card (login overlay)

### Welcome to Pinterest

Find new ideas to try

Hero CTA Strip (create.pinterest.com)

### Where your content can thrive

07 — Forms

## Form Elements

16px-radius rectangle inputs with the signature double-ring focus signal: 2px ink inner border + 4px focus-blue outer outline.

Default Input canvas bg · 1px ash · rounded 16px · 44px height
Focused Input 2px ink inner + 4px focus-blue outer ring
Birthdate standard text-input
Submit
button-primary · always full-width below stacked fields

08 — Layout

## Spacing Scale

8px base with finer 4/6/7px steps for tight inline gaps. Section rhythm sits at 64px; pin grid gutters tighten to 8px so imagery effectively touches.

xxs · 4
xs · 6
sm · 8
md · 12
lg · 16
xl · 24
xxl · 32
section · 64

09 — Shapes

## Border Radius Scale

Three values do all the work: 16px for most components, 32px for large cards and modals, pill (9999px) for circular elements. No mid-radius value between md and lg.

none · 0

Footer, primary nav, page sections

sm · 8

Rare medium-radius surface (e.g., editorial tooltip)

md · 16

Buttons, inputs, pin cards, feature cards

lg · 32

Large pin cards, modal cards

full · 9999

Search bar, filter chips, pin overlay pills, avatars

10 — Depth

## Elevation & Depth

No drop-shadow elevation in content surfaces. Pin cards sit flat. The only shadow appears on the modal layer.

Level 0 — Flat
no border / no shadow
Level 1 — Hairline
1px solid #dadad3
Level 2 — Modal
0 16px 32px rgba(0,0,0,0.16) over scrim

11 — Responsive

## Responsive Behavior

Pin masonry collapses from 5–6 columns at ultrawide down to 1 column at mobile while preserving each tile's natural aspect ratio.

Name | Width | Key Changes
--- | --- | ---
ultrawide | 1920px+ | Pin grid 5–6 columns; max-width holds at 1280px
desktop-large | 1440px | Default — 4-column pin grid, full primary nav
desktop | 1280px | Same layout with narrower outer gutters
desktop-small | 1024px | Pin grid → 3 columns
tablet | 768px | Pin grid → 2 columns; nav becomes hamburger; search collapses
mobile | 480px | 1-column grid; hero 70px → ~44px
mobile-narrow | 320px | Hero → ~36px; section padding 32px

320m-narrow
480mobile
768tablet
1024desktop-sm
1280desktop-lg

### Touch Targets

- WCAG AA: button-primary and button-secondary at 40px height with 14px padding (~40×80px).
- Search bar: 48px height with 15px padding.
- Text input: 44px height with 15px padding.
- Filter chip: ~36–40px height extends to 44px tappable via inline padding.
- Icon-circular button: exactly 40×40 with extended hit-target padding to 48×48.

### Collapsing Strategy

- Primary nav: desktop horizontal → tablet hamburger drawer at 768px. Red Sign-up CTA stays visible.
- Search bar: 480px wide → 320px → magnifier icon overlay on mobile.
- Pin masonry: 5–6 → 4 → 3 → 2 → 1 columns; gutters drop 8px → 6px on mobile.
- Home feature row: alternating left/right 2-column → vertical stack on tablet.
- Modal: centered ~480px desktop → full-width sheet on mobile.
- Section padding: 64px → 48px → 32px.
- Hero headline: 70px → 56px → 44px → 36px down the breakpoint stack.
- Footer: 4-up → 2-up → accordion.