Back to Discover

Social & Media

pinterest.com12 colors5 componentsPin SansMulti-page · 12 screens

Discover recipes, home ideas, style inspiration and other ideas to try.

Remix Visit

Remix

Visit

12 screenshots captured· pinterest.com

1 / 12 · Pinterest · Above the fold

Preview

the generated design system

Switch between the Visual preview, the rendered DESIGN.md and the Raw file.

Design tokens

Extracted from pinterest.com

Primary

#E60023

Primary CTA, brand accent, active state

#2B48D4

Inline link colour

#0000EE

Accent / decorative

Neutral

#FFFFFF

Default page background

#000000

Alternating section band; Headings / primary text; label colour on brand surfaces

#111111

Body copy

#211922

Captions, secondary text

#50504D

Tertiary / placeholder text

#62625B

Neutral

#E5E5E0

Neutral

Semantic

#DD0E0E

Error

#435EE5

Focus Ring

Typography · Pin Sans

input16px · 400

button16px · 500 · 19.2px

body16px · 400 · 22.4px

caption12px · 400 · 18px

caption12px · 500 · 15.6px

h136px · 700 · 39.6px

h228px · 700 · 30.8px

link12px · 500

button12px · 400

body16px · 700 · 22.4px

h128px · 700 · 30.8px

h270px · 600

body14px · 400

link12px · 400

body20px · 400 · 28px

heading38px · 700

display48px · 900 · 52.8px

display50px · 700

button16px · 700 · 22.4px

heading36px · 900 · 39.6px

body20px · 700 · 28px

body14px · 500 · 19.6px

button20px · 700 · 28px

Typography · PinSans

link15px · 500 · 21px

caption12px · 500 · 17.4px

caption12px · 400 · 17.4px

body15px · 700 · 21px

body18px · 500 · 25.2px

caption12px · 700 · 17.4px

button15px · 700 · 21px

button15px · 400 · 21px

Typography · PinterestSansPro

h164px · 400 · 73.6px

body24px · 400 · 31.2px

display64px · 700 · 73.6px

body16px · 700 · 21.6px

h178px · 400 · 85.8px

body26px · 400 · 33.8px

body24px · 700 · 31.2px

h232px · 400 · 40px

h348px · 400 · 55.2px

body20px · 400 · 26px

button16px · 400

body18px · 400 · 24.3px

body26px · 700 · 35.1px

display48px · 700 · 55.2px

body18px · 700 · 24.3px

button15px · 700

body16px · 400 · 21.6px

button16px · 700 · 21.6px

heading32px · 700 · 40px

Spacing

8px

4px

16px

12px

32px

20px

24px

120px

Elevation

rgba(0, 0, 0, 0.12) 0px 0px 16px 0px

rgba(0, 0, 0, 0.2) 0px 3px 12px 0px

Components · 5

Remixes of Pinterest

Latest remixes

No public remixes yet. Be the first to make one.

Remix it