A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
Pinterest, in one page
Pinterest's marketing system is built around a single instructional principle: get out of the photograph's way. The chrome is a quiet warm-cream neutral palette ({colors.surface-soft}, {colors.surface-card}, {colors.canvas}) carrying typography in Pinterest's proprietary Pin Sans face, with Pinterest Red ({colors.primary} — #e60023) reserved exclusively for the "Sign up" CTA, the active-tab indicator, and the sticky top-nav anchor. Every other surface is allowed to fade behind the imagery — pin tiles, category tiles, content thumbnails, profile shots — that constitutes the actual product.
The design system has two distinct surface modes that alternate down the home page: the hero/CTA chrome (cream surfaces, large 70px Pin Sans display headlines, alternating left/right photo-illustrated feature cards) and the content masonry (a column-based grid of 16px-radius pin cards on {colors.surface-card} with no internal padding — the pin is the card). The search results page is almost pure masonry: a tight column grid of pin imagery in mixed aspect ratios, with a small filter-chip strip at the top and the sticky red Sign-up CTA in the upper-right corner. The create.pinterest.com business surface inverts the grid back to a more traditional editorial layout but keeps every other rule of the system: Pin Sans, cream chrome, red CTA, 16px-radius pills.
The system's signature gesture is shape geometry: 16px radius ({rounded.md}) for nearly every surface — buttons, inputs, pin cards, feature cards — and 32px radius ({rounded.lg}) reserved for pin-card-large and modal cards. There are exactly three radius values in active use: 16px, 32px, and pill (9999px). The system never goes flat (sharp corners) and never goes radius-medium — those two values are the entire shape vocabulary.
Key Characteristics:
- Single-accent CTA: Pinterest Red (
{colors.primary}) carries every primary action; everything else is monochrome - Pin Sans proprietary typography across every text role from
{typography.display-xl}(70px) down to{typography.caption-sm}(12px) — no serif, no monospace anywhere - Two-radius shape system:
{rounded.md}(16px) for most components,{rounded.lg}(32px) for large cards and modals,{rounded.full}for circular elements - Masonry pin grid as the load-bearing visual element — column-based layout where each pin's natural aspect ratio is preserved
- Warm-cream neutral chrome (
{colors.surface-card}— #f6f6f3) that softly recedes behind imagery without competing - Sticky top nav with the always-red Sign-up CTA anchored in the upper-right at every breakpoint
- Modal overlay (login/signup) using a soft scrim over the page content rather than a navigation jump
Do's and don'ts
Do
- Reserve
{colors.primary}(Pinterest Red) for primary CTAs, the active-tab indicator, and the brand wordmark only. It is never decorative. - Use
{rounded.md}(16px) on every interactive element and standard card; reserve{rounded.lg}(32px) for large pin cards and modals; reserve{rounded.full}for circular elements (search bar, chips, avatars). - Stage every pin image inside a
{component.pin-card}with no internal padding — the photograph IS the card. - Stack content sections at
{spacing.section}(64px) rhythm; tighten pin grids to{spacing.sm}(8px) gutters so imagery effectively touches. - Use
{component.pin-overlay-pill}to anchor a search-term tag in the corner of a category-tile pin photograph — the system's signature decorative gesture. - Build hierarchy from font weight (400 → 600 → 700) and size, not from color tinting. Body stays
{colors.body}regardless of section context. - Apply -1.2px letter-spacing on
{typography.display-xl}and{typography.heading-xl}. The negative tracking is part of the brand voice.
Don't
- Don't use sharp-cornered buttons or cards. There are no
{rounded.none}interactive elements in the system. - Don't introduce drop shadows on cards. The only shadow in the system is the 16px ambient under
{component.modal-card}. - Don't pad
{component.pin-card}internally. The image is full-bleed; metadata sits over the image as an overlay pill, not below it. - Don't replace
{colors.primary}with another red. The brand red is precise —#e60023. - Don't use
{colors.ink-soft}(the body-prose link tint) outside of inline body anchor links. It is not a chrome color. - Don't introduce a third radius value between 16px and 32px. The system jumps directly from md to lg with nothing in between.
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Pinterest design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- primary: #e60023
- on-primary: #ffffff
- primary-pressed: #cc001f
- ink: #000000
- ink-soft: #211922
- body: #33332e
- charcoal: #262622
- mute: #62625b
- ash: #91918c
- stone: #c8c8c1
Type:
- families: Pin Sans, Segoe UI, Roboto, Helvetica Neue
- scale: 12, 14, 16, 18, 22, 28, 44, 70
- weights: 400, 500, 600, 700
Shape:
- radius: 0, 8, 16, 32
Spacing: 4, 6, 8, 11, 12, 16, 24, 32, 48, 64
Rules:
- Reserve `{colors.primary}` (Pinterest Red) for primary CTAs, the active-tab indicator, and the brand wordmark only. It is never decorative.
- Use `{rounded.md}` (16px) on every interactive element and standard card; reserve `{rounded.lg}` (32px) for large pin cards and modals; reserve `{rounded.full}`…
- Stage every pin image inside a `{component.pin-card}` with no internal padding — the photograph IS the card.
- Stack content sections at `{spacing.section}` (64px) rhythm; tighten pin grids to `{spacing.sm}` (8px) gutters so imagery effectively touches.
- Use `{component.pin-overlay-pill}` to anchor a search-term tag in the corner of a category-tile pin photograph — the system's signature decorative gesture.
- Build hierarchy from font weight (400 → 600 → 700) and size, not from color tinting. Body stays `{colors.body}` regardless of section context.
Avoid:
- Don't use sharp-cornered buttons or cards. There are no `{rounded.none}` interactive elements in the system.
- Don't introduce drop shadows on cards. The only shadow in the system is the 16px ambient under `{component.modal-card}`.
- Don't pad `{component.pin-card}` internally. The image is full-bleed; metadata sits over the image as an overlay pill, not below it.
- Don't replace `{colors.primary}` with another red. The brand red is precise — `#e60023`.
- Don't use `{colors.ink-soft}` (the body-prose link tint) outside of inline body anchor links. It is not a chrome color.
- Don't introduce a third radius value between 16px and 32px. The system jumps directly from md to lg with nothing in between.
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Source pages:
/(home),/search/pins/?q=bold lip(search results),create.pinterest.com/(creator marketing),create.pinterest.com/product-features/how-to-create-boards/(creator article). The chrome palette is identical across all four pages.
Brand & Accent
- Pinterest Red (
{colors.primary}—#e60023): the brand's only highly-saturated color. Sign-up CTAs, sticky top-nav anchor, active state in tab strips, and the brand wordmark. - Pinterest Red Pressed (
{colors.primary-pressed}—#cc001f): pressed state for the primary button — a single notch deeper than brand red.
Surface
- Canvas (
{colors.canvas}—#ffffff): true white. The base surface for the primary nav, modals, feature cards, and content body. - Soft Surface (
{colors.surface-soft}—#fbfbf9): faintly cream-tinted off-white used for the page body wash on the home page hero. - Surface Card (
{colors.surface-card}—#f6f6f3): warm-cream card and pin-tile background. Carries category tiles, search-bar default fill, button-secondary default, and pin-card backgrounds. - Secondary BG (
{colors.secondary-bg}—#e5e5e0): the gray-cream used for{component.button-secondary}("I already have an account") fill — a notch deeper than{colors.surface-card}. - Secondary Pressed (
{colors.secondary-pressed}—#c8c8c1): pressed state for the secondary button. - Surface Dark (
{colors.surface-dark}—#262622): warm near-black used in the rare dark CTA strip oncreate.pinterest.com. - Hairline (
{colors.hairline}—#dadad3): 1px row dividers, footer column rules. - Hairline Soft (
{colors.hairline-soft}—#e5e5e0): lighter inline divider; doubles as the secondary-button background.
Text
- Ink (
{colors.ink}—#000000): primary headlines, button text, primary nav links. - Ink Soft (
{colors.ink-soft}—#211922): inline-link color in body prose. The brand's only "color" beyond Pinterest Red used in chrome — a near-black with a faint warm cast. - Body (
{colors.body}—#33332e): default paragraph text on{colors.canvas}. - Charcoal (
{colors.charcoal}—#262622): subtly softer body where pure ink is too heavy. - Mute (
{colors.mute}—#62625b): metadata text, footer links, secondary captions. - Ash (
{colors.ash}—#91918c): disabled button text, placeholder text in inputs. - Stone (
{colors.stone}—#c8c8c1): least-emphasis utility text, disabled-state borders. - On Dark (
{colors.on-dark}—#ffffff): primary text on{colors.surface-dark}.
Semantic
- Error (
{colors.error}—#9e0a0a): validation messages, destructive confirmation copy. - Error Deep (
{colors.error-deep}—#cc001f): deepened error background where the regular error tone needs more contrast. Note: this matches the primary-pressed value but in error context represents semantic destructiveness. - Success Deep (
{colors.success-deep}—#103c25): in-product success messaging. - Success Pale (
{colors.success-pale}—#c7f0da): pale success-pill background. - Focus Outer (
{colors.focus-outer}—#435ee5): the system's focus-ring blue — appears as a 2px outer outline around focused inputs and buttons. - Focus Inner (
{colors.focus-inner}—#ffffff): white inner gap inside the focus-ring stack.
Editorial Accents (used sparingly inside content imagery and category badges)
- Accent Pressed Blue (
{colors.accent-pressed-blue}—#617bff): pressed state for blue informational badges and editorial pin chips. - Accent Purple (
{colors.accent-purple}—#7e238b): editorial recommendation badge, in-product "Pinterest Predicts" callout. - Accent Purple Deep (
{colors.accent-purple-deep}—#6845ab): paired dark for purple lockups and "Performance+" iconography.
Type scaleRead the full spec
Font Family
Pin Sans is Pinterest's proprietary geometric sans-serif used across every text role on every page. It carries weights 400 (regular), 500 (medium), 600 (semibold), and 700 (bold), and falls back through a long stack — -apple-system → system-ui → Segoe UI → Roboto → Helvetica Neue → Arial plus emoji fallbacks. The face's distinctive trait is its tight letter-spacing at display sizes (-1.2px on {typography.display-xl} and {typography.heading-xl}), which gives 70px headlines a confident, friendly density rather than the airy spread of more conventional display geometric sans faces.
Hierarchy
| Token | Size | Weight | Line Height | Letter Spacing | Use |
|---|---|---|---|---|---|
{typography.display-xl} | 70px | 600 | 1.1 | -1.2px | Marketing hero headline ("Create the life you love on Pinterest") |
{typography.display-lg} | 44px | 700 | 1.15 | -0.8px | "Where your content can thrive" creator hero |
{typography.heading-xl} | 28px | 700 | 1.2 | -1.2px | Section heading ("Bring your favorite ideas to life", "Pinterest for your brand") |
{typography.heading-lg} | 22px | 600 | 1.25 | 0 | Sub-section heading, modal title ("Welcome to Pinterest") |
{typography.heading-md} | 18px | 600 | 1.3 | 0 | Card title, in-grid pin label |
{typography.body-md} | 16px | 400 | 1.4 | 0 | Body copy, modal body, default paragraph |
{typography.body-strong} | 16px | 600 | 1.4 | 0 | Inline emphasis, primary nav link, form label |
{typography.body-sm} | 14px | 400 | 1.4 | 0 | Footer copy, in-grid pin metadata, helper text |
{typography.body-sm-strong} | 14px | 700 | 1.4 | 0 | Search-result count label, table-header text |
{typography.caption-md} | 12px | 500 | 1.5 | 0 | Caption text, link metadata |
{typography.caption-sm} | 12px | 400 | 1.4 | 0 | Smallest utility text, copyright |
{typography.link-md} | 16px | 600 | 1.4 | 0 | Inline anchor link in body prose |
{typography.button-md} | 14px | 700 | 1 | 0 | Standard primary/secondary button label |
{typography.button-sm} | 12px | 700 | 1 | 0 | Compact pill chip, in-card button |
Principles
The system has an unusually steep size jump between display and body — {typography.display-xl} (70px) drops directly to {typography.body-md} (16px) on the home hero with no intermediate tier between. The negative tracking on the largest tiers (-1.2px / -0.8px) creates a tighter, more confident headline than a default geometric sans would deliver, and the body copy sits at a generous 1.4 line-height to keep multi-line descriptions breathing.
Note on Font Substitutes
Pin Sans is proprietary. The closest open-source substitute is Inter (weights 400 / 500 / 600 / 700) — its geometry, x-height, and metric balance match Pin Sans within ~3% at body sizes. Manrope is a strong secondary substitute for the display tier where slightly tighter letterspacing helps the 70px headline feel weighted. Apply -1.2px tracking on the substitute at display sizes regardless of which substitute is chosen.
Components and layoutRead the full spec
No hover states documented per system policy. Each spec covers Default and Active/Pressed only.
Buttons
button-primary — the universal Pinterest CTA
- Background
{colors.primary}(Pinterest Red), text{colors.on-primary}, type{typography.button-md}, padding6px 14px, height ~40px, rounded{rounded.md}(16px). - Used for "Sign up", "Join Pinterest for free", "Get started" — every primary action across every surface in the system.
- Pressed state lives in
button-primary-pressed— background drops to{colors.primary-pressed}(#cc001f).
button-secondary — gray-cream alternative
- Background
{colors.secondary-bg}(#e5e5e0), text{colors.on-secondary}, type{typography.button-md}, padding6px 14px, height ~40px, rounded{rounded.md}. - "I already have an account", "Continue", "Cancel" — second-tier actions paired with the red primary.
- Pressed state lives in
button-secondary-pressed— background drops to{colors.secondary-pressed}.
button-tertiary — ghost link
- Background transparent, text
{colors.ink}, type{typography.button-md}, rounded{rounded.md}. - Used for low-emphasis actions inside dialogs ("Read the docs", "Learn more →" with a small chevron).
button-icon-circular — circular icon button
- Background
{colors.surface-card}, icon{colors.ink}, rounded{rounded.full}, size 40px. - Carousel paddles, modal close button, and small floating action buttons in pin imagery.
button-pill-on-image — small overlay pill on photography
- Background
{colors.canvas}, text{colors.ink}, type{typography.button-md}, rounded{rounded.full}, padding8px 14px. - The signature "Cherry red" / "Preppy look" / "Earthy space inspo" overlay pill that anchors the corner of category-tile pin imagery.
button-disabled
- Background
{colors.surface-card}, text{colors.ash}— flat soft-cream.
Filter & Tab Chips
filter-chip + filter-chip-active
- Default: background
{colors.surface-card}, text{colors.ink}, type{typography.button-md}, rounded{rounded.full}, padding8px 16px. - Active: background
{colors.ink}, text{colors.on-dark}— the chip flips fully inverted on selection. - Used across the search results page filter strip ("Beauty makeup", "Lipstick", "Editorial makeup"...).
Inputs & Forms
text-input + text-input-focused
- Default: background
{colors.canvas}, text{colors.ink}, 1px solid{colors.ash}, type{typography.body-md}, padding11px 15px, height ~44px, rounded{rounded.md}. - Focused: 2px
{colors.ink}inner border + 4px{colors.focus-outer}outer outline — the signature double-ring focus signal. - Used across the login/signup modal for email, password, birthdate, country fields.
search-bar + search-bar-focused
- Default: background
{colors.surface-card}, text{colors.ink}, type{typography.body-md}, padding11px 15px, height ~48px, rounded{rounded.full}. - Focused: same dimensions, background flips to
{colors.canvas}with a 1px{colors.ash}border. - Anchored in the center of the primary nav with a magnifier glyph at the left edge and "Search for ideas, fashion..." placeholder.
Cards & Containers
pin-card — the standard masonry pin tile
- Container: background
{colors.surface-card}, rounded{rounded.md}(16px), padding 0. - Layout: full-bleed image at the card's natural aspect ratio with no internal padding. Optional
{component.pin-overlay-pill}anchored to one corner of the image, optional 32px circular avatar with profile name in{typography.body-sm-strong}overlaid at the bottom-left.
pin-card-large — the home-page feature pin
- Identical to
pin-cardbut rounded{rounded.lg}(32px) — used for the large editorial pins that anchor home-page feature rows.
pin-overlay-pill — anchored chip on pin imagery
- Background
{colors.canvas}, text{colors.ink}, type{typography.button-sm}, rounded{rounded.full}, padding6px 12px. - Floats over a pin's bottom-left or top-left corner with the search-term label that surfaces if the pin matches a search ("Cherry red", "Preppy look", "Earthy space inspo").
category-tile
- Background
{colors.surface-card}, rounded{rounded.md}, padding 16px. - 3- or 4-up grid of small category thumbnails inside the home-page "Bring your favorite ideas to life" section. Each tile contains a category icon or composition photograph + a short label in
{typography.body-strong}.
feature-card + feature-card-soft
- Standard: background
{colors.canvas}, rounded{rounded.md}, padding 32px. Pairs a 4:5 portrait pin image (left or right) with a{typography.heading-xl}headline + body copy +{component.button-primary}red CTA. - Soft: background
{colors.surface-card}for the alternating-row variant where the cream surface is needed to break up content.
modal-card — login/signup overlay
Responsive behaviourRead the full spec
Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| ultrawide | 1920px+ | Pin grid expands to 5–6 columns; content 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 collapses to 3 columns; sub-nav remains horizontal |
| tablet | 768px | Pin grid collapses to 2 columns; primary nav becomes hamburger drawer; search bar becomes icon-only |
| mobile | 480px | Single-column pin grid; hero {typography.display-xl} scales 70px → ~44px |
| mobile-narrow | 320px | Hero further scales to ~36px; section padding tightens to 32px |
Touch Targets
All interactive elements meet WCAG AA (≥ 44×44px). {component.button-primary} and {component.button-secondary} sit at ~40px height with 14px horizontal padding (effective ~40×80px tappable). {component.search-bar} sits at 48px. {component.text-input} sits at 44px. {component.filter-chip} is ~36–40px height with 16px padding — extends to 44px tappable via inline padding. {component.button-icon-circular} is exactly 40×40 with extended hit-target padding to 48×48 inside the parent.
Collapsing Strategy
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-pinterest {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #000000;
--heading-color: #000000;
--link-color: #e60023;
--link-hover-color: #b3001b;
--border-color: #d1d1d1;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(0,0,0,0.06);
--card-hover-shadow: 0 6px 18px rgba(0,0,0,0.12);
--header-bg: #000000;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #595959;
--button-bg: #e60023;
--button-text-color: #ffffff;
--button-hover-bg: #b3001b;
--button-border: none;
--button-border-radius: 16px;
--button-secondary-bg: #f0f0f0;
--button-secondary-text-color: #000000;
--button-secondary-hover-bg: #e0e0e0;
--button-secondary-border: 1px solid #d1d1d1;
--prompt-bg: #f2f2f2;
--prompt-text-color: #000000;
--base-font: var(--font-helvetica);
--heading-font: var(--font-roboto);
--card-border-radius: 16px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
Where this came from
- Source document
volt/design-md/pinterest/DESIGN.md· 35.3 KB- Repository
- VoltAgent/awesome-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.