--- version: alpha name: Pinterest description: | A photography-first discovery system organized around the Pinterest Red CTA, the masonry pin grid, and a soft warm-cream chrome that gets out of the imagery's way. The home page is a content-discovery tool wearing the chrome of a magazine publisher: 70px display headlines, friendly Pin Sans typography, fully-rounded pill buttons (16px) on a cream-tinted neutral palette, and a sticky red "Sign up" CTA that anchors every viewport. Pin imagery is the system's load-bearing visual element — square, portrait, and landscape pins tile in a column-based masonry grid where each tile is a fully-rounded 16px-radius card, separated by tight 8px gutters. The chrome is otherwise quiet: warm grays, true whites, and a single saturated red — no decorative gradients, no atmospheric backgrounds, no shadows beyond a soft modal scrim. colors: primary: "#e60023" on-primary: "#ffffff" primary-pressed: "#cc001f" ink: "#000000" ink-soft: "#211922" body: "#33332e" charcoal: "#262622" mute: "#62625b" ash: "#91918c" stone: "#c8c8c1" hairline: "#dadad3" hairline-soft: "#e5e5e0" on-secondary: "#000000" secondary-bg: "#e5e5e0" secondary-pressed: "#c8c8c1" canvas: "#ffffff" surface-soft: "#fbfbf9" surface-card: "#f6f6f3" surface-elevated: "#ffffff" on-dark: "#ffffff" on-dark-mute: "rgba(255,255,255,0.7)" surface-dark: "#262622" focus-outer: "#435ee5" focus-inner: "#ffffff" accent-pressed-blue: "#617bff" accent-purple: "#7e238b" accent-purple-deep: "#6845ab" success-deep: "#103c25" success-pale: "#c7f0da" error: "#9e0a0a" error-deep: "#cc001f" typography: display-xl: fontFamily: Pin Sans fontSize: 70px fontWeight: 600 lineHeight: 1.1 letterSpacing: -1.2px display-lg: fontFamily: Pin Sans fontSize: 44px fontWeight: 700 lineHeight: 1.15 letterSpacing: -0.8px heading-xl: fontFamily: Pin Sans fontSize: 28px fontWeight: 700 lineHeight: 1.2 letterSpacing: -1.2px heading-lg: fontFamily: Pin Sans fontSize: 22px fontWeight: 600 lineHeight: 1.25 letterSpacing: 0 heading-md: fontFamily: Pin Sans fontSize: 18px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0 body-md: fontFamily: Pin Sans fontSize: 16px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 body-strong: fontFamily: Pin Sans fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 body-sm: fontFamily: Pin Sans fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 body-sm-strong: fontFamily: Pin Sans fontSize: 14px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0 caption-md: fontFamily: Pin Sans fontSize: 12px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0 caption-sm: fontFamily: Pin Sans fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0 link-md: fontFamily: Pin Sans fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 button-md: fontFamily: Pin Sans fontSize: 14px fontWeight: 700 lineHeight: 1 letterSpacing: 0 button-sm: fontFamily: Pin Sans fontSize: 12px fontWeight: 700 lineHeight: 1 letterSpacing: 0 rounded: none: 0px sm: 8px md: 16px lg: 32px full: 9999px spacing: xxs: 4px xs: 6px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px section: 64px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 6px 14px height: 40px button-primary-pressed: backgroundColor: "{colors.primary-pressed}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.md}" button-secondary: backgroundColor: "{colors.secondary-bg}" textColor: "{colors.on-secondary}" typography: "{typography.button-md}" rounded: "{rounded.md}" padding: 6px 14px height: 40px button-secondary-pressed: backgroundColor: "{colors.secondary-pressed}" textColor: "{colors.on-secondary}" typography: "{typography.button-md}" rounded: "{rounded.md}" button-tertiary: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.md}" button-icon-circular: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.full}" size: 40px button-pill-on-image: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 8px 14px button-disabled: backgroundColor: "{colors.surface-card}" textColor: "{colors.ash}" rounded: "{rounded.md}" search-bar: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.full}" padding: 11px 15px height: 48px search-bar-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.full}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 11px 15px height: 44px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.md}" pin-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.md}" padding: 0px pin-card-large: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 0px pin-overlay-pill: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button-sm}" rounded: "{rounded.full}" padding: 6px 12px filter-chip: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.full}" padding: 8px 16px filter-chip-active: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.full}" category-tile: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.md}" padding: 16px feature-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.heading-xl}" rounded: "{rounded.md}" padding: 32px feature-card-soft: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.heading-xl}" rounded: "{rounded.md}" padding: 32px modal-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px hero-cta-strip: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.heading-xl}" rounded: "{rounded.none}" padding: 48px 32px primary-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-strong}" rounded: "{rounded.none}" height: 64px footer-section: backgroundColor: "{colors.canvas}" textColor: "{colors.mute}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 32px 24px link-inline: textColor: "{colors.ink-soft}" typography: "{typography.link-md}" --- ## Overview 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 ## Colors > **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 on `create.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. ## Typography ### 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. ## Layout ### Spacing System - **Base unit:** 8px (with finer 4/6/7px steps available for tight inline gaps in pill buttons and chips). - **Tokens (front matter):** `{spacing.xxs}` (4px) · `{spacing.xs}` (6px) · `{spacing.sm}` (8px) · `{spacing.md}` (12px) · `{spacing.lg}` (16px) · `{spacing.xl}` (24px) · `{spacing.xxl}` (32px) · `{spacing.section}` (64px). - **Universal section rhythm:** every page in the set uses `{spacing.section}` (64px) as the vertical gap between major content blocks. Pin grids use `{spacing.sm}` (8px) gutters between tiles — the tightest grid gutter in the system, designed so imagery effectively touches across columns. - **Modal padding:** `{component.modal-card}` uses 32px internal padding (`{spacing.xxl}`) on all sides. ### Grid & Container - **Max width:** ~1280px content area at desktop with 24px gutters (~48px at ultrawide). - **Pin masonry grid:** auto-fitting column-based layout — 5–6 columns at ultrawide, 4 columns at desktop, 3 at tablet, 2 at mobile-landscape, 1 at mobile. Each tile preserves its natural aspect ratio (square / 2:3 / 3:4 / 4:5 portrait — never landscape because pins are vertically-oriented). Gutters are `{spacing.sm}` (8px) horizontal and vertical. - **Home hero feature row:** asymmetric 2-column split where text and imagery alternate left/right down the page (text-left + image-right, then image-left + text-right, etc.). - **Footer:** 4-column link grid at desktop, collapsing to 2-up at tablet, 1-up at mobile. ### Whitespace Philosophy Whitespace is generous on the marketing surfaces and tight on the discovery surfaces. The home page sits sections 64px apart with photo-illustrated feature cards using 32px internal padding, while the search results page collapses to an 8px-gutter masonry grid that tiles imagery edge-to-edge. The system reads as two tools sharing the same chrome: a magazine (hero / feature / CTA / footer) and a search engine (top nav / filter row / pin grid / load more). ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | 0 — Flat | No border, no shadow | Default for pin cards, feature cards, footer — the dominant treatment | | 1 — Hairline border | 1px solid `{colors.hairline}` | Inputs, footer column dividers, in-list rows | | 2 — Modal scrim + soft shadow | Modal sits on a dark scrim over the page content with a soft 16px ambient shadow | Login / signup modal, image preview modal | | 3 — Pin hover lift | (intentionally undocumented per system policy) | n/a | Pinterest's system has effectively no shadow elevation in its content surfaces. Pin cards sit flat on the canvas; the only "elevation" appears on the modal layer where a 16px ambient shadow paired with a 50%-opacity scrim lifts the modal above the page content. ### Decorative Depth Depth comes entirely from the imagery itself, not from CSS effects: - **Pin photography** carries cinematic depth through composition (food photography, fashion close-ups, interior shots) — the design lets each tile's image speak rather than adding chrome to it. - **Category tile thumbnails** in the home page's feature rows use Pinterest's own pin imagery as composition assets, often with a small `{component.pin-overlay-pill}` ("Cherry red", "Preppy look", "Earthy space inspo") overlaid in the corner of the image. - **Modal scrim** — a 50%-opacity dark overlay over the entire page content when the login modal opens, with a 16px ambient shadow underneath the modal card lifting it to the visual top. ## Shapes ### Border Radius Scale | Token | Value | Use | |---|---|---| | `{rounded.none}` | 0px | Footer, primary nav, page sections — all flat structural surfaces | | `{rounded.sm}` | 8px | Rare medium-radius surface (e.g., editorial tooltip) | | `{rounded.md}` | 16px | Buttons, inputs, pin cards, feature cards, category tiles — the dominant component radius | | `{rounded.lg}` | 32px | Large pin cards, modal cards — used sparingly for "big" content surfaces | | `{rounded.full}` | 9999px | Search bar, filter chips, pin overlay pills, icon-circular buttons, avatars | The radius vocabulary is essentially three values: 16px for most things, 32px for big cards and modals, and pill for circular elements. There are no sharp-cornered buttons or sharp-cornered pin cards. ### Photography Geometry - **Pin imagery:** mixed aspect ratios — square (1:1), portrait (3:4, 2:3, 4:5), and rare landscape — preserved at their natural ratio inside `{rounded.md}` (16px) corners on small tiles and `{rounded.lg}` (32px) on large feature pins. - **Category tile thumbnails:** square (1:1) with `{rounded.md}` corners. - **Avatar circles:** 32–48px at `{rounded.full}` for in-pin attribution and profile chips. - **Feature card imagery:** typically 4:5 portrait on home-page category cards, with the photo occupying ~60% of the card and the headline + CTA stacked beneath. ## Components > **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}`, padding `6px 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}`, padding `6px 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}`, padding `8px 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}`, padding `8px 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}`, padding `11px 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}`, padding `11px 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-card` but 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}`, padding `6px 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 - Background `{colors.canvas}`, rounded `{rounded.lg}` (32px), padding 32px. - Layout: title in `{typography.heading-lg}` ("Welcome to Pinterest"), subtitle in `{typography.body-md}`, stacked `{component.text-input}` fields (Email, Password, Birthdate, Country), primary `{component.button-primary}` "Continue", small "Already a member? Log in" link below. - Floats over a 50%-opacity scrim covering the entire page content with a 16px ambient shadow. **`hero-cta-strip`** — dark CTA strip on `create.pinterest.com` - Background `{colors.surface-dark}`, text `{colors.on-dark}`, type `{typography.heading-xl}`, padding `48px 32px`, rounded `{rounded.none}`. - Sits at the top of the creator marketing page with a single `{component.button-primary}` red CTA on the right. ### Navigation **`primary-nav`** - Background `{colors.canvas}`, text `{colors.ink}`, height ~64px, type `{typography.body-strong}`, rounded `{rounded.none}`, with a 1px `{colors.hairline}` bottom rule on inner pages (no rule on the home hero). - Layout (desktop home): Pinterest red wordmark at left + "Explore" link, centered `{component.search-bar}`, right cluster ("About / Businesses / Create / Log in" + the always-red `{component.button-primary}` "Sign up" CTA). - Layout (search results): Pinterest red P-logo at left, centered search bar with the active query, right cluster ("Log in" + red Sign-up button). **Top Nav (Mobile)** - Hamburger menu icon at left, P-logo at center, search-glyph + Sign-up CTA at right. Search bar collapses into the magnifier icon and expands to full-width when tapped. ### Footer **`footer-section`** - Background `{colors.canvas}`, text `{colors.mute}` in `{typography.body-sm}`, padding `32px 24px`, rounded `{rounded.none}`, with a 1px `{colors.hairline}` top rule. - Layout: 4-column link grid (Get the app — iOS / Android · Quick Links — Explore / Shop / Users / Collections / Shopping · Pinterest for · About — Privacy / Terms / Help Center) with column headers in `{typography.body-sm-strong}` and link lists in `{typography.body-sm}` `{colors.mute}`. - Bottom row: Pinterest red wordmark + "© 2026 Pinterest" in `{typography.caption-sm}` `{colors.mute}`. ### Inline **`link-inline`** — body-prose anchor link - `{colors.ink-soft}` text with no underline by default. Pinterest's only "color" beyond brand red on chrome — a near-black warm tint used inline to differentiate links from body without color contrast. ## 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. ## Responsive Behavior ### 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 - **Primary nav:** desktop horizontal cluster → tablet hamburger drawer at 768px. The red Sign-up CTA stays visible at every breakpoint. - **Search bar:** desktop centered (~480px wide) → tablet compressed (~320px) → mobile collapses to a magnifier icon that expands to a full-width overlay on tap. - **Pin masonry grid:** 5/6-up → 4-up → 3-up → 2-up → 1-up at 1920, 1024, 768, and 480px. Gutters drop from 8px to 6px on mobile. - **Home feature row:** desktop alternating left/right 2-column → tablet vertical stack with text above image → mobile single-column with full-bleed image. - **Modal:** desktop centered ~480px-wide card → mobile full-width sheet with rounded `{rounded.lg}` top-only and bottom-anchored CTA. - **Section padding:** `{spacing.section}` (64px) desktop → 48px tablet → 32px mobile. - **Hero headline:** `{typography.display-xl}` (70px) at desktop, scaling 56px / 44px / 36px down the breakpoint stack. - **Footer:** 4-up link columns → 2-up at tablet → full accordion at mobile (each header becomes a tap-to-expand row). ### Image Behavior - Pin imagery preserves natural aspect ratio at every breakpoint; the column count changes, not the aspect. - Category tile thumbnails maintain 1:1 across all sizes. - Hero feature imagery uses art-direction crops on mobile (4:5 portrait → square) so the subject stays centered when the layout collapses to single-column. - All non-critical imagery is lazy-loaded as the user scrolls into the next grid row. ## Iteration Guide 1. Focus on ONE component at a time. Pull its YAML entry and verify every property resolves. 2. Reference component names and tokens directly (`{colors.primary}`, `{component.button-primary-pressed}`, `{rounded.md}`) — do not paraphrase. 3. Run `npx @google/design.md lint DESIGN.md` after edits — `broken-ref`, `contrast-ratio`, and `orphaned-tokens` warnings flag issues automatically. 4. Add new variants as separate component entries (`-pressed`, `-disabled`, `-focused`) — do not bury them inside prose. 5. Default body to `{typography.body-md}`; reach for `{typography.body-strong}` for emphasis; reserve `{typography.display-xl}` strictly for top-of-page hero headlines. 6. Keep `{colors.primary}` scarce — at most one Pinterest-red CTA per fold (counting nav, hero, and feature-card CTAs together). 7. When introducing a new component, ask whether it can be expressed with the existing pin-card + 16px-radius + cream-surface vocabulary before adding new tokens. The system's strength is that it almost never needs new ones. ## Known Gaps - **Mobile screenshots not captured** — responsive behavior synthesizes Pinterest's known mobile pattern (hamburger drawer, single-column grid, hero downscale) from desktop evidence and the documented breakpoint stack. - **Hover states not documented** by system policy. - **Pin-detail close-up (single pin overlay)** is not in the captured set — the in-product Pin detail view (with comments, related pins, save board picker) likely introduces components not documented here. - **Authenticated chrome** (logged-in home feed, board pages, profile pages) not in the captured pages — the captured surfaces are the logged-out marketing and search experience. - **Pinterest mobile app screens** not in the system documented here — this is the web-only chrome. - **Form validation states** (success / error inline messages) not documented; only the focused-state field is captured.