Pin Rouge

Pin Rouge is a warm, visually-driven design system designed for discovery and inspiration. Anchored by a bold red and softened by rounded forms and generous white space, it creates an inviting canvas for visual content. The masonry grid layout philosophy permeates every decision — content flows naturally, edges are soft, and the UI gracefully steps aside to let images spark creativity and aspiration.

Primary#E60023
Secondary#5F5F5F
Neutral#767676
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

microNunito Sans · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

body/descriptionNunito Sans · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

pin titleNunito Sans · 16px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

section titleNunito Sans · 20px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

board headingNunito Sans · 24px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

hero/landingNunito Sans · 36px · Extra Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px

Pin Rouge is a warm, visually-driven design system designed for discovery and inspiration. Anchored by a bold red and softened by rounded forms and generous white space, it creates an inviting canvas for visual content. The masonry grid layout philosophy permeates every decision — content flows naturally, edges are soft, and the UI gracefully steps aside to let images spark creativity and aspiration.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Chips

DefaultSelectedOnboarding

Board Lists

Default

Custom Checkboxes

UnChecked

Checked

Tooltips

Default

Top Bar

Default

Elevation & Depth

Pin
Detail Modal
Dropdown

Do's & Don'ts

Do

Use the masonry grid layout for all visual content discovery — never use rigid equal-height grids
Keep pin cards borderless with only border-radius and shadow on hover for a clean canvas
Show hover overlays with gradient scrims for pin interactions — never place persistent UI over images
Use generous 16px border-radius on all card-like elements for the signature soft feel
Group related pins into boards with clear visual collage previews

Don't

Use red (#E60023) for anything except the brand and save/pin actions
Force square aspect ratios on pins; respect the original image proportions
Add excessive text to pin cards; the image is the content, text is secondary
Use sharp corners anywhere in the interface; maintain rounded softness consistently
Download .md

License MIT
Uploaded 1 months ago
Version v1
File size 6.7 KB
Downloads 20
Copies 0

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/pin-rouge and implement it in my code

Don't have the MCP? Install it here