Pinterest — design system & UI screens

Consumer · 1 screen · 8 sections · pinterest.com

Editorial consumer landing led by a left-aligned "Create the life you love on Pinterest" headline paired with a scattered polaroid/tilted-card photo collage in the hero's right half, two pill CTAs (red "Join Pinterest for free" + neutral secondary). The signature element is the full-bleed image-mosaic signup section near the bottom where an overlaid white registration card sits atop a dense grid of lifestyle pins, plus floating rounded "pin" overlay cards (Jersey outfit ideas, Cherry red, Knit sweater) anchored on feature photography throughout. Alternating left/right feature blocks and a horizontal "More winning ideas" card row break up the warm off-white canvas, closing on a black footer.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/pinterest.

Decoded design system

Pinterest's decoded design system: background #0A0A0B, text #EDEDEE; type scale h1 70px / h2 24px / body 16px; 8px spacing base; 8px base radius.

Color roles

Typography

• Heading: Pin Sans
• Body: Pin Sans
• h1: 70px
• h2: 24px
• body: 16px

Spacing

• base unit: 8px
• scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px

Radii

• base: 8px
• button: 8px

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

• Pinterest consumer landing with polaroid-collage hero and image-mosaic signup wall

Sections (8)

• Hero — Collage hero with nav and dual CTA pills
• Feature — Step into soccer season editorial image + pin card
• Gallery / Showcase — More winning ideas card carousel
• Feature — Search by skin tone tool block
• Feature — Collaborate with group boards block
• Feature — Search visually with images block
• CTA / Sign-up — Image-mosaic signup wall with overlay form
• Footer — Black footer with app links