Design System

Discover ideas
you'll love.

A warm, inviting canvas for visual discovery. Friendly rounded shapes, bold red accents, and minimal chrome that lets imagery shine.

14 color tokens 8 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Light, warm neutrals with bold Pin Red for brand moments. 14 tokens across base surfaces, text, interaction, and decorative accents.

White Canvas
#ffffff
Primary background, cards
Warm White
#f5f0eb
Secondary sections
Pin Red
#E60023
Brand, CTA, active states
Pin Red Dark
#AD081B
Hover states, pressed
Ink Black
#111111
Primary text, headings
Charcoal
#333333
Secondary text, body copy
Stone Gray
#767676
Placeholders, helper text
Mist Gray
#cdcdcd
Borders, dividers
Cloud Gray
#efefef
Hover surfaces, light bg
Soft Shadow
#e2e2e2
Input borders, outlines
Save Blue
#0076d3
Secondary accent, links
Follow Green
#00853e
Follow action, positive
Board Gold
#c8a951
Decorative, premium
Typography

Type Scale

System sans-serif with friendly, approachable weights. Clean and legible to let visual content be the hero.

Display Discover ideas 36px / 1.2 / -0.01em
Heading-lg Explore today 32px / 1.2 / -0.01px
Heading Section heading 28px / 1.3 / -0.01px
Heading-sm Subsection heading 24px / 1.3 / 0
Subheading Category label 20px / 1.4 / 0
Body Default body text for readable content 16px / 1.5 / 0
Body-sm Pin descriptions, metadata 14px / 1.5 / 0
Caption Timestamps · Likes · Labels 12px / 1.5 / 0

Fonts

Primary System Sans-Serif 400-700 · 12-16px
Fallback Inter Substitute for above
Mono SF Mono Code & technical only
Layout

Spacing & Shapes

Base unit 4px. Comfortable density with generous breathing room. Rounded shapes throughout for a friendly feel.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

default 8px
xl 12px
cards 16px
buttons 24px
full 48px
pill 9999px

Shadows

Resting 0 1px 4px rgba(0,0,0,.1)
Hover 0 4px 12px rgba(0,0,0,.15)
Elevated modals, dropdowns
Components

UI Elements

Bold, friendly buttons with pill shapes. Pin cards with soft shadows. The Save button is the signature interaction.

Save Button
Primary CTA — saving pins
.btn-save
Pin Red (#E60023) background, White text, pill radius (24px). The signature Pinterest interaction — always visible on pin hover.
Primary Action Button
Main call to action
.btn-primary
Pin Red (#E60023) background, White text, 24px pill radius. Hover darkens to Pin Red Dark with subtle shadow.
Follow Button
Social action — following users
.btn-secondary
Ink Black (#111111) background, White text, pill radius. Solid dark for social actions that stand out against the light canvas.
Ghost Button
Secondary, subtle actions
.btn-ghost
Ink Black text, Mist Gray border, pill radius. For less prominent actions that still need presence.
Pin Card
Content container for pins
.pin-card
Pin Image
Cozy living room ideas
@homestyle
Pin Image
Easy weeknight recipes
@foodlover
Pin Image
DIY home projects
@makerlife
White Canvas background, 16px radius, soft shadow. Image fills top with rounded corners. Save button appears on hover.
Search Bar
Primary search input
.search-bar
Search for ideas
Cloud Gray background, pill shape (9999px), 12px padding. Centered in header for maximum discoverability.
Category Pill
Topic filters, tag selection
.pill-filter
All Home Food Style
Pill shape, White background with Mist Gray border. Active state uses Pin Red background with White text.
Guidelines

Do's & Don'ts

Do — Embrace
  • White Canvas (#ffffff) as primary background
  • Ink Black (#111111) for all primary text
  • Pin Red (#E60023) for CTAs and brand moments
  • Pill-shaped buttons (24px radius) for friendliness
  • 16px radius for pin cards with soft shadows
  • 4px-based spacing with generous breathing room
  • Let imagery dominate — keep chrome minimal
Don't — Avoid
  • Dark backgrounds for content areas
  • Pin Red for text — buttons and accents only
  • Hard sharp corners on cards or buttons
  • Heavy shadows or thick borders
  • Dense packing without breathing room
  • Font families outside system sans-serif
  • Monospace fonts for non-technical content