Design Language System

Product Card · 2026

Figma source: pTgtkyE8xnvM526Khy13Br · Node 4134:2864 · 4 variants · 3 breakpoints

Token Sync

Token Changes

Values corrected from updated Primitives.json + Semantic.json. 3 primitive values updated.

TokenOldNewNote
--color-blue-700#245090#255090Hover state (Blue-Brand 1/Blue-700)
--color-neutral-300#C4C4C4#C5C5C5Disabled bg / border
--color-success#248832#24882DFeedback/success (Green-900)
--btn-solid-hover#245090#255090Button hover (inherits Blue-700)

Design Tokens

Token Reference

All values sourced from Primitives.json + Semantic.json. Typography uses Proxima Nova throughout.

PropertyDesign TokenValueNotes
Image aspect ratio321 : 3810.842Fluid width, locked ratio
Image placeholderneutral-400#9B9B9BShown when imageSrc omitted
Quick Shop width240 px240pxmax capped to calc(100%−24px)
Quick Shop height40 px40px
Quick Shop BGwhite / 60%rgba(255,255,255,0.6)bg-white/60
Quick Shop bottomScale/120080pxFixed offset from image bottom
Badge heightScale/60024pxAlways bg-[#ececec]
Badge insetScale/30010pxbottom-left
Badge text (Default)Color/Blue/Blue-900#142D51Navy
Badge text (Sale)Color/Maroon#8E2231Maroon
Wishlist hit targetScale/80032×32pxtop-right, 12 px inset
Swatch size (desktop)30 px30pxw-[30px] h-[30px]
Swatch size (mobile)36 px36pxw-9 h-9 (< lg)
Swatch gap (desktop)Scale/2008pxgap-x-2
Swatch gap (mobile)Scale/40016pxgap-x-4 (< lg)
Swatch ring1.5 px / Blue-9001.5px #142D51ring-[1.5px] ring-blue-900
Title typeLabel/L_50016/20px w500 ls0.02emneutral-700
Price typeLabel/L_40016/20px w400 ls0.02emneutral-700
Sale original priceLabel/L_40016/20px w400neutral-500 + asterisk
Sale priceLabel/L_40016/20px w400maroon (#8E2231)
Promo line typeLabel/M_40014/16px w400 ls0.02emmaroon
Color name typeLabel/M_50014/16px w500 ls0.02emneutral-600
Price note typeLabel/XS_60010/12px w600 ls0.02emneutral-600

Responsive Behaviour

Mobile ≤ 575 px

  • · Card width ≈ 171 px
  • · Swatches: 36 px circles
  • · Swatch gap: 16 px
  • · Swatch row: overflow-x-auto
  • · Quick Shop: hidden

Tablet 576–1023 px

  • · Card width ≈ 211 px
  • · Swatches: 36 px circles
  • · Swatch gap: 16 px
  • · Swatch row: overflow-x-auto
  • · Quick Shop: hidden

Desktop ≥ 1024 px

  • · Card width: 321–438 px
  • · Swatches: 30 px circles
  • · Swatch gap: 8 px
  • · Swatch row: flex-wrap
  • · Quick Shop: hover-reveal (opacity transition)

Card Variants

Product Card

4 variants · Fully responsive · Semantic design tokens throughout. Quick Shop fades in on desktop hover; hidden on mobile & tablet.

Variant prop

defaultStandard card. Optional badge prop.
saleSale badge + sale pricing layout.
finalSale"Final Sale" badge + standard pricing.
notifyMe"Coming Soon: Notify Me" always visible.

Badge colours

All badgesAlways bg-[#ececec]
Default textBlue-900 (Navy)
Sale / FS textMaroon

Sale pricing props

priceOriginal price — shown with asterisk in neutral-500
salePriceSale price — rendered in maroon
promoTextPromo line — maroon, 14px Regular
priceNoteFootnote — neutral-600, 10px Semibold

Default

Standard Product Card

Figma: Desktop/Small/Default → 4134:2865 · Large → 4167:2577. Optional badge prop (e.g. "New"). Quick Shop fades in on desktop hover.

Interactive — hover over card to preview Quick Shop · click heart to toggle wishlist

New

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

All breakpoints

Desktop Large · 438 px

New

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

Desktop Small · 321 px

New

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

Tablet · 211 px

New

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

Mobile · 171 px

New

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

Sale

Promotional Pricing

Figma: Desktop/Small/Sale → 4134:2863. Badge: "Sale" (maroon text, #ececec bg). Original price: neutral-500 + asterisk. Sale price: maroon. Promo line + footnote optional.

Interactive

Sale

Wrinkle-Free Short Sleeve Riverstone Shirt

$110*

$88

Extra 30% Off With Code GIFT At Checkout

Sky Blue

*Price On 11/20/23

All breakpoints

Desktop Large · 438 px

Sale

Wrinkle-Free Short Sleeve Riverstone Shirt

$110*

$88

Extra 30% Off With Code GIFT

Sky Blue

*Price On 11/20/23

Desktop Small · 321 px

Sale

Wrinkle-Free Short Sleeve Riverstone Shirt

$110*

$88

Extra 30% Off With Code GIFT

Sky Blue

*Price On 11/20/23

Tablet · 211 px

Sale

Wrinkle-Free Short Sleeve Riverstone Shirt

$110*

$88

Extra 30% Off With Code GIFT

Sky Blue

*Price On 11/20/23

Mobile · 171 px

Sale

Wrinkle-Free Short Sleeve Riverstone Shirt

$110*

$88

Extra 30% Off With Code GIFT

Sky Blue

*Price On 11/20/23

Final Sale

Non-Returnable

Figma: Desktop/Small/Final Sale → 4146:2770. Badge: "Final Sale" (maroon text, #ececec bg). Standard pricing layout — no sale price or promo line.

Interactive

Final Sale

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

All breakpoints

Desktop Large · 438 px

Final Sale

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

Desktop Small · 321 px

Final Sale

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

Tablet · 211 px

Final Sale

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

Mobile · 171 px

Final Sale

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

Notify Me

Out of Stock / Coming Soon

Figma: Desktop/Small/Notify Me → 4134:3013. No badge. Replaces Quick Shop with "Coming Soon: Notify Me" — always visible at all breakpoints (no hover dependency).

Interactive

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

All breakpoints

Desktop Large · 438 px

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

Desktop Small · 321 px

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

Tablet · 211 px

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

Mobile · 171 px

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

Comparison

All 4 Variants — Desktop Small (321 px)

Hover over each card to see the Quick Shop overlay (Default, Sale, Final Sale).

Default

New

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

Sale

Sale

Wrinkle-Free Short Sleeve Riverstone Shirt

$110*

$88

Extra 30% Off With Code GIFT

Sky Blue

*Price On 11/20/23

Final Sale

Final Sale

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

Notify Me

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

Responsive Grid

Mixed Variants — Fluid Grid

4 col (lg) → 3 col (md) → 2 col (sm) → 1 col. Resize the window to test swatch layout switching.

New

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

Sale

Wrinkle-Free Short Sleeve Riverstone Shirt

$110*

$88

Extra 30% Off With Code GIFT

Sky Blue

*Price On 11/20/23

Final Sale

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue

Wrinkle-Free Short Sleeve Riverstone Shirt

$110

Sky Blue