---
name: Pinterest
description: "Worth including as a masterclass in high-volume photographic content presentation, using clean typography and a single, powerful accent color to guide the user's eye."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#211922"
  secondary: "#211922"
  tertiary: "#E60023"
  neutral: "#62625B"
  bg-soft: "#F6F6F3"
  bg-quiet: "#E5E5E0"
  line: "rgba(33, 25, 34, 0.1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 48px
    lineHeight: 1.1
    fontWeight: 900
    letterSpacing: "-0.5px"
  heading:
    fontFamily: geometric-sans
    fontSize: 38px
    lineHeight: 1.1
    fontWeight: 700
    letterSpacing: "-0.5px"
  body:
    fontFamily: geometric-sans
    fontSize: 16px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "0px"
  caption:
    fontFamily: geometric-sans
    fontSize: 12px
    lineHeight: 1.5
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 8px
  md: 16px
  lg: 32px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A visual discovery engine for finding and saving creative ideas.

*A vibrant digital scrapbook for the modern age.*

## Colors

A clean, image-focused palette where vibrant red acts as the sole high-chroma accent against neutral backgrounds.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#211922`)** — uses `ink` token
- **Secondary text (`#211922`)** — uses `ink-soft` token
- **Accent (`#E60023`)** — uses `accent` token
- **Muted (`#62625B`)** — uses `muted` token
- **Borders (`rgba(33, 25, 34, 0.1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** geometric-sans

- Use high-contrast black or near-black for all primary text.
- Maintain tight letter-spacing on large display text.
- Navigation items are medium weight and sentence case.

## Layout

A two-column split for the hero (text left, floating image collage right) that collapses to a stacked vertical layout on mobile.

*Rhythm:* Generous vertical padding (100px) separates major page sections, creating a rhythmic, breathable flow.

## Elevation & Depth

- 0 3px 12px rgba(0, 0, 0, 0.2)
- 0 0 5px rgba(128, 128, 128, 1)
- Borders: Generally borderless, with soft borders appearing only on form inputs and occasionally as 1px lines.

## Shapes

- `sm`: 8px
- `md`: 16px
- `lg`: 32px
- `pill`: 999px

## Components

- **button:** Primary buttons are solid red (#E60023) with white text and fully rounded pill shapes. Secondary buttons are light gray (#E5E5E0) with black text, also pill-shaped.
- **card:** Image-heavy cards with large, consistent border-radius (16px) and soft drop shadows.
- **chip:** Small, rounded white chips (e.g., 'Preppy look') that float over images, featuring subtle shadows.
- **input:** Simple, unstyled-looking inputs with a light gray background (#F6F6F3) and slightly rounded corners (8px).
- **hero:** A massive, bold text block paired with a dynamic collage of overlapping photographic cards.

## Do's and Don'ts

**Don't:**
- don't use dark mode — screenshot shows a bright, predominantly white and light gray (#F6F6F3) interface.
- don't use serif fonts — screenshot shows a clean, geometric sans-serif typeface across all elements.
- don't use heavy borders — screenshot shows mostly borderless elements, relying on background color and shadows for separation.
- don't use multiple accent colors — screenshot shows red (#E60023) as the single dominant high-chroma accent.
- don't use complex data visualizations — screenshot shows a purely visual, photographic layout with minimal text.
- don't use sharp, rectangular corners — screenshot shows large border-radius (16px to 32px) on all cards and buttons.

---

## System Prompt (paste into AI agent)

```
This is the design DNA for Pinterest, a visual discovery platform. The identity is built on a clean, image-first approach with a high-contrast palette of white (#FFFFFF), light gray (#F6F6F3), and near-black (#211922), punctuated by a single vibrant red accent (#E60023). Typography utilizes a geometric sans-serif category with heavy weights (up to 900) for bold headlines and standard weights for body text. The layout features a spacious, two-column hero that collapses on mobile, with image cards using large 16px border-radius. Critical donts: do not use dark mode (the interface is light), do not introduce serif fonts (keep it strictly sans-serif), and do not rely on multiple accent colors (red is the only high-chroma color used for emphasis).
```