One red accent, many quiet neutral surfaces.
Pinterest uses color semantically: red means brand or action. Warm white, cream, and gray step back so the pin images dominate.
Pinterest Red
Logo, Signup, primary CTAs
Red Pressed
Pressed state, deeper CTA
Ink
Headlines, hard contrasts
Ink Soft
warmer UI text
Body
Paragraphs
Surface Card
Search, Cards, Pins
Secondary
Secondary buttons
Dark Strip
rare dark CTA zone
Muted
Footer, help text
Focus Blue
Accessibility Ring
Success Pale
Positive Pills
Error
Validation
Pin Sans: round, dense, friendly.
The page shows Pin Sans in all roles. Since the font is proprietary, this preview uses Inter/System as a replacement with tight headline spacing.
Pill-like CTAs with 16px radius.
The shape is softer than standard SaaS, but not completely round. Primary actions remain red, secondary decisions are cream-gray.
The photography is the card.
Pinterest avoids heavy card chrome. Pin cards are full-bleed, flat, and separated only by radius.
A dark CTA strip remains rare and high-contrast.
Product patterns that make Pinterest unmistakable.
It's not the buttons that make Pinterest, but the interplay of search, idea sentences, image masonry, and save logic.
Idea sentence machine
Hero text rotates search suggestions: dinner, interior, outfit, green thumb.
Search-first Header
The search field sits centrally and is larger than nav links. Pinterest is discovery before navigation.
Pin Overlay Pills
White search term pills over images connect text and visual inspiration.
Save affordance
Red save button appears as the primary pin action, not as a generic card CTA.
Signup Gate
After the story, registration is translated into a modal/form pattern.
Flat Depth
No shadow flood. Depth comes from image content, not CSS elevation.
Search is refined through quick, round suggestions.
Chips are pill components. Active state inverts them hard to black on white.
Signup forms: 48px tall, 16px radius, clear borders.
Observed live: inputs with `#91918c` border, 48px height, 11/15px padding, and Pin Sans text.
Welcome to Pinterest
Here you'll find new ideas to try out!
By continuing, you accept the Terms and Privacy Policy.
Generous story areas, tight pin gutters.
Marketing sections breathe with a 64px rhythm. Pin grids stay tight at 8px so the image wall holds together.
16, 32, full: an extremely tight shape system.
Pinterest feels friendly because almost everything is rounded. Radius is a stronger brand marker than shadows.
Flat as the rule, modal as the exception.
Pins and feature cards have no decorative shadows. Elevation comes through scrim, focus, and modal shadow.
Concrete values for AI implementations.
This table is intended as a handoff for HTML/CSS/React agents.