150 lines
4.3 KiB
Markdown
150 lines
4.3 KiB
Markdown
# 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
|