Auction Quad

Auction Quad mockup preview
Click to expand

Auction Quad is a vibrant, multi-color marketplace design system built for commerce at scale. Its signature four-color palette of blue, red, yellow, and green creates instant brand recognition while supporting a dense, grid-heavy product listing interface. The aesthetic is energetic, trustworthy, and optimized for browsing large catalogs.

Primary#0064D2
Secondary#E53238
Background#F7F7F7
Surface#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayDM Sans · 36px · Bold

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

H1DM Sans · 28px · Bold

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

H2DM Sans · 22px · Bold

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

H3DM Sans · 18px · Medium

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

BodyDM Sans · 14px · Regular

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

Body SmallDM Sans · 13px · Regular

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

CaptionDM Sans · 11px · Medium

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

Price LargeDM Sans · 24px · Bold

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

Price SmallDM Sans · 16px · Bold

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

Strikethrough PriceDM Sans · 14px · Regular

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

Spacing

Base: 4px
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px

Auction Quad is a vibrant, multi-color marketplace design system built for commerce at scale. Its signature four-color palette of blue, red, yellow, and green creates instant brand recognition while supporting a dense, grid-heavy product listing interface. The aesthetic is energetic, trustworthy, and optimized for browsing large catalogs.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

Filter ActiveFilter InactiveConditionSale

Elevation & Depth

Level 0
Level 1
Level 2
Level 3

Do's & Don'ts

Do

Use the four brand colors (blue, red, yellow, green) in distinct functional roles
Keep product images at 1:1 aspect ratio for consistent grid alignment
Show prices prominently at 700 weight; they are the most scanned element
Use pill-shaped (9999px) buttons for all CTAs; it is the signature shape
Provide visual countdown timers for auction items using the red accent

Don't

Use red (#E53238) for general actions; reserve it for urgency and sales
Mix the four brand colors in a single UI element; each has its role
Overload product cards with information; title, price, and seller rating suffice
Forget strikethrough pricing for sale items; it drives urgency
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 5.7 KB
Downloads 62
Copies 8
auctions ebay ecommerce responsive saas

Use with MCP

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

Don't have the MCP? Install it here