Pink Shot

Pink Shot is a design-showcase design system inspired by the creative community where designers share their best work in bite-sized visual "shots." It leads with a distinctive pink accent that pops against clean whites and soft grays, creating a gallery-like experience that puts visual work front and center. The aesthetic is playful yet polished — a portfolio platform that feels like walking through a curated exhibition where every pixel celebrates the craft of design.

Primary#EA4C89
Secondary#0D0C22
Neutral#9E9EA7
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

Badges/LabelsDM Sans · 11px · Bold

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

Meta/Small TextDM Sans · 13px · Regular

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

Body/DescriptionsDM Sans · 14px · Regular

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

Card TitlesDM Sans · 16px · Bold

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

Section HeadingsDM Sans · 20px · Bold

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

Page TitlesDM Sans · 24px · Bold

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

Profile NamesDM Sans · 32px · Bold

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

Hero HeadlinesDM Sans · 48px · Bold

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

Spacing

Base: 4px

Pink Shot is a design-showcase design system inspired by the creative community where designers share their best work in bite-sized visual "shots." It leads with a distinctive pink accent that pops against clean whites and soft grays, creating a gallery-like experience that puts visual work front and center. The aesthetic is playful yet polished — a portfolio platform that feels like walking through a curated exhibition where every pixel celebrates the craft of design.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Chips

tagdefault

Checkbox

default

checked

Tooltip

default

Elevation & Depth

card-hover
profile-rest
modal
dropdown-multi

Do's & Don'ts

Do

Use #EA4C89 pink as the signature accent for likes, CTAs, and brand moments — it defines the platform identity
Maintain the 4:3 aspect ratio for shot thumbnails — consistency in the grid is crucial for the gallery feel
Use the hover-reveal pattern on shot cards — hiding UI until interaction keeps the focus on the visual work
Keep backgrounds white — the design work provides all the color the page needs
Use generous spacing (24px+) between grid items — shots need breathing room to be appreciated

Don't

Use borders on shot cards at rest — they should feel like photographs floating on a gallery wall
Apply the pink color to body text or large background areas — it's an accent, not a fill
Use heavy type weights for body text — 400 weight keeps descriptions subordinate to the visual work
Compress the grid gap below 16px — crowded shots diminish each other's impact
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 7.7 KB
Downloads 25
Copies 1
clean creative gallery portfolio

Use with MCP

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

Don't have the MCP? Install it here