E-Commerce Product Grid

---
name: E-Commerce Product Grid
colors:
  background: '#fafafa'
  surface: '#ffffff'
  primary: '#171717'
  accent: '#dc2626'
  text-primary: '#171717'
  text-secondary: '#737373'
  border: '#e5e5e5'
  sale-badge: '#dc2626'
typography:
  heading:
    fontFamily: Inter
    fontSize: 20px
    fontWeight: '600'
  body:
    fontFamily: Inter
    fontSize: 14px
  price:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '700'
rounded:
  DEFAULT: 8px
  card: 12px
spacing:
  base: 4px
---

## Overview

Clean, high-density product grid optimized for browsing. Cards
have image-first hierarchy, prominent pricing, color swatch
pickers, and a quick-add-to-cart button that appears on hover.
Sidebar filters collapse on mobile into a sheet.

## Colors

- Background: neutral warm (#fafafa)
- Cards: white with subtle border (#e5e5e5)
- Text: near-black primary (#171717), mid-gray secondary (#737373)
- Sale badge: red (#dc2626), white text
- Primary action: black (#171717), inverted text

## Typography

Inter at three weights: 600 for product names, 700 for prices,
400 for descriptions. Tabular-nums on all price values.

## Components

- Product Card: image → name → price → color swatches → quick-add
- Color Swatch: 20px circle with selected ring indicator
- Quick-Add Button: appears on card hover, black bg, white text
- Filter Sidebar: checkbox groups, price range slider
- Sale Badge: red pill, top-left of card image