4.3 KiB

Raw Blame History

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

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

.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

.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

4.3 KiB Raw Blame History