---
name: YesWash 用户端小程序
description: 自助洗车车主端微信小程序，预约、支付、会员一站式服务
colors:
  primary: "#C6171E"
  primary-light: "#E84545"
  primary-dark: "#A81212"
  success: "#4CAF50"
  warning: "#FF9800"
  error: "#F44336"
  info: "#2196F3"
  text-primary: "#1A1A1A"
  text-secondary: "#666666"
  text-tertiary: "#999999"
  text-placeholder: "#B0B0B0"
  text-inverse: "#FFFFFF"
  bg-page: "#F5F7FA"
  bg-card: "#FFFFFF"
  bg-hover: "#F8F8F8"
  border: "#E0E0E0"
  border-light: "#F0F0F0"
  divider: "#F0F0F0"
typography:
  body:
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
    fontSize: "14px"
    fontWeight: 400
    lineHeight: 1.6
  caption:
    fontSize: "12px"
    fontWeight: 400
    lineHeight: 1.2
  title:
    fontSize: "18px"
    fontWeight: 600
    lineHeight: 1.4
  headline:
    fontSize: "24px"
    fontWeight: 700
    lineHeight: 1.2
rounded:
  sm: "2px"
  md: "3px"
  lg: "6px"
  full: "50%"
spacing:
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "15px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.text-inverse}"
    rounded: "{rounded.md}"
  button-primary-hover:
    backgroundColor: "{colors.primary-dark}"
  tab-active:
    textColor: "{colors.primary}"
  tab-inactive:
    textColor: "#7A7E83"
---

# Design System: YesWash 用户端小程序

## 1. Overview

**Creative North Star: "口袋里的洗车助手"**

车主掏出手机，几秒钟内找到最近的洗车网点、完成预约、扫码启动洗车机。整个过程应该在排队等候的间隙就能完成 — 不需要思考，不需要学习，不需要等待。界面是透明的，用户看到的不是 UI，而是自己的车和下一个空闲的洗车位。

