246 行
7.6 KiB
Markdown
246 行
7.6 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:** 雄戈小酒
|
||
**Generated:** 2026-08-27 21:00:42
|
||
**Category:** Luxury/Premium Brand
|
||
**Design Dials:** Variance 2/10 (Centered / Minimal) | Motion 2/10 (Subtle) | Density 3/10 (Spacious)
|
||
|
||
**Theme Strategy:** 商务蓝白 — 深蓝顶区 #0A2463 + 商务蓝交互 #1677FF + 灰白页面底 #F5F7FA
|
||
|
||
---
|
||
|
||
## Global Rules
|
||
|
||
### Color Palette (v3 — 2026-08-31)
|
||
|
||
| Role | Hex | SCSS Variable | Usage |
|
||
|------|-----|---------------|-------|
|
||
| Navy (Logo/顶区) | `#0A2463` | `$brand-navy` | 我的页顶区、品牌深蓝 |
|
||
| Primary (交互蓝) | `#1677FF` | `$brand-primary` | Tab、按钮、图标强调 |
|
||
| Primary Light | `#E6F4FF` | `$brand-primary-light` | 图标圆底 |
|
||
| Primary Dark | `#0958D9` | `$brand-primary-dark` | 按下态 |
|
||
| Background | `#F5F7FA` | `$brand-page-bg` | 页面底色 |
|
||
| Card | `#FFFFFF` | `$brand-card-bg` | 卡片 |
|
||
| Text Primary | `#1F2937` | `$brand-text` | 正文 |
|
||
| Text Muted | `#6B7280` | `$brand-text-muted` | 副文案 |
|
||
| Text on Navy | `#FFFFFF` | `$brand-text-on-primary` | 蓝底白字 |
|
||
| Price | `#FF4D4F` | `$brand-price` | 价格 |
|
||
| Border | `#E5E7EB` | `$brand-border` | 分割线 |
|
||
| TabBar Active | `#1677FF` | `$brand-tabbar-active` | 选中 Tab |
|
||
| TabBar Inactive | `#BBBBBB` | `$brand-tabbar-inactive` | 灰色未选中 |
|
||
|
||
**Logo CDN:** `/uploads/demo/xiongge/xiongge-brand-emblem.png`
|
||
|
||
**Avoid:** 大面积香槟金 CTA（金色仅 Logo 徽章）
|
||
|
||
### Typography
|
||
|
||
- **Heading Font (Web):** Cormorant
|
||
- **Body Font (Web):** Montserrat
|
||
- **小程序实现字体:** OPPOSANS（正文字体，已本地加载）；装饰标题可用 `wenyue`
|
||
- **Mood:** luxury, high-end, fashion, elegant, refined, premium
|
||
- **Google Fonts:** [Cormorant + Montserrat](https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap)
|
||
|
||
**CSS Import:**
|
||
```css
|
||
@import url('https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600;700&display=swap');
|
||
```
|
||
|
||
### Spacing Variables
|
||
|
||
*Density: 4/10 — Standard*
|
||
|
||
| Token | Value | Usage |
|
||
|-------|-------|-------|
|
||
| `--space-xs` | `4px` / `0.25rem` | Tight gaps |
|
||
| `--space-sm` | `8px` / `0.5rem` | Icon gaps, inline spacing |
|
||
| `--space-md` | `16px` / `1rem` | Standard padding |
|
||
| `--space-lg` | `24px` / `1.5rem` | Section padding |
|
||
| `--space-xl` | `32px` / `2rem` | Large gaps |
|
||
| `--space-2xl` | `48px` / `3rem` | Section margins |
|
||
| `--space-3xl` | `64px` / `4rem` | Hero padding |
|
||
|
||
### Subpage Layout (小程序)
|
||
|
||
- 页面底色: `$brand-page-bg` (#FAFAF8)
|
||
- 水平边距: `$brand-page-gutter` (24rpx)
|
||
- 区块间距: `$brand-section-gap` (24rpx)
|
||
- 导航: `shopro-navbar` variant=`white` | `gradient`
|
||
- 布局组件: `shopro-page-layout`（navbar + scroll + footer）
|
||
- 卡片: 白底 + `$brand-card-radius` + `$brand-shadow`
|
||
- 底部固定栏: `env(safe-area-inset-bottom)` 安全区
|
||
|
||
### Shadow Depths
|
||
|
||
| Level | Value | Usage |
|
||
|-------|-------|-------|
|
||
| `--shadow-sm` | `0 1px 2px rgba(0,0,0,0.05)` | Subtle lift |
|
||
| `--shadow-md` | `0 4px 6px rgba(0,0,0,0.1)` | Cards, buttons |
|
||
| `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.1)` | Modals, dropdowns |
|
||
| `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.15)` | Hero images, featured cards |
|
||
|
||
---
|
||
|
||
## Component Specs
|
||
|
||
### Buttons
|
||
|
||
```css
|
||
/* Primary Button */
|
||
.btn-primary {
|
||
background: #A16207;
|
||
color: white;
|
||
padding: 12px 24px;
|
||
border-radius: 8px;
|
||
font-weight: 600;
|
||
transition: all 200ms ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
opacity: 0.9;
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* Secondary Button */
|
||
.btn-secondary {
|
||
background: transparent;
|
||
color: #1C1917;
|
||
border: 2px solid #1C1917;
|
||
padding: 12px 24px;
|
||
border-radius: 8px;
|
||
font-weight: 600;
|
||
transition: all 200ms ease;
|
||
cursor: pointer;
|
||
}
|
||
```
|
||
|
||
### Cards
|
||
|
||
```css
|
||
.card {
|
||
background: #FAFAF9;
|
||
border-radius: 12px;
|
||
padding: 24px;
|
||
box-shadow: var(--shadow-md);
|
||
transition: all 200ms ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.card:hover {
|
||
box-shadow: var(--shadow-lg);
|
||
transform: translateY(-2px);
|
||
}
|
||
```
|
||
|
||
### Inputs
|
||
|
||
```css
|
||
.input {
|
||
padding: 12px 16px;
|
||
border: 1px solid #E2E8F0;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
transition: border-color 200ms ease;
|
||
}
|
||
|
||
.input:focus {
|
||
border-color: #1C1917;
|
||
outline: none;
|
||
box-shadow: 0 0 0 3px #1C191720;
|
||
}
|
||
```
|
||
|
||
### Modals
|
||
|
||
```css
|
||
.modal-overlay {
|
||
background: rgba(0, 0, 0, 0.5);
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.modal {
|
||
background: white;
|
||
border-radius: 16px;
|
||
padding: 32px;
|
||
box-shadow: var(--shadow-xl);
|
||
max-width: 500px;
|
||
width: 90%;
|
||
}
|
||
```
|
||
|
||
---
|
||
|
||
## Style Guidelines
|
||
|
||
**Style:** Minimalism & Swiss Style
|
||
|
||
**Keywords:** Clean, simple, spacious, functional, white space, high contrast, geometric, sans-serif, grid-based, essential
|
||
|
||
**Best For:** Enterprise apps, dashboards, documentation sites, SaaS platforms, professional tools
|
||
|
||
**Key Effects:** Subtle hover (200-250ms), smooth transitions, sharp shadows if any, clear type hierarchy, fast loading
|
||
|
||
### Page Pattern
|
||
|
||
**Pattern Name:** Scroll-Triggered Storytelling
|
||
|
||
- **Conversion Strategy:** Keep the narrative understandable without scroll-driven effects. Use progress indicator. Mobile: simplify animations. Keep DOM reading order complete; disable parallax and scroll-scrub under reduced motion. Pause scroll animation when offscreen or hidden and render each chapter in its final readable state under reduced motion.
|
||
- **CTA Placement:** End of each chapter (mini) + Final climax CTA
|
||
- **Section Order:** Intro hook > Chapter 1 (problem) > Chapter 2 (journey) > Chapter 3 (solution) > Climax CTA
|
||
|
||
---
|
||
|
||
## Motion
|
||
|
||
**Scroll Reveal** (Subtle) — Trigger: scroll (viewport enter) | Duration: 300-400ms | Easing: `power1.out`
|
||
|
||
```js
|
||
gsap.from(el, { opacity: 0, y: 12, duration: 0.35, ease: 'power1.out', scrollTrigger: { trigger: el, start: 'top 90%', toggleActions: 'play none none reverse' } });
|
||
```
|
||
|
||
**Framework notes:** Requires the ScrollTrigger plugin registered once via gsap.registerPlugin(ScrollTrigger); Use matchMedia('(prefers-reduced-motion: reduce)') to skip non-essential motion and render the final state immediately
|
||
|
||
- ✅ Keep the y offset small (8-16px) so it reads as a fade, not a slide
|
||
- ❌ Don't reveal below-the-fold content needed for SEO/crawlers as invisible-by-default without a no-JS fallback
|
||
- ⚡ toggleActions 'play none none reverse' avoids re-triggering on every scroll direction change
|
||
|
||
---
|
||
|
||
## Anti-Patterns (Do NOT Use)
|
||
|
||
- ❌ Cheap visuals
|
||
- ❌ Fast animations
|
||
|
||
### Additional Forbidden Patterns
|
||
|
||
- ❌ **Emojis as icons** — Use SVG icons (Heroicons, Lucide, Simple Icons)
|
||
- ❌ **Missing cursor:pointer** — All clickable elements must have cursor:pointer
|
||
- ❌ **Layout-shifting hovers** — Avoid scale transforms that shift layout
|
||
- ❌ **Low contrast text** — Maintain 4.5:1 minimum contrast ratio
|
||
- ❌ **Instant state changes** — Always use transitions (150-300ms)
|
||
- ❌ **Invisible focus states** — Focus states must be visible for a11y
|
||
|
||
---
|
||
|
||
## Pre-Delivery Checklist
|
||
|
||
Before delivering any UI code, verify:
|
||
|
||
- [ ] No emojis used as icons (use SVG instead)
|
||
- [ ] All icons from consistent icon set (Heroicons/Lucide)
|
||
- [ ] `cursor-pointer` on all clickable elements
|
||
- [ ] Hover states with smooth transitions (150-300ms)
|
||
- [ ] Light mode: text contrast 4.5:1 minimum
|
||
- [ ] Focus states visible for keyboard navigation
|
||
- [ ] `prefers-reduced-motion` respected
|
||
- [ ] Responsive: 375px, 768px, 1024px, 1440px
|
||
- [ ] No content hidden behind fixed navbars
|
||
- [ ] No horizontal scroll on mobile
|