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.
Color Palette
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxPin 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
Board Lists
Default
Custom Checkboxes
UnChecked
Checked
Tooltips
Default
Top Bar
Default
Elevation & Depth
Do's & Don'ts
Do
Don't
Use with MCP
Don't have the MCP? Install it here