系统基于 uni-app + uv-ui 组件库，主色已经是品牌红 (#C6171E)，设计令牌体系完整。追求的是「打开即用，用完即走」的小程序典型体验：信息密度低、操作路径短、视觉噪声少。

**Key Characteristics:**
- 移动端优先，触控目标 ≥44px
- 品牌红作为导航和行动色，页面背景保持浅灰，卡片纯白
- 卡片式布局为主，每个卡片承载一个独立信息单元
- 自定义导航栏和底部 TabBar，与系统 UI 自然融合
- 不做过度动画，只用 150-250ms 微交互做状态反馈

## 2. Colors

### Primary
- **Primary Red** (#C6171E): 品牌主红 — 比后台管理系统的 Brand Red 更深一度，在小尺寸屏幕上有更好的辨识度。用于主按钮、Tab 选中态、轮播指示器、价格、关键状态图标。
- **Primary Light** (#E84545): 浅红，用于 hover 态和浅色强调背景。
- **Primary Dark** (#A81212): 深红，用于按钮按下态和深色强调。

### Semantic
- **Success** (#4CAF50): 支付成功、操作完成。
- **Warning** (#FF9800): 余额不足、即将过期。
- **Error** (#F44336): 支付失败、网络错误。
- **Info** (#2196F3): 订单状态更新、系统通知。

### Neutral
- **Text Primary** (#1A1A1A): 正文、标题、核心信息。
- **Text Secondary** (#666666): 辅助描述、次要标签。
- **Text Tertiary** (#999999): 时间戳、弱化信息。
- **Text Placeholder** (#B0B0B0): 输入框占位符。
- **Page Background** (#F5F7FA): 页面全局底色，略带蓝灰的浅色。
- **Card Background** (#FFFFFF): 卡片、列表项、弹窗背景。
- **Border** (#E0E0E0): 分割线、卡片描边。
- **Divider** (#F0F0F0): 轻量分割。

### Named Rules
**The Red Means Action Rule.** 品牌红不出现在非交互元素上。看到红色，就意味着可以点击、可以操作、或者这是当前激活态。

**The Card-White Rule.** 所有内容卡片使用纯白底 (#FFFFFF)，与页面底色 (#F5F7FA) 形成两层信息结构。不做三层以上的背景嵌套。

## 3. Typography

**Font Family:** `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`

系统字体栈，保证 iOS 和 Android 各自的最优渲染。小程序内不引入 Web 字体，不增加包体积。

**Character:** 清晰、中性、不抢戏。字号跨度从 12px 到 24px，通过字重而非颜色区分层级。

### Hierarchy
- **Headline** (700, 24px, 1.2): 大标题，仅用于首页和重要落地页顶部。
- **Title** (600, 18px, 1.4): 页面标题、区块标题、订单金额。
- **Body** (400, 14px, 1.6): 正文、列表项、描述文本。
- **Caption** (400, 12px, 1.2): 辅助说明、时间、标签。
- **Small** (400, 13px, 1.4): 表单标签、次要按钮文字。

### Named Rules
**The Weight Over Color Rule.** 同一页面最多使用两种文本颜色（Primary + Secondary）。层级差异通过字重 (400/600/700) 和字号表达，不引入第三种颜色。

## 4. Elevation

小程序采用**扁平底色分层**策略。不依赖阴影区分层级，而是通过背景色差（页面灰 → 卡片白）自然建立视觉层次。

- 页面底色 `#F5F7FA` 提供全局基准面
- 卡片白色 `#FFFFFF` 浮于基准面之上
- 弹窗/底部弹出层使用轻微阴影或遮罩 (`rgba(0,0,0,0.4)`)

阴影仅用于必须传达「浮层」的场景：底部弹出菜单、模态对话框。

## 5. Components

所有组件基于 `@climblee/uv-ui`，以下记录关键定制和使用约束。

### Buttons
- **Shape:** 3px 圆角，默认高度 44px（满足触控最小尺寸）。
- **Primary:** Primary Red 满底 + 白色文字。用于页面主操作：立即下单、确认支付、一键导航。
- **Hover:** 背景深至 Primary Dark，无缩放动画。
- **Ghost:** 透明底 + Primary Red 边框和文字。用于次要操作。
- **Disabled:** 透明度 0.3，不可交互。

### Tab Bar
- **Style:** 自定义底部导航，白色背景，顶部 1px 分割线。
- **Active:** Primary Red (#C6171E) 图标和文字。
- **Inactive:** 灰色 (#7A7E83) 图标和文字。
- **Font Size:** 12px 标签文字。

### Cards
- **Corner Style:** 6px 圆角。
- **Background:** Card White (#FFFFFF)。
- **Shadow:** 无默认阴影。
- **Internal Padding:** 12-15px (md-lg)。

### Navigation Bar
- **Style:** 自定义导航栏，Primary Red 背景 + 白色标题。
- **Height:** 状态栏高度 + 44px 内容区。
- **Title:** 18px, 600 字重, 白色。

### List Items
- **Style:** 白色背景，左侧图标/标签 + 右侧箭头，高度 ≥44px。
- **Divider:** 底部 1px Border Light 分割线，左右各 15px 留白。
- **Hover:** 背景微变至 #F8F8F8。

### Form Inputs
- **Style:** 白色背景，底部 1px Border 分割线。
- **Focus:** 分割线变为 Primary Red。
- **Label:** 14px, Text Primary, 左对齐。
- **Placeholder:** 14px, Text Placeholder。

## 6. Do's and Don'ts

### Do:
- **Do** 用 Primary Red 标记所有可交互元素和当前激活态
- **Do** 保持页面底色 (#F5F7FA) 和卡片白底 (#FFFFFF) 的二级结构
- **Do** 所有可点击区域至少 44px 高，满足微信小程序触控规范
- **Do** 文本层级靠字重区分：400 正文 → 600 标题 → 700 大标题
- **Do** 按钮、列表项、表单项保持统一的 3px 圆角
- **Do** 订单金额、优惠标签使用 600 字重突出

### Don't:
- **Don't** 使用大红色块铺满屏幕。红色是信号，不是背景
- **Don't** 在非交互元素上使用 Primary Red
- **Don't** 卡片内嵌套卡片
- **Don't** 使用超过两种文本颜色（Primary + Secondary）在同一页面
- **Don't** 使用花哨的加载动画或页面切换效果
- **Don't** 使用 `border-left` 彩色强调条
- **Don't** 在小程序内引入 Web 字体，增加不必要的包体积
- **Don't** 在三层以上的背景色嵌套中迷失（页面灰 → 卡片白，仅此两层）