Pinterest

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 messa