LuxCart

LuxCart mockup preview
Click to expand

LuxCart is a design system for high-end luxury goods and designer fashion retail. It treats whitespace as a luxury material, letting products breathe in an atmosphere of restrained elegance. The very spacious density communicates exclusivity — every pixel earns its place. The warm white foundation paired with charcoal typography and gold accents evokes the quiet confidence of a flagship boutique.

Primary#1C1917
Secondary#FFFBEB
Tertiary#B8860B
Neutral#D4D4D8
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

displayCormorant Garamond · 48px · Light

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

headlineCormorant Garamond · 36px · Regular

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

subheadCormorant Garamond · 24px · Medium

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

body_largeRaleway · 18px · Light

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

bodyRaleway · 16px · Regular

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

body_smallRaleway · 14px · Regular

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

captionRaleway · 12px · Medium

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

overlineRaleway · 11px · SemiBold

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

codeJetBrains Mono · 14px · Regular

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

Spacing

Base: 12px

LuxCart is a design system for high-end luxury goods and designer fashion retail. It treats whitespace as a luxury material, letting products breathe in an atmosphere of restrained elegance. The very spacious density communicates exclusivity — every pixel earns its place. The warm white foundation paired with charcoal typography and gold accents evokes the quiet confidence of a flagship boutique.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Chips

Filter ChipStatus Chip

Elevation & Depth

Subtle
Medium
Large
Overlay

Do's & Don'ts

Do

Use generous whitespace — luxury is communicated by what you leave out, not what you put in.
Use light-weight font weights (300) for display text — Cormorant Garamond shines when it breathes.
Keep product imagery large, high-resolution, and on neutral backgrounds.
Uppercase overline and button text with wide tracking for a couture label feel.
Use subtle hover transitions (200-300ms ease) — abrupt changes feel cheap.

Don't

Use Gold #B8860B for large surfaces; reserve it for fine accents like dividers, icons, and small highlights.
Use more than two colors in a single view — restraint is elegance.
Use rounded corners above 8px — the system demands clean, precise geometry.
Crowd product grids — use 2-3 columns maximum on desktop to maintain exclusivity.
Add badges, banners, or "SALE" stickers that clutter the minimal aesthetic.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.5 KB
Downloads 0
ecommerce elegant fashion minimal premium

Use with MCP

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

Don't have the MCP? Install it here