mdshop
Back to designs
P

Design System inspired by Pinterest

Visual discovery. Red brand, masonry grid, image-forward browsing.

Usage
npx getdesign@latest add pinterest

Run this command from your project root, then ask your AI assistant to use DESIGN.md for UI work.

Installs
15
Bookmarked
0
Not an official Pinterest design system. A curated starting point for building Pinterest-like UIs with your AI coding agent.

Visual discovery. Red brand, masonry grid, image-forward browsing.

Preview
pinterest.design.md
Brand System Catalog

DESIGN SYSTEM INSPIRATION OF PINTEREST

Visual discovery. Red brand, masonry grid, image-forward browsing.

Explore the systemView tokens

Color Palette

Visual discovery. Red brand, masonry grid, image-forward browsing.

Primary
Pinterest Red
#e60023
Brand color
Dark
#111111
Brand color
White
#ffffff
Brand color
Light Gray
#efefef
Brand color
Gray
#767676
Brand color
Hover
#b60000
Brand color

Typography

A type system inspired by Pinterest.

system-ui
system-ui, system-ui
Helvetica Neue
Helvetica Neue, system-ui
DISPLAY / 64px / 700 / 1.1
EVERYONE
H1 / 48px / 700 / 1.2
A disciplined editorial voice
H2 / 32px / 600 / 1.3
Section heading
BODY / 16px / 400 / 1.6
Body copy reads at the size and rhythm extracted from the source spec. Lorem ipsum dolor sit amet.
SMALL / 14px / 400 / 1.5
Small
CODE / 14px / 400 / 1.6
Code

Buttons

Buttons, cards, and inputs follow the brand's visual language with consistent use of the primary color palette and border-radius conventions.

Not detected on this URL

Cards

Card patterns inspired by Pinterest.

Not detected on this URL

Components

Other component primitives mapped from the Pinterest spec.

Not detected on this URL