---
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.