car-wash-java/car-wash-mp/.impeccable/design.json

{
  "schemaVersion": 2,
  "generatedAt": "2026-05-08T00:00:00+08:00",
  "title": "Design System: YesWash 用户端小程序",
  "extensions": {
    "colorMeta": {
      "primary": {
        "role": "primary",
        "displayName": "Primary Red",
        "canonical": "oklch(48% 0.18 25)",
        "tonalRamp": [
          "oklch(15% 0.05 25)",
          "oklch(25% 0.08 25)",
          "oklch(35% 0.12 25)",
          "oklch(42% 0.15 25)",
          "oklch(48% 0.18 25)",
          "oklch(58% 0.14 25)",
          "oklch(72% 0.08 25)",
          "oklch(90% 0.02 25)"
        ]
      },
      "text-primary": {
        "role": "neutral",
        "displayName": "Text Primary",
        "canonical": "oklch(15% 0.002 250)"
      },
      "bg-page": {
        "role": "neutral",
        "displayName": "Page Background",
        "canonical": "oklch(97% 0.003 250)"
      }
    },
    "typographyMeta": {
      "body": { "displayName": "Body", "purpose": "正文、列表项、描述文本，行高 1.6" },
      "title": { "displayName": "Title", "purpose": "页面标题、区块标题、订单金额，600 字重" }
    },
    "shadows": [],
    "motion": [
      { "name": "ease-tap", "value": "0.15s ease", "purpose": "按钮点击反馈" },
      { "name": "ease-state", "value": "0.2s ease", "purpose": "Tab 切换、列表展开" }
    ],
    "breakpoints": []
  },
  "components": [
    {
      "name": "Primary Button",
      "kind": "button",
      "refersTo": "button-primary",
      "description": "页面主操作按钮，44px 最小触控高度",
      "html": "<button class=\"ds-btn-primary\">立即下单</button>",
      "css": ".ds-btn-primary { background: #C6171E; color: #fff; height: 44px; padding: 0 24px; font-size: 14px; font-weight: 500; border: none; border-radius: 3px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; transition: background 0.15s; } .ds-btn-primary:active { background: #A81212; }"
    },
    {
      "name": "Ghost Button",
      "kind": "button",
      "refersTo": "button-ghost",
      "description": "次要操作，透明底 + 红色边框",
      "html": "<button class=\"ds-btn-ghost\">取消</button>",
      "css": ".ds-btn-ghost { background: transparent; color: #C6171E; height: 44px; padding: 0 24px; font-size: 14px; font-weight: 400; border: 1px solid #C6171E; border-radius: 3px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; transition: background 0.15s; } .ds-btn-ghost:active { background: rgba(198,23,30,0.08); }"
    },
    {
      "name": "Card",
      "kind": "card",
      "refersTo": "card",
      "description": "标准内容卡片，白底 6px 圆角",
      "html": "<div class=\"ds-card\"><div class=\"ds-card-title\">最近网点</div><div class=\"ds-card-body\">朝阳区建国路88号</div></div>",
      "css": ".ds-card { background: #fff; border-radius: 6px; padding: 15px; margin-bottom: 12px; } .ds-card-title { font-size: 18px; font-weight: 600; color: #1A1A1A; margin-bottom: 8px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .ds-card-body { font-size: 14px; color: #666; line-height: 1.6; }"
    },
    {
      "name": "Tab Bar Item (Active)",
      "kind": "nav",
      "refersTo": "tab-active",
      "description": "自定义底部导航，选中态",
      "html": "<div class=\"ds-tab-item\"><svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"#C6171E\"><circle cx=\"12\" cy=\"12\" r=\"8\"/></svg><span>网点</span></div>",
      "css": ".ds-tab-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; } .ds-tab-item span { font-size: 12px; color: #C6171E; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }"
    },
    {
      "name": "List Item",
      "kind": "custom",
      "refersTo": "list-item",
      "description": "通用列表项，左侧标签 + 右侧箭头",
      "html": "<div class=\"ds-list-item\"><span class=\"ds-list-label\">我的订单</span><span class=\"ds-list-arrow\">›</span></div>",
      "css": ".ds-list-item { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 15px; background: #fff; border-bottom: 1px solid #F0F0F0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } .ds-list-label { font-size: 14px; color: #1A1A1A; } .ds-list-arrow { font-size: 18px; color: #B0B0B0; }"
    }
  ],
  "narrative": {
    "northStar": "口袋里的洗车助手",
    "overview": "车主掏出手机，几秒钟内找到最近的洗车网点、完成预约、扫码启动洗车机。整个过程应该在排队等候的间隙就能完成。系统基于 uni-app + uv-ui 组件库，主色已经是品牌红 (#C6171E)。追求「打开即用，用完即走」的小程序典型体验。",
    "keyCharacteristics": [
      "移动端优先，触控目标 ≥44px",
      "品牌红作为导航和行动色",
      "卡片式布局为主",
      "自定义导航栏和底部 TabBar",
      "150-250ms 微交互做状态反馈"
    ],
    "rules": [
      { "name": "The Red Means Action Rule", "body": "品牌红不出现在非交互元素上。看到红色，就意味着可以点击、可以操作。", "section": "colors" },
      { "name": "The Card-White Rule", "body": "所有内容卡片使用纯白底，与页面底色形成两层信息结构。不做三层以上的背景嵌套。", "section": "colors" },
      { "name": "The Weight Over Color Rule", "body": "同一页面最多使用两种文本颜色。层级差异通过字重和字号表达。", "section": "typography" }
    ],
    "dos": [
      "用 Primary Red 标记所有可交互元素和当前激活态",
      "保持页面底色和卡片白底的二级结构",
      "所有可点击区域至少 44px 高",
      "文本层级靠字重区分：400 → 600 → 700",
      "按钮、列表项保持统一的 3px 圆角"
    ],
    "donts": [
      "使用大红色块铺满屏幕",
      "在非交互元素上使用 Primary Red",
      "卡片内嵌套卡片",
      "使用超过两种文本颜色在同一页面",
      "使用花哨的加载动画",
      "在小程序内引入 Web 字体"
    ]
  }
}