文件

可乐加冰 019630f12c 前端小程序

2026-09-14 17:24:53 +08:00

7.6 KiB

原始文件 Blame 文件历史

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

CSS Import:

@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

/* 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

.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

.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

.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

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

7.6 KiB 原始文件 Blame 文件历史 Unescape Escape