Dark Mode

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

Default (warm silver border)
Focus (blue ring)
Error
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.