design-pinterest

Apply Pinterest's design tokens: Pinterest Red (#e60023) for primary CTAs, warm sand neutrals (#e5e5e0) for secondary surfaces, plum black (#211922) for text, and Pin Sans typography. Use 16px border-radius on buttons and inputs, and a dense masonry grid for pin content.

The palette centers on Pinterest Red (#e60023) as the single brand accent, warm olive/sand neutrals (#62625b, #91918c, #e5e5e0), plum black (#211922) for primary text, and Focus Blue (#435ee5) for focus rings. Cool grays are avoided in favor of warm tones.

Yes, the skill bundles preview-dark.html alongside the light preview.html. Both files implement the full token catalog including colors, typography, buttons, cards, forms, spacing, radius, and elevation for visual reference.

Pinterest uses generous radius values from 12px up to 40px, with 16px standard for buttons and inputs and 50% for circular actions. Shadows are minimal; the design is flat by default and relies on photography and warm surface colors for depth.

Avoid this system when the brand requires cool-toned neutrals, heavy elevation shadows, pill-shaped buttons, or multiple accent colors. Pinterest's identity depends on warm sand tones, a single red accent, and flat content-driven surfaces.