# Design System
Inspired by Pinterest

A design token catalog generated from DESIGN.md. Every color, font, and component — visualized with warm craft.

Sign up Log in

01 / Colors

## Color Palette

Brand
Pinterest Red
#e60023
Primary CTA
Plum Black
#211922
Primary text
Green 700
#103c25
Success
Warm Neutrals
Olive Gray
#62625b
Secondary text
Warm Silver
#91918c
Borders, muted
Sand Gray
#e5e5e0
Secondary button
Warm Light
#e0e0d9
Circular buttons
Fog
#f6f6f3
Light surface
Dark
#33332e
Footer
Interactive
Focus Blue
#435ee5
Focus ring
Link Blue
#2b48d4
Links
Purple
#6845ab
Performance

02 / Typography

## Typography Scale

Display Hero
Display — 70px / 600 / Pin Sans
Section Heading
Section — 28px / 700 / -1.2px
Body — Find ideas for weeknight dinner. With Pinterest, discover creative ideas that spark joy.
Body — 16px / 400 / 1.40 / Pin Sans
Caption Bold — Trending now
Caption Bold — 14px / 700
Small — 1,234 pins
Small — 12px / 500

03 / Buttons

## Button Variants

Sign up
Primary Red
Log in
Secondary Sand
❤
Circular
Ghost
Transparent

04 / Cards

## Card Examples

Pin photo

### Weeknight Dinner

Quick recipes for busy evenings

Pin photo

### Home Decor

Inspiration for every room

Pin photo

### Travel Ideas

Destinations worth exploring

Pin photo

### Fashion

Outfit ideas for every season

05 / Forms

## Form Elements

Email
Default (warm silver border)
Username
Focus (blue ring)
Password
Error
About you

06 / Spacing

## Spacing Scale

4
8
12
16
24
32

07 / Radius

## Border Radius

12px
16px
20px
28px
40px
50%

08 / Elevation

## Depth

Flat
No shadow — content driven
Focus
Blue focus ring

Pinterest uses minimal shadows — depth comes from photography and warm surface colors.