Bullseye Red

Bullseye Red is a bold, modern retail design system anchored by a striking red on expansive white. It delivers a friendly yet elevated shopping experience that feels more design-forward than typical mass retail. Clean lines, ample whitespace, and warm neutral accents create a welcoming, curated atmosphere where products take center stage.

Primary#CC0000
Secondary#333333
Neutral#888888
Background#F7F7F7
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayInter · 40px · Bold

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

H1Inter · 32px · Bold

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

H2Inter · 24px · SemiBold

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

H3Inter · 20px · SemiBold

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

BodyInter · 16px · Regular

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

Body SmallInter · 14px · Regular

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

CaptionInter · 12px · Medium

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

Price LargeInter · 28px · Bold

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

Price SmallInter · 18px · Bold

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

Sale PriceInter · 18px · Bold

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

Was PriceInter · 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
80px
96px

Bullseye Red is a bold, modern retail design system anchored by a striking red on expansive white. It delivers a friendly yet elevated shopping experience that feels more design-forward than typical mass retail. Clean lines, ample whitespace, and warm neutral accents create a welcoming, curated atmosphere where products take center stage.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

Filter ActiveFilter InactiveSale BadgeNew Badge

Elevation & Depth

Level 0
Level 1
Level 2
Level 3

Do's & Don'ts

Do

Let red (#CC0000) be the single dominant accent; avoid introducing other bright colors
Use generous whitespace around product grids to feel curated, not cluttered
Pair sale prices in red with strikethrough original prices in gray for clarity
Ensure product images maintain consistent 4:5 aspect ratios across the grid
Keep the top navigation clean: logo, categories, search, and cart only
Maintain AA contrast for all red text on white (#CC0000 on #FFFFFF passes AA for large text)

Don't

Use red for informational or neutral text; it always implies action or emphasis
Add borders to product cards; use shadow-only for a modern, borderless look
Use more than two type weights on a single card (500 for titles, 700 for prices)
Forget hover-to-lift transitions on cards; they make browsing feel responsive
Download .md

License MIT
Uploaded 1 months ago
Version v1
File size 6.0 KB
Downloads 33
Copies 0

Use with MCP

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

Don't have the MCP? Install it here