init

pages/stitch_4_1.0/DESIGN.md

@@ -0,0 +1,204 @@
+---
+name: Dukang Hospitality Heritage
+colors:
+  surface: '#faf9f7'
+  surface-dim: '#dadad8'
+  surface-bright: '#faf9f7'
+  surface-container-lowest: '#ffffff'
+  surface-container-low: '#f4f3f1'
+  surface-container: '#efeeec'
+  surface-container-high: '#e9e8e6'
+  surface-container-highest: '#e3e2e0'
+  on-surface: '#1a1c1b'
+  on-surface-variant: '#5a413f'
+  inverse-surface: '#2f3130'
+  inverse-on-surface: '#f1f1ef'
+  outline: '#8d706e'
+  outline-variant: '#e2bebc'
+  surface-tint: '#b3272c'
+  primary: '#820012'
+  on-primary: '#ffffff'
+  primary-container: '#a61d24'
+  on-primary-container: '#ffb9b4'
+  inverse-primary: '#ffb3ae'
+  secondary: '#735c00'
+  on-secondary: '#ffffff'
+  secondary-container: '#fed65b'
+  on-secondary-container: '#745c00'
+  tertiary: '#37413b'
+  on-tertiary: '#ffffff'
+  tertiary-container: '#4e5852'
+  on-tertiary-container: '#c2cdc6'
+  error: '#ba1a1a'
+  on-error: '#ffffff'
+  error-container: '#ffdad6'
+  on-error-container: '#93000a'
+  primary-fixed: '#ffdad7'
+  primary-fixed-dim: '#ffb3ae'
+  on-primary-fixed: '#410004'
+  on-primary-fixed-variant: '#910817'
+  secondary-fixed: '#ffe088'
+  secondary-fixed-dim: '#e9c349'
+  on-secondary-fixed: '#241a00'
+  on-secondary-fixed-variant: '#574500'
+  tertiary-fixed: '#dae5dd'
+  tertiary-fixed-dim: '#bec9c2'
+  on-tertiary-fixed: '#141e19'
+  on-tertiary-fixed-variant: '#3f4943'
+  background: '#faf9f7'
+  on-background: '#1a1c1b'
+  surface-variant: '#e3e2e0'
+  heritage-red: '#A61D24'
+  aged-amber: '#FFBF00'
+  ink-black: '#1A1A1A'
+  subtle-gray: '#999999'
+  success-green: '#2D6A4F'
+  status-blue: '#2A6EBB'
+typography:
+  headline-xl:
+    fontFamily: Manrope
+    fontSize: 32px
+    fontWeight: '700'
+    lineHeight: 40px
+    letterSpacing: -0.02em
+  headline-lg:
+    fontFamily: Manrope
+    fontSize: 24px
+    fontWeight: '600'
+    lineHeight: 32px
+  headline-md:
+    fontFamily: Manrope
+    fontSize: 18px
+    fontWeight: '600'
+    lineHeight: 26px
+  body-lg:
+    fontFamily: Be Vietnam Pro
+    fontSize: 16px
+    fontWeight: '400'
+    lineHeight: 24px
+  body-md:
+    fontFamily: Be Vietnam Pro
+    fontSize: 14px
+    fontWeight: '400'
+    lineHeight: 20px
+  label-md:
+    fontFamily: Inter
+    fontSize: 12px
+    fontWeight: '500'
+    lineHeight: 16px
+    letterSpacing: 0.05em
+  coupon-amount:
+    fontFamily: Manrope
+    fontSize: 28px
+    fontWeight: '700'
+    lineHeight: 28px
+  headline-lg-mobile:
+    fontFamily: Manrope
+    fontSize: 20px
+    fontWeight: '600'
+    lineHeight: 28px
+rounded:
+  sm: 0.25rem
+  DEFAULT: 0.5rem
+  md: 0.75rem
+  lg: 1rem
+  xl: 1.5rem
+  full: 9999px
+spacing:
+  base: 8px
+  margin-page: 20px
+  gutter-card: 12px
+  stack-sm: 4px
+  stack-md: 16px
+  stack-lg: 32px
+---
+
+## Brand & Style
+
+The design system embodies "Heritage Modernism." It bridges the thousand-year legacy of Dukang liquor with the frictionless convenience of a modern WeChat Mini Program. The brand personality is **distinguished, hospitable, and authoritative**, designed to appeal to a premium demographic that values quality and tradition without wanting the clutter of typical e-commerce.
+
+The visual style is **Minimalist with Tactile Accents**. We use heavy whitespace and a strict grid to signify "Premium," while using rich, physical metaphors (like subtle amber gradients and paper-textured backgrounds) to ground the digital experience in the physical world of aged spirits and fine dining.
+
+**Key Principles:**
+- **Clarity Over Promotion:** No loud sales banners. The "Buy Liquor, Get Dining Coupons" value proposition is integrated into the product architecture, not shouted through pop-ups.
+- **Cultural Resonance:** Use of Chinese Red is intentional and restrained—acting as a seal of quality rather than a generic background color.
+- **Trustworthy Flow:** Transactional transparency is maintained through clear step-indicators and clean information density.
+
+## Colors
+
+The palette is rooted in the "Five Elements" and traditional Chinese aesthetics, refined for digital screens.
+
+- **Primary (Heritage Red):** A deep, scholarly red used for primary actions, brand marks, and high-level status. It evokes the "Red Seal" of authenticity.
+- **Secondary (Warm Gold/Amber):** Represents the liquid gold of aged liquor. Used for the "Coupon Badge" and premium highlights.
+- **Background (Off-White):** We avoid pure white in favor of a warm, paper-like neutral (`#F9F8F6`) to reduce eye strain and feel more organic.
+- **Accent (Success Green):** A soft, natural green used for "In Business" status and successful verification states, providing a calming contrast to the red.
+
+**Color Mode:** Fixed Light Mode to maintain the "clean and modern" hospitality aesthetic required for WeChat environments.
+
+## Typography
+
+The system uses a mix of high-quality sans-serifs to ensure maximum legibility within the WeChat environment while maintaining a refined edge.
+
+- **Manrope (Headlines):** Chosen for its modern, balanced geometric shapes. It provides a contemporary contrast to the traditional brand elements.
+- **Be Vietnam Pro (Body):** An approachable and highly readable font that works exceptionally well at small sizes for product descriptions.
+- **Inter (Labels):** Used for functional UI elements like buttons and status tags due to its systematic, utilitarian nature.
+
+**Hierarchy Rules:**
+- Price and Coupon amounts should always use `Manrope` Bold to emphasize value.
+- Product descriptions must implement a `2-line-clamp` to maintain grid consistency.
+- Navigation titles use `headline-md`.
+
+## Layout & Spacing
+
+The design system utilizes a **Fluid Grid** with a specific focus on card-based containers. 
+
+**Grid Architecture:**
+- **Margins:** A generous 20px page margin is mandatory to create an "Editorial" feel.
+- **Rhythm:** An 8px base unit governs all spacing.
+- **Product Display:** Product images are strictly 1:1 (square) to emphasize the bottle design and label.
+- **Banners:** Use a 16:6 aspect ratio for the home page header to keep focus on the product list below.
+
+**Responsive Behavior:**
+- On smaller mobile screens, the 2-column product grid reflows into a single-column list to ensure product photography remains impactful.
+- Bottom sheets should never exceed 80% of the screen height.
+
+## Elevation & Depth
+
+We avoid heavy shadows in favor of **Tonal Layers** and **Ambient Depth**.
+
+- **Level 0 (Base):** Off-white background (`#F9F8F6`).
+- **Level 1 (Cards):** Pure White (`#FFFFFF`) with a very soft, 12% opacity shadow: `0px 4px 20px rgba(166, 29, 36, 0.05)`. Note the subtle red tint in the shadow to harmonize with the primary color.
+- **Level 2 (Active Elements):** For interaction states, we use a slightly more pronounced shadow and a 1px border of `heritage-red` at 10% opacity.
+- **Layering:** Bottom sheets and Modals use a background blur (Backdrop Filter: 10px) to provide focus on the selection task without losing the context of the shop.
+
+## Shapes
+
+The shape language is **"Modern Softness."** 
+
+- **Cards:** Use a 16px corner radius to feel approachable and high-end.
+- **Buttons:** Primary buttons use a slightly reduced radius (12px) to look more "contained" and professional compared to more playful social apps.
+- **Badges:** Success tags and product categories use a "Pill" shape (fully rounded) to differentiate them from functional card elements.
+- **Photography:** Images should maintain the 16px radius when placed inside cards to ensure a cohesive silhouette.
+
+## Components
+
+### Buttons
+- **Primary:** Background in Heritage Red, White text, 12px radius. High-contrast and centered.
+- **Secondary:** Transparent background with a 1px Heritage Red border.
+
+### The Coupon Badge (¥XXX餐券)
+- **Design:** This is the hero of the product card. It features a Warm Amber (`#FFBF00`) background with a decorative "ticket" notch on the sides.
+- **Placement:** Positioned at the bottom-left of the product image or top-right of the card container.
+
+### Status Indicators (Step-Tracking)
+- Horizontal layout with thin 2px lines. 
+- Completed steps are Heritage Red with a Checkmark icon. 
+- Pending steps are Subtle Gray with a simple dot.
+
+### Bottom Sheets
+- Used for city selection and address picking. 
+- Must include a clear "Grabber" bar at the top and a fixed "Confirm" button at the base.
+
+### Cards
+- Standard `ProductCard` features a 1:1 image at the top, followed by 12px padding for the title, price, and the Amber Coupon Badge. 
+- `OrderCard` uses a horizontal layout for quick status scanning.