Design System: Pinterest

1. Visual Theme & Atmosphere

Pinterest's website is a warm, inspiration-driven canvas that treats visual discovery like a lifestyle magazine. The design operates on a soft, slightly warm white background with Pinterest Red (#e60023) as the singular, bold brand accent. Unlike the cool blues of most tech platforms, Pinterest's neutral scale has a distinctly warm undertone grays lean toward olive/sand (#91918c, #62625b, #e5e5e0) rather than cool steel, creating a cozy, craft-like atmosphere that invites browsing.

The typography uses Pin Sans a custom proprietary font with a broad fallback stack including Japanese fonts, reflecting Pinterest's global reach. At display scale (70px, weight 600), Pin Sans creates large, inviting headlines. At smaller sizes, the system is compact: buttons at 12px, captions at 1214px. The CSS variable naming system (--comp-*, --sema-*, --base-*) reveals a sophisticated three-tier design token architecture: component-level, semantic-level, and base-level tokens.

What distinguishes Pinterest is its generous border-radius system (12px40px, plus 50% for circles) and warm-tinted button backgrounds. The secondary button (#e5e5e0) has a distinctly warm, sand-like tone rather than cold gray. The primary red button uses 16px radius rounded but not pill-shaped. Combined with warm badge backgrounds (hsla(60,20%,98%,.5) a subtle yellow-warm wash) and photography-dominant layouts, the result is a design that feels handcrafted and personal, not corporate and sterile.

Key Characteristics:

• Warm white canvas with olive/sand-toned neutrals cozy, not clinical
• Pinterest Red (#e60023) as singular bold accent never subtle, always confident
• Pin Sans custom font with global fallback stack (including CJK)
• Three-tier token architecture: --comp-* / --sema-* / --base-*
• Warm secondary surfaces: sand gray (#e5e5e0), warm badge (hsla(60,20%,98%,.5))
• Generous border-radius: 16px standard, up to 40px for large containers
• Photography-first content pins/images are the primary visual element
• Dark near-purple text (#211922) warm, with a hint of plum