---
name: AI零售柜
description: AI智能零售柜小程序 — 扫码开门、即拿即走、自动扣款
colors:
  primary-yellow: "#FFC107"
  primary-yellow-light: "#FFE082"
  primary-yellow-dark: "#FFA000"
  primary-yellow-bg: "#FFF8E1"
  neutral-ink: "#2C2C2C"
  neutral-ash: "#8C8C8C"
  neutral-cloud: "#BDBDBD"
  neutral-white: "#FFFFFF"
  neutral-cream: "#FAFAFA"
  neutral-mist: "#F5F5F5"
  neutral-border: "#EEEEEE"
  success-green: "#4CAF50"
  warning-orange: "#FF9800"
  error-red: "#F44336"
  info-blue: "#2196F3"
typography:
  body:
    fontFamily: "-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', system-ui, sans-serif"
    fontSize: "28rpx"
    fontWeight: 400
    lineHeight: 1.6
rounded:
  sm: "8rpx"
  md: "16rpx"
  lg: "24rpx"
  xl: "32rpx"
  full: "50%"
spacing:
  xs: "8rpx"
  sm: "16rpx"
  md: "24rpx"
  lg: "32rpx"
  xl: "48rpx"
  xxl: "64rpx"
components:
  button-primary:
    backgroundColor: "{colors.primary-yellow}"
    textColor: "#1A1A1A"
    rounded: "54rpx"
    padding: "24rpx 0"
    height: "108rpx"
  button-primary-hover:
    backgroundColor: "{colors.primary-yellow-dark}"
  button-ghost:
    backgroundColor: "{colors.neutral-white}"
    textColor: "{colors.neutral-ash}"
    rounded: "{rounded.xl}"
    padding: "16rpx 32rpx"
  card-default:
    backgroundColor: "{colors.neutral-white}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.neutral-white}"
    textColor: "{colors.neutral-ink}"
    rounded: "{rounded.sm}"
  chip-tag:
    backgroundColor: "rgba(255,255,255,0.9)"
    textColor: "#555555"
    rounded: "40rpx"
---

# Design System: AI零售柜

## 1. Overview

**Creative North Star: "The Yellow Mark"**

AI零售柜 is a consumer mini-program where the yellow accent works like a brand marker — instantly recognizable, like 美团's yellow or 闲鱼's yellow. The surface is clean and white, the yellow appears with purpose: a scan button, a selected state, a price. Its presence signals action; its absence signals rest.

The system is built on restraint, not because less is more, but because every element must justify itself against the physical context: a user standing in front of a cabinet under bright office lights, phone in one hand, products in the other. Speed reads as intelligence. Friction reads as cheapness.

The aesthetic rejects the busy, promo-heavy energy of discount retail mini-programs. No banner carousels, no red flash-sale tags, no cluttered grids of identically-sized product cards. Instead: generous negative space, deliberate typography, one shade of yellow doing one job at a time.

**Key Characteristics:**
- Yellow as brand marker, not surface decoration
- White-dominant backgrounds with warm tint
- Precision over abundance — every pixel is intentional
- Fast transitions that feel mechanical, not theatrical
- Physical-digital coherence: the phone UI mirrors the cabinet interaction

## 2. Colors

The palette is built around a single committed yellow, supported by warm-tinted neutrals and four functional signal colors. This is a **Committed** strategy: yellow carries 30-40% of the visual weight (primary buttons, brand marks, active states), while the rest of the surface stays in neutral territory.

