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.

Token	Value	Note
`--color-blue-700`	`#255090`	Hover state (Blue-Brand 1/Blue-700)
`--color-neutral-300`	`#C5C5C5`	Disabled bg / border
`--color-success`	`#24882D`	Feedback/success (Green-900)
`--btn-solid-hover`	`#255090`	Button hover (inherits Blue-700)

Design Tokens

Token Reference

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

Property	Design Token	Value	Notes
Image aspect ratio	`321 : 381`	0.842	Fluid width, locked ratio
Image placeholder	`neutral-400`	#9B9B9B	Shown when imageSrc omitted
Quick Shop width	`240 px`	240px	max capped to calc(100%−24px)
Quick Shop height	`40 px`	40px
Quick Shop BG	`white / 60%`	rgba(255,255,255,0.6)	bg-white/60
Quick Shop bottom	`Scale/1200`	80px	Fixed offset from image bottom
Badge height	`Scale/600`	24px	Always bg-[#ececec]
Badge inset	`Scale/300`	10px	bottom-left
Badge text (Default)	`Color/Blue/Blue-900`	#142D51	Navy
Badge text (Sale)	`Color/Maroon`	#8E2231	Maroon
Wishlist hit target	`Scale/800`	32×32px	top-right, 12 px inset
Swatch size (desktop)	`30 px`	30px	w-[30px] h-[30px]
Swatch size (mobile)	`36 px`	36px	w-9 h-9 (< lg)
Swatch gap (desktop)	`Scale/200`	8px	gap-x-2
Swatch gap (mobile)	`Scale/400`	16px	gap-x-4 (< lg)
Swatch ring	`1.5 px / Blue-900`	1.5px #142D51	ring-[1.5px] ring-blue-900
Title type	`Label/L_500`	16/20px w500 ls0.02em	neutral-700
Price type	`Label/L_400`	16/20px w400 ls0.02em	neutral-700
Sale original price	`Label/L_400`	16/20px w400	neutral-500 + asterisk
Sale price	`Label/L_400`	16/20px w400	maroon (#8E2231)
Promo line type	`Label/M_400`	14/16px w400 ls0.02em	maroon
Color name type	`Label/M_500`	14/16px w500 ls0.02em	neutral-600
Price note type	`Label/XS_600`	10/12px w600 ls0.02em	neutral-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.

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

Product Card · 2026

Token Changes

Token Reference

Product Card

Default

Sale

Final Sale

Notify Me

All 4 Variants — Desktop Small (321 px)

Mixed Variants — Fluid Grid