Spark Mart

Spark Mart is a mass-retail design system built for accessibility, value, and scale. It pairs a confident corporate blue with an energetic spark yellow on clean white surfaces. The aesthetic is approachable and efficient, designed to serve millions of customers across web, mobile, and in-store digital touchpoints. Every element communicates value, trust, and ease.

Primary#0071CE
Secondary#FFC220
Neutral#74767C
Background#F2F2F2
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayNunito Sans · 36px · Bold

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

H1Nunito Sans · 28px · Bold

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

H2Nunito Sans · 22px · Bold

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

H3Nunito Sans · 18px · SemiBold

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

BodyNunito Sans · 16px · Regular

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

Body SmallNunito Sans · 14px · Regular

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

CaptionNunito Sans · 12px · Regular

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

Price LargeNunito Sans · 28px · Bold

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

Price SmallNunito Sans · 18px · Bold

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

Was PriceNunito Sans · 14px · Regular

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

SavingsNunito Sans · 14px · SemiBold

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

Spark Mart is a mass-retail design system built for accessibility, value, and scale. It pairs a confident corporate blue with an energetic spark yellow on clean white surfaces. The aesthetic is approachable and efficient, designed to serve millions of customers across web, mobile, and in-store digital touchpoints. Every element communicates value, trust, and ease.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

CategoryActiveSavingsClearance

Elevation & Depth

Level 1
Level 2
Level 3

Do's & Don'ts

Do

Do use blue (#0071CE) as the dominant color for navigation and actions
Do use yellow (#FFC220) sparingly for emphasis: hero CTAs, savings callouts, star ratings
Do show savings prominently: was-price strikethrough + green savings amount
Do design for accessibility first: 44px minimum touch targets, AA contrast everywhere
Do maintain consistent product image sizes across the grid for clean alignment

Don't

Don't use yellow for body text or on white backgrounds; it fails contrast
Don't clutter product cards; image, title, price, rating, and add button are sufficient
Don't use the dark navy (#041E42) for large background areas; reserve it for text and small accents
Don't mix pill-shaped and rectangular buttons in the same view
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 5.9 KB
Downloads 39
Copies 3
accessible ecommerce professional warm

Use with MCP

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

Don't have the MCP? Install it here