### Primary
- **Brand Yellow** (#FFC107): The only accent. Used on the scan button, primary action buttons, active states, selected indicators, and the brand mark. Never used as a background fill on text-heavy surfaces; its job is to signal, not to decorate.
- **Yellow Light** (#FFE082): Transitions and subtle fills only. The gradient midpoint on the scan button.
- **Yellow Dark** (#FFA000): Hover/press states on yellow buttons, link text.
- **Yellow Background** (#FFF8E1): Lightest tint, used for highlight overlays and the top of page gradients.

### Neutral
- **Ink** (#2C2C2C): Primary text. Not pure black; slightly warm.
- **Ash** (#8C8C8C): Secondary text, descriptions, meta information.
- **Cloud** (#BDBDBD): Tertiary text, placeholder content, disabled states.
- **White** (#FFFFFF): Card and surface backgrounds.
- **Cream** (#FAFAFA): Page backgrounds, section dividers.
- **Mist** (#F5F5F5): Depressed surfaces, skeleton loading states.
- **Border** (#EEEEEE): Dividers, card borders, input strokes at rest.

### Functional
- **Green** (#4CAF50): Success, completed orders, payment confirmed.
- **Orange** (#FF9800): Warnings, pending status, attention-needed states.
- **Red** (#F44336): Errors, failed payments, expired states.
- **Blue** (#2196F3): Informational highlights, expand-tip text, links.

### Named Rules
**The One Yellow Rule.** Brand Yellow appears on at most 30-40% of any given screen. It is the brand marker, not the brand blanket. When everything is yellow, nothing is.

**The White Canvas Rule.** White (#FFFFFF) is the default card surface; Cream (#FAFAFA) is the default page background. The difference is subtle but structural — cards float on cream; content that belongs to the page sits directly on cream.

## 3. Typography

**Primary Font:** PingFang SC (with system fallback: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', system-ui, sans-serif)

**Character:** A single sans-serif stack optimized for Chinese text on small screens. PingFang SC's generous x-height and clean geometry work at the small sizes required by mini-program interfaces. No display face needed — this is a utility, not a magazine.

### Hierarchy
- **Page Title** (700, 48rpx, 1.2): Page-level headers like "AI零售柜" brand mark or modal titles. Used sparingly, 1-2 per screen.
- **Section Title** (600, 32-36rpx, 1.3): Card headers, section labels, status messages. The workhorse heading.
- **Body** (400-500, 28rpx, 1.6): Product names, prices, menu labels, form content. The default size for most text.
- **Caption** (400, 22-24rpx, 1.5): Secondary metadata, timestamps, helper text, version info.
- **Button** (600, 28-36rpx, 1.0): Action labels in buttons. Letter-spacing of 2-8rpx on primary CTAs for presence.

### Named Rules
**The Scale Jump Rule.** Adjacent text sizes differ by at least 1.25x. No 28rpx next to 30rpx; the scale skips intentionally: 22 → 24 → 28 → 32 → 36 → 48 → 56.

## 4. Elevation

This system uses intentional, restrained shadows. Surfaces are flat at rest; elevation is a response to state — a button lifts on hover, a card lifts when interactive. The shadow vocabulary is minimal: four levels from ambient to prominent.

Shadows are never decorative. They exist to communicate: "this is tappable," "this is above," "this is important right now."

### Shadow Vocabulary
- **Ambient** (`0 2rpx 8rpx rgba(0,0,0,0.04)`): Subtle grounding for cards at rest. Barely visible; more felt than seen.
- **Low** (`0 4rpx 16rpx rgba(0,0,0,0.06)`): Default card elevation. Separates a card from the cream background.
- **Mid** (`0 8rpx 32rpx rgba(0,0,0,0.08)`): Elevated surfaces like the login card or active modal.
- **Brand Glow** (`0 8rpx 24rpx rgba(255,193,7,0.25)`): The scan button's halo. The only colored shadow; reserved for the primary CTA.

### Named Rules
**The Shadow Has a Job Rule.** Never use a shadow without answering: what does this elevation communicate? If the answer is "looks nice," remove it.

**The Flat-By-Default Rule.** Menu items, list rows, and non-interactive surfaces carry no shadow. Shadow = affordance, not decoration.

## 5. Components

### Buttons
- **Shape:** Fully rounded pill (54rpx radius) for primary actions; 32rpx for secondary.
- **Primary:** Brand Yellow fill (#FFC107), near-black text (#1A1A1A), Brand Glow shadow. Used for the scan button, "开门购物," and the payment confirmation button. Height: 108rpx for the scan/home buttons, 88rpx for inline actions.
- **Hover:** Darkens to Yellow Dark (#FFA000), lifts 4rpx with expanded shadow. 300ms ease-out.
- **Ghost:** White fill, 2rpx Border (#EEEEEE) stroke, Ash text. Used for "返回" and secondary actions alongside primary buttons. Active state: background shifts to Cream.

### Cards
- **Corner Style:** 24rpx radius (`$radius-lg`). Consistent across all card types.
- **Background:** White (#FFFFFF) with Ambient or Low shadow depending on context.
- **Internal Padding:** 32rpx (`$spacing-lg`) as default; varies to 24rpx for compact info cards.
- **Border:** Cards use shadow for separation, not borders. The only bordered surface is the login card (1rpx solid rgba yellow tint).

### Inputs & Fields
- **Style:** White fill, 2rpx Border stroke at rest, 2rpx Brand Yellow or Blue on focus.
- **Focus:** Border-color shift to #1890FF or Brand Yellow. No glow; the border transition is enough.
- **Error:** Border shifts to Error Red. Error text in Red below the field.

### Navigation
- **Tab bar:** Text labels with icon above. Active tab in Brand Yellow, inactive in Cloud (#BDBDBD).
- **Door tabs (left/right):** Horizonally split, active tab underlined with 4rpx Brand Yellow bar.
- **Page header:** Centered title in Body weight, optional back arrow on left.

### Chips & Tags
- **Style:** White background (90% opacity), 1rpx border with yellow tint, 40rpx rounded pill.
- **Usage:** Feature tags on login page (秒级开门, 安全支付, AI识别).
- **Badge:** Error Red fill, white text, 32rpx height, 16rpx radius. Used for coupon counts and notification dots.

### Status Indicators
- **Success:** Green circle with white checkmark, 56rpx diameter.
- **Pending:** Orange circle with clock or spinner.
- **Error:** Red circle with cross mark.
- **Each has a 4rpx 12rpx colored shadow matching its fill.**

## 6. Do's and Don'ts

### Do:
- **Do** use Brand Yellow (#FFC107) exclusively for interactive elements: buttons, selected states, brand marks, and active indicators.
- **Do** use White (#FFFFFF) for cards and Cream (#FAFAFA) for page backgrounds. The distinction creates structure without borders.
- **Do** maintain at least 32rpx of breathing room around primary CTAs. The scan button needs space to own the center of the screen.
- **Do** use the Shadow vocabulary intentionally: Ambient for at-rest cards, Brand Glow only for the primary CTA.
- **Do** cap body text at 65-75 characters per line on the widest screen.

### Don't:
- **Don't** use Brand Yellow as a background fill on text-heavy surfaces. Yellow's job is signaling action, not hosting reading.
- **Don't** introduce a second accent color. Green, orange, red, and blue are functional signals; they are not decorative accents.
- **Don't** use nested cards. A card inside a card is always wrong.
- **Don't** use side-stripe borders (border-left/border-right > 1px) as colored accents. Use full borders, background tints, or nothing.
- **Don't** use gradient text (background-clip: text). Solid colors only.
- **Don't** use glassmorphism, decorative blurs, or translucent overlays as a default aesthetic.
- **Don't** use em dashes in copy. Commas, colons, and periods only.
- **Don't** use the hero-metric template (big number + small label + supporting stats + gradient accent).
- **Don't** let the interface feel like a discount retail mini-program: no red flash-sale badges, no banner carousels, no cluttered grids of same-sized product cards.