ShopVibe

ShopVibe mockup preview
Click to expand

ShopVibe is a design system crafted for fashion and lifestyle e-commerce storefronts that demand visual punch and effortless conversion. The spacious layout philosophy ensures products have the breathing room to shine, with generous whitespace framing hero imagery. A bold fuchsia primary drives urgency on CTAs, while cyan and yellow accents inject youthful energy.

Primary#D946EF
Secondary#22D3EE
Tertiary#FACC15
Background#FAFAFA
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayPoppins · 56px · Extra Bold

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

headlinePoppins · 40px · Bold

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

subheadPoppins · 26px · SemiBold

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

bodyLargeNunito · 18px · Regular

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

bodyNunito · 16px · Regular

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

bodySmallNunito · 14px · Regular

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

captionNunito · 12px · Medium

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

overlineNunito · 11px · Bold

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

codeSpace Mono · 14px · Regular

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

Corner Radius

0px
4px
12px
16px
24px
9999px

Spacing

Base: 8px
4px
8px
12px
16px
24px
32px
48px
64px
96px
128px

ShopVibe is a design system crafted for fashion and lifestyle e-commerce storefronts that demand visual punch and effortless conversion. The spacious layout philosophy ensures products have the breathing room to shine, with generous whitespace framing hero imagery. A bold fuchsia primary drives urgency on CTAs, while cyan and yellow accents inject youthful energy.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

DefaultSelectedHoverSuccessWarningError

List Item

Default

Hover

Selected

Checkbox

Checked

Indeterminate

Radio Button

Selected

Tooltip

Default

Elevation & Depth

Subtle
Medium
Large
Overlay
Product Hover

Do's & Don'ts

Do

Use high-quality product photography with consistent aspect ratios across grids.
Make the primary CTA ("Add to Bag") the most visually prominent element on every product card.
Show urgency cues (low stock, limited time) near the CTA, not buried in descriptions.
Keep the cart drawer accessible from every page; never force a full page redirect.
Use the secondary cyan for sale/promo pricing and strikethrough the original in Text Tertiary.

Don't

Use more than one animated element per viewport; competing motion distracts from products.
Auto-open newsletter popups before a user has scrolled at least 50% of the page.
Place product descriptions in font sizes below Body Small (14px); readability drives trust.
Hide the price or shipping estimate behind a click; transparency reduces cart abandonment.
Use fuchsia for non-interactive decorative elements; reserve it strictly for actionable targets.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.3 KB
Downloads 1
bold ecommerce fashion landing-page light

Use with MCP

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

Don't have the MCP? Install it here