dukang/pages/stitch_4_1.0/DESIGN.md

name, colors, typography, rounded, spacing

name	colors	typography	rounded	spacing
Dukang Hospitality Heritage	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant heritage-red aged-amber ink-black subtle-gray success-green status-blue #faf9f7 #dadad8 #faf9f7 #ffffff #f4f3f1 #efeeec #e9e8e6 #e3e2e0 #1a1c1b #5a413f #2f3130 #f1f1ef #8d706e #e2bebc #b3272c #820012 #ffffff #a61d24 #ffb9b4 #ffb3ae #735c00 #ffffff #fed65b #745c00 #37413b #ffffff #4e5852 #c2cdc6 #ba1a1a #ffffff #ffdad6 #93000a #ffdad7 #ffb3ae #410004 #910817 #ffe088 #e9c349 #241a00 #574500 #dae5dd #bec9c2 #141e19 #3f4943 #faf9f7 #1a1c1b #e3e2e0 #A61D24 #FFBF00 #1A1A1A #999999 #2D6A4F #2A6EBB	headline-xl headline-lg headline-md body-lg body-md label-md coupon-amount headline-lg-mobile fontFamily fontSize fontWeight lineHeight letterSpacing Manrope 32px 700 40px -0.02em fontFamily fontSize fontWeight lineHeight Manrope 24px 600 32px fontFamily fontSize fontWeight lineHeight Manrope 18px 600 26px fontFamily fontSize fontWeight lineHeight Be Vietnam Pro 16px 400 24px fontFamily fontSize fontWeight lineHeight Be Vietnam Pro 14px 400 20px fontFamily fontSize fontWeight lineHeight letterSpacing Inter 12px 500 16px 0.05em fontFamily fontSize fontWeight lineHeight Manrope 28px 700 28px fontFamily fontSize fontWeight lineHeight Manrope 20px 600 28px	sm DEFAULT md lg xl full 0.25rem 0.5rem 0.75rem 1rem 1.5rem 9999px	base margin-page gutter-card stack-sm stack-md stack-lg 8px 20px 12px 4px 16px 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.