# Design System Master File

> **LOGIC:** When building a specific page, first check `design-system/pages/[page-name].md`.
> If that file exists, its rules **override** this Master file.
> If not, strictly follow the rules below.

---

**Project:** web-snack
**Generated:** 2026-08-01
**Category:** E-commerce / Snack mobile & web client
**Style:** Claymorphism · Warm Snack Joy

---

## Global Rules

### Color Palette

| Role | Hex | CSS Variable |
|------|-----|--------------|
| Primary | `#F04E3E` | `--color-primary` |
| Primary Dark | `#D93A2B` | `--color-primary-dark` |
| Primary Light | `#FFF0EA` | `--color-primary-light` |
| Secondary | `#F7B733` | `--color-secondary` |
| CTA/Accent | `#FF8A4C` | `--color-cta` |
| Background | `#FFF7F0` | `--color-background` |
| Surface | `#FFFDF9` | `--color-surface` |
| Text | `#3A2E2A` | `--color-text` |
| Text Secondary | `#7A6A62` | `--color-text-secondary` |
| Success | `#2EC4B6` | `--color-success` |

**Color Notes:** Warm berry-coral + golden apricot on cream. The palette reads as food, playful, and high-contrast without feeling like a generic SaaS blue.

### Typography

- **Heading Font:** Fredoka
- **Body Font:** Nunito
- **Mood:** playful, friendly, approachable, snack-shop energy
- **Google Fonts:** [Fredoka + Nunito](https://fonts.google.com/share?selection.family=Fredoka:wght@400;500;600;700|Nunito:wght@300;400;500;600;700)

### Claymorphism Rules

- Cards use a thick 2px warm border (`#EEDDCB`), an inner top highlight, and a chunky bottom shadow.
- Hover raises the card with a soft transform; active presses it down. Never animate width/height.
- Radii stay 16-24px on cards and 9999px on pills/buttons.
- Primary interactive elements keep 44px minimum touch targets.
- `prefers-reduced-motion` disables decorative animations.

### Spacing Variables

| Token | Value | Usage |
|-------|-------|-------|
| `--space-xs` | `4px` | Tight gaps |
| `--space-sm` | `8px` | Icon gaps |
| `--space-md` | `16px` | Standard padding |
| `--space-lg` | `24px` | Section padding |
| `--space-xl` | `32px` | Large gaps |
| `--space-2xl` | `48px` | Section margins |
| `--space-3xl` | `64px` | Hero padding |

### Shadow Depths

| Level | Value | Usage |
|-------|-------|-------|
| `--shadow-sm` | `0 4px 0 0 #EEDDCB, 0 8px 18px -10px rgba(80,40,20,.16)` | Clay cards |
| `--shadow-md` | `0 6px 0 0 #E8D2BF, 0 14px 28px -12px rgba(80,40,20,.2)` | Hover cards |
| `--shadow-lg` | `0 8px 0 0 #E8D2BF, 0 22px 40px -14px rgba(80,40,20,.24)` | Modals, hero |
| `--shadow-glow` | `0 0 0 4px rgba(240,78,62,.14)` | Focus ring |

---

## Component Specs

### Primary Button

```css
.btn-primary {
  background: linear-gradient(135deg, #F04E3E, #FF8A4C);
  color: #fff;
  border: 2px solid #E8D2BF;
  border-radius: 9999px;
  box-shadow: 0 4px 0 0 #D93A2B;
  padding: 12px 24px;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn-primary:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.btn-primary:active {
  box-shadow: 0 1px 0 0 #D93A2B;
  transform: translateY(3px);
}
```

### Product Card

```css
.product-card {
  background: var(--color-surface);
  border: 2px solid var(--clay-border);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
}
```

### Section Header

- Use Fredoka 22-28px headings.
- Add a small clay icon badge before the title.
- Keep a pill-shaped "查看更多" link on the right.

### Mobile Bottom Nav

- Floating pill bar, 12px from edges, 12px from bottom.
- Active item uses a coral pill with white icon.
- Min touch target 44px.

---

## Anti-Patterns (Do NOT Use)

- ❌ Emojis as UI icons — use Element Plus / Lucide icons
- ❌ Blue SaaS dashboard palettes
- ❌ Flat cards without depth or clay borders
- ❌ Text-only hero with no product visual
- ❌ Instant hover changes or layout-shifting transforms
- ❌ Low contrast muted text (`#9CA3AF` on cream is too light)

## Pre-Delivery Checklist

- [ ] No emojis used as icons
- [ ] Consistent icon set
- [ ] `cursor-pointer` on all clickable elements
- [ ] 150-300ms transitions
- [ ] Light mode text contrast 4.5:1 minimum
- [ ] Visible focus states
- [ ] `prefers-reduced-motion` respected
- [ ] Responsive: 375px, 768px, 1024px, 1440px
- [ ] No horizontal scroll on mobile