EmailBill/.opencode/skills/pancli-design/SKILL.md

name, description, license, compatibility, metadata

name	description	license	compatibility	metadata
pancli-design	专业的设计技能，用于使用 pancli (pencil tools) 创建现代化、一致的 EmailBill 移动端 UI 设计	MIT	Requires pencil_* tools (batch_design, batch_get, etc.)	author version generatedBy lastUpdated source EmailBill Design Team 2.0.0 opencode 2026-02-03 .pans/v2.pen 日历设计 (亮色/暗色)

pancli-design - EmailBill UI 设计系统

专业的设计技能，用于使用 pancli (pencil tools) 创建现代化、一致的移动端 UI 设计。

何时使用此技能

总是使用此技能当:

• 使用 pancli 创建新的 UI 界面或组件
• 修改现有的 .pen 设计文件
• 处理亮色/暗色主题设计
• 为 EmailBill 项目设计移动端优先的界面

触发条件:

• 用户提到 "画设计图"、"设计"、"UI"、"界面"、"pancli"、".pen"
• 任务涉及 pencil_* 工具
• 创建视觉原型或模型

核心设计原则

1. 现代移动端优先设计

布局标准:

• 移动视口: 375px 宽度 (iPhone SE 基准)
• 安全区域: 尊重 iOS/Android 安全区域边距
• 触摸目标: 交互元素最小 44x44px
• 间距比例: 4px, 8px, 12px, 16px, 24px, 32px (8px 基础网格)
• 圆角半径: 12px (卡片), 16px (对话框), 24px (药丸/标签), 8px (按钮)
• 卡片阴影: 0 2px 12px rgba(0,0,0,0.08) 用于突出表面

避免 AI 设计痕迹:

• 不要使用通用的 "Dashboard" 占位符文本
• 不要使用图库照片或 Lorem Ipsum
• 不要使用过饱和的主色 (#007AFF, 不是 #0088FF)
• 不要使用生硬的阴影或渐变
• 不要使用 Comic Sans, Papyrus 或装饰性字体
• 使用代码库中的真实中文业务术语

2. 统一色彩系统 (基于实际 v2.pen 日历设计)

亮色主题:

/* 背景色 - 基于实际设计 */
--background-page: #FFFFFF       /* 页面背景 (Calendar frame fill) */
--background-card: #F6F7F8       /* 卡片背景 (statsCard, tCard fills) */
--background-accent: #F5F5F5     /* 强调背景 (notif button) */

/* 文本色 - 基于实际设计 */
--text-primary: #1A1A1A          /* 主文本 (titles, labels) */
--text-secondary: #6B7280        /* 次要文本 (dates, subtitles) */
--text-tertiary: #9CA3AF         /* 三级文本 (weekday labels) */

/* 语义色 - 基于实际设计 */
--accent-red: #FF6B6B            /* 支出/负数 (expense icon) */
--accent-yellow: #FCD34D         /* 警告/中性 (coffee icon) */
--accent-green: #F0FDF4          /* 收入/正数 (badge background) */
--accent-blue: #E0E7FF           /* 智能标签 (smart button) */
--accent-warm: #FFFBEB           /* 温暖色调 (badge background) */

/* 主操作色 */
--primary: #3B82F6               /* 主色调 (FAB button from Budget Stats) */

/* 边框与分割线 */
--border: #E5E7EB                /* 边框颜色 (从设计推断) */

暗色主题:

/* 背景色 - 基于实际暗色设计 */
--background-page: #09090B       /* 页面背景 (Calendar Dark frame) */
--background-card: #18181B       /* 卡片背景 (dark statsCard, tCard) */
--background-accent: #27272A     /* 强调背景 (dark notif, tCat) */

/* 文本色 - 基于实际暗色设计 */
--text-primary: #F4F4F5          /* 主文本 (dark titles) */
--text-secondary: #A1A1AA        /* 次要文本 (dark dates, subtitles) */
--text-tertiary: #71717A         /* 三级文本 (dark weekday labels) */

/* 语义色 - 暗色模式适配 */
--accent-red: #FF6B6B            /* 保持一致 */
--accent-yellow: #FCD34D         /* 保持一致 */
--accent-green: #064E3B          /* 深绿 (dark badge) */
--accent-blue: #312E81           /* 深蓝 (dark smart button) */
--accent-warm: #451A03           /* 深暖色 (dark badge) */

/* 主操作色 */
--primary: #3B82F6               /* 保持一致 */

/* 边框与分割线 */
--border: #3F3F46                /* 深色边框 */

颜色使用规则:

• 页面背景: 亮色 #FFFFFF, 暗色 #09090B
• 卡片背景: 亮色 #F6F7F8, 暗色 #18181B
• 主文本: 亮色 #1A1A1A, 暗色 #F4F4F5
• 次要文本: 亮色 #6B7280, 暗色 #A1A1AA
• 支出/负数: #FF6B6B (两种模式一致)
• 主操作按钮: #3B82F6 (两种模式一致)
• 圆角: 12px (小按钮), 16px (卡片), 20px (统计卡片), 22px (图标按钮)
• 阴影: 亮色使用柔和阴影, 暗色使用更深的阴影或无阴影
• 避免: 纯黑 (#000000) 或纯白 (#FFFFFF) 文本

3. 排版系统 (基于实际 v2.pen 设计)

字体栈:

/* 标题与大标题 - 基于 v2.pen */
font-family: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

/* 正文与界面 - 基于 v2.pen */
font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;

/* 备选: 系统默认 */
font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', sans-serif;

字号比例 (从实际设计提取):

用途	字体	大小	粗细	示例
大标题数值	Bricolage Grotesque	32px	800	¥ 1,248.50 (statsVal)
页面标题	DM Sans	24px	500	2026年1月 (subtitle)
章节标题	Bricolage Grotesque	18px	700	每日统计, 交易记录 (titles)
正文文本	DM Sans	15px	600	Lunch, Coffee (交易名称)
说明文字	DM Sans	13px	500	12:30 PM, Total Spent (标签)
微型文字	DM Sans	12px	600	一二三四五六日 (星期)

中文文本规则:

• 使用简体中文
• 真实业务术语: "每日统计" (daily stats), "交易记录" (transactions)
• 行高: 1.4-1.6 保证可读性
• 使用真实业务术语，避免 Lorem Ipsum

4. 组件库 (基于实际 v2.pen 设计)

卡片 (基于 statsCard, tCard):

统计卡片 (大卡片):
  - 背景: #F6F7F8 (亮色), #18181B (暗色)
  - 内边距: 20px
  - 圆角: 20px
  - 间距: 12px (元素之间)
  - 布局: 垂直

交易卡片 (列表卡片):
  - 背景: #F6F7F8 (亮色), #18181B (暗色)  
  - 内边距: 16px
  - 圆角: 16px
  - 间距: 14px (水平元素)
  - 高度: 自适应内容

按钮 (基于实际设计):

图标按钮 (通知按钮):
  - 尺寸: 44x44px
  - 圆角: 22px (完全圆形)
  - 背景: #F5F5F5 (亮色), #27272A (暗色)
  - 图标大小: 20px
  
标签按钮:
  - 内边距: 6px 10px / 6px 12px
  - 圆角: 12px
  - 字体: DM Sans 13px/500
  - 颜色:
    - 温暖色: #FFFBEB (亮色), #451A03 (暗色)
    - 绿色: #F0FDF4 (亮色), #064E3B (暗色)
    - 蓝色: #E0E7FF (亮色), #312E81 (暗色)

悬浮按钮 (FAB):
  - 尺寸: 56x56px
  - 圆角: 28px
  - 背景: #3B82F6
  - 描边: 4px 白色边框
  - 阴影: 提升效果

图标与文字:

图标容器:
  - 尺寸: 44x44px
  - 圆角: 22px
  - 背景: #FFFFFF (亮色), #27272A (暗色)
  - 图标: 20px (lucide 字体)
  - 颜色: #FF6B6B (星标), #FCD34D (咖啡)

章节标题:
  - 字体: Bricolage Grotesque 18px/700
  - 颜色: #1A1A1A (亮色), #F4F4F5 (暗色)
  
大数值:
  - 字体: Bricolage Grotesque 32px/800
  - 颜色: #1A1A1A (亮色), #F4F4F5 (暗色)

布局模式 (基于 Calendar 结构):

页面容器:
  - 宽度: 402px (设计视口)
  - 布局: 垂直
  - 内边距: 24px (容器边距)
  - 间距: 16px (章节之间)

头部区域:
  - 内边距: 8px 24px
  - 布局: 水平, 两端对齐
  - 对齐项: 居中

内容区域:
  - 内边距: 24px
  - 间距: 12-16px
  - 布局: 垂直

5. 布局模式

页面结构 (Flex 容器):

.page-container-flex:
  - display: flex
  - flex-direction: column
  - height: 100%
  - overflow: hidden
  
  结构:
    1. van-nav-bar (固定高度)
    2. van-tabs 或 sticky-header
    3. scroll-content (flex: 1, overflow-y: auto)
    4. bottom-button 或 van-tabbar (固定)

导航栏背景透明化 (一致性模式):

/* 设置页面容器背景色 */
:deep(.van-nav-bar) {
  background: transparent !important;
}

重要: 项目中所有视图都采用此模式，使导航栏背景透明，与页面背景融合。实现此效果时，请确保：

• 页面容器有明确的背景色 (亮色: #FFFFFF, 暗色: #09090B)
• 导航栏始终使用 :deep(.van-nav-bar) 选择器
• 必须添加 !important 覆盖 Vant 默认样式
• 在 <style scoped> 块中添加此规则

安全区域处理:

/* iPhone 刘海底部内边距 */
padding-bottom: env(safe-area-inset-bottom, 0px);

/* 状态栏顶部内边距 */
padding-top: max(0px, calc(env(safe-area-inset-top, 0px) * 0.75));

固定元素:

.sticky-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--van-background-2);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  margin: 12px;
  padding: 12px 16px;
}

6. 交互模式

触摸反馈:

• 激活状态: 点击时 scale(0.95)
• 涟漪效果: 使用 Vant 内置触摸反馈
• 悬停状态: 12% 透明度叠加 (网页端)

加载状态:

van-pull-refresh:
  - 用于顶层可滚动内容
  - 最小高度: calc(100vh - nav - tabbar)
  
van-loading:
  - 容器内居中
  - 尺寸: 内联 24px, 页面 32px

空状态:

van-empty:
  - 图标: 60px 大小
  - 描述: 14px, var(--van-text-color-2)
  - 内边距: 垂直 48px

悬浮操作:

van-floating-bubble:
  - 图标大小: 24px
  - 位置: 右下角, 距底部 100px (避开 tabbar)
  - 磁吸: 贴靠 x 轴边缘

7. 数据可视化

预算进度条:

渐变逻辑:
  支出 (0% → 100%):
    - 0%:  #40a9ff (安全蓝)
    - 40%: #36cfc9 (青色过渡)
    - 70%: #faad14 (警告黄)
    - 100%: #ff4d4f (危险红)
  
  收入 (0% → 100%):
    - 0%:  #f5222d (深红 - 未开始)
    - 45%: #ffcccc (浅红)
    - 50%: #f0f2f5 (中性灰)
    - 55%: #bae7ff (浅蓝)
    - 100%: #1890ff (深蓝 - 达成)

金额显示:

.amount {
  font-family: 'DIN Alternate', system-ui;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.expense { color: var(--van-danger-color); }
.income { color: var(--van-success-color); }

图表 (如果使用):

• 折线图: 2px 笔画, 圆角连接
• 柱状图: 8px 圆角, 4px 间距
• 颜色: 使用语义色阶
• 网格线: 1px, 8% 透明度

8. 主题切换 (亮色/暗色)

实现策略:

// 自动检测系统偏好
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches
theme.value = isDark ? 'dark' : 'light'
document.documentElement.setAttribute('data-theme', theme.value)

设计文件要求:

• 必须同时创建亮色和暗色变体
• 使用 Vant 的主题变量 (自动切换)
• 测试对比度: WCAG AA 最低标准 (文本 4.5:1)
• 暗色模式适配:
  • 减少卡片阴影至 0 2px 8px rgba(0,0,0,0.24)
  • 增加边框对比度
  • 白色文本柔化至 #e5e5e5

pancli 工作流:

1. 先创建亮色主题设计
2. 复制帧用于暗色模式
3. 使用 replace_all_matching_properties 批量更新:
   - 背景颜色
   - 文本颜色
   - 边框颜色
4. 手动调整阴影和叠加
5. 命名帧: "[屏幕名称] - Light" / "[屏幕名称] - Dark"

9. 命名约定

帧名称:

格式: [模块] - [屏幕] - [变体]

示例:
  ✅ Budget - List View - Light
  ✅ Budget - Edit Dialog - Dark
  ✅ Transaction - Card Component
  ✅ Statistics - Chart Section
  
  ❌ Screen1
  ❌ Frame_Copy_2
  ❌ New Design

组件层级:

可复用组件:
  - 前缀 "Component/"
  - 示例: "Component/BudgetCard"
  
屏幕:
  - 按模块分组
  - 示例: "Budget/ListView", "Budget/EditForm"

图层命名:

内部元素可用中文:
  ✅ 预算卡片背景
  ✅ 金额文本
  ✅ 操作按钮组
  
组件用英文:
  ✅ CardBackground
  ✅ AmountLabel
  ✅ ActionButtons

10. 质量检查清单

完成设计前:

• 同时创建了亮色和暗色主题
• 所有文本使用真实中文业务术语 (无 Lorem Ipsum)
• 交互元素 ≥ 44x44px
• 间距遵循 8px 网格
• 颜色使用语义变量 (非硬编码十六进制)
• 圆角: 12px/16px/24px 保持一致
• 尊重安全区域边距 (底部: 50px + 安全区域)
• 帧正确命名 模块/屏幕/变体
• 可复用组件标记为 reusable: true
• 字号匹配字号比例 (12/14/16/18/24)
• 数字数据使用 DIN Alternate
• 无 AI 生成的占位内容
• 已截图并视觉验证
• 导航栏背景设置为透明 (:deep(.van-nav-bar) { background: transparent !important; })

无障碍:

• 正文对比度 ≥ 4.5:1
• 大文本对比度 ≥ 3:1 (18px+)
• 触摸目标清晰分离 (最小 8px 间距)
• 颜色不是信息的唯一指示器

PANCLI 工作流程

阶段 1: 设置与风格选择

// 1. 获取编辑器状态
pencil_get_editor_state(include_schema: true)

// 2. 获取设计指南
pencil_get_guidelines(topic: "landing-page") // 或 "design-system"

// 3. 选择合适的风格指南
pencil_get_style_guide_tags() // 获取可用标签

// 4. 使用标签获取风格指南
pencil_get_style_guide(tags: [
  "mobile",        // 必需
  "webapp",        // 类应用界面
  "modern",        // 简洁, 现代
  "minimal",       // 避免杂乱
  "professional",  // 商业环境
  "blue",          // 主色提示
  "fintech"        // 如果可用
])

阶段 2: 创建亮色主题设计

// 5. 读取现有组件 (如果有)
pencil_batch_get(
  filePath: "designs/emailbill.pen",
  patterns: [{ reusable: true }],
  readDepth: 2
)

// 6. 创建亮色主题屏幕
pencil_batch_design(
  filePath: "designs/emailbill.pen",
  operations: `
    screen=I(document, {
      type: "frame",
      name: "Budget - List View - Light",
      width: 375,
      height: 812,
      fill: "#FFFFFF",
      layout: "vertical",
      placeholder: true
    })
    
    navbar=I(screen, {
      type: "frame",
      name: "Navbar",
      width: "fill_container",
      height: 44,
      fill: "transparent",
      layout: "horizontal",
      padding: [12, 16, 12, 16]
    })
    
    title=I(navbar, {
      type: "text",
      content: "预算管理",
      fontSize: 16,
      fontWeight: "600",
      textColor: "#1A1A1A"
    })
    
    // ... 更多操作
  `
)

阶段 3: 创建暗色主题变体

// 7. 复制亮色主题帧
pencil_batch_design(
  operations: `
    darkScreen=C("light-screen-id", document, {
      name: "Budget - List View - Dark",
      positionDirection: "right",
      positionPadding: 48
    })
  `
)

// 8. 批量替换暗色主题颜色
pencil_replace_all_matching_properties(
  parents: ["dark-screen-id"],
  properties: {
    fillColor: [
      { from: "#FFFFFF", to: "#09090B" },   // 页面背景
      { from: "#F6F7F8", to: "#18181B" },   // 卡片背景
      { from: "#F5F5F5", to: "#27272A" }    // 边框
    ],
    textColor: [
      { from: "#1A1A1A", to: "#F4F4F5" },   // 主文本
      { from: "#6B7280", to: "#A1A1AA" },   // 次要
      { from: "#9CA3AF", to: "#71717A" }    // 三级
    ]
  }
)

// 9. 手动调整暗色模式阴影 (如需要)
pencil_batch_design(
  operations: `
    U("dark-card-id", {
      shadow: {
        x: 0,
        y: 2,
        blur: 8,
        color: "rgba(0,0,0,0.24)"
      }
    })
  `
)

阶段 4: 验证

// 10. 对两种主题截图
pencil_get_screenshot(nodeId: "light-screen-id")
pencil_get_screenshot(nodeId: "dark-screen-id")

// 11. 检查布局问题
pencil_snapshot_layout(
  parentId: "light-screen-id",
  problemsOnly: true
)

// 12. 验证所有唯一属性
pencil_search_all_unique_properties(
  parents: ["light-screen-id"],
  properties: ["fillColor", "textColor", "fontSize"]
)

代码库实际示例

示例 1: 预算卡片组件

组件结构:
  BudgetCard (375x120px)
    ├─ CardBackground (#ffffff, 16px 圆角, 阴影)
    ├─ HeaderRow (水平布局)
    │   ├─ CategoryName (16px, 600 粗细)
    │   └─ PeriodLabel (12px, 次要颜色)
    ├─ ProgressBar (基于比例渐变)
    │   └─ ProgressFill (高度: 8px, 圆角: 4px)
    ├─ AmountRow (水平布局, 两端对齐)
    │   ├─ CurrentAmount (DIN, 18px, 危险色)
    │   ├─ LimitAmount (DIN, 14px, 次要)
    │   └─ RemainingAmount (DIN, 14px, 成功色)
    └─ FooterActions (可选, 储蓄按钮)

pancli 实现:

card=I(parent, {
  type: "frame",
  name: "BudgetCard",
  width: "fill_container",
  height: 120,
  fill: "#ffffff",
  cornerRadius: [16, 16, 16, 16],
  shadow: { x: 0, y: 2, blur: 12, color: "rgba(0,0,0,0.08)" },
  stroke: { color: "#ebedf0", thickness: 1 },
  padding: [16, 16, 16, 16],
  layout: "vertical",
  gap: 12,
  placeholder: true
})

header=I(card, {
  type: "frame",
  layout: "horizontal",
  width: "fill_container",
  height: "hug_contents"
})

categoryName=I(header, {
  type: "text",
  content: "日常开销",
  fontSize: 16,
  fontWeight: "600",
  textColor: "#323233"
})

// 带渐变的进度条
progressBar=I(card, {
  type: "frame",
  width: "fill_container",
  height: 8,
  fill: "#f0f0f0",
  cornerRadius: [4, 4, 4, 4]
})

progressFill=I(progressBar, {
  type: "frame",
  width: "75%", // 75% 进度示例
  height: 8,
  fill: "linear-gradient(90deg, #40a9ff 0%, #faad14 100%)",
  cornerRadius: [4, 4, 4, 4]
})

示例 2: 带日期选择器的固定头部

固定头部模式 (来自 BudgetView):
  ├─ 位置: sticky, top: 0
  ├─ 背景: var(--van-background-2)
  ├─ 圆角: 12px
  ├─ 阴影: 0 2px 8px rgba(0,0,0,0.04)
  ├─ 内边距: 12px 16px
  ├─ 内容: "2024年1月" + 下拉箭头图标

示例 3: 滑动删除列表项

van-swipe-cell 模式:
  ├─ 内容: BudgetCard 组件
  ├─ 右侧操作: 删除按钮
  │   ├─ 宽度: 60px
  │   ├─ 背景: var(--van-danger-color)
  │   ├─ 文本: "删除"
  │   └─ 全高 (100%)

避免的反模式

❌ 不要这样做:

// 通用 AI 生成内容
title=I(navbar, {
  type: "text",
  content: "Dashboard", // ❌ 使用 "预算管理" 代替
  fontSize: 20,         // ❌ 按字号比例使用 16px
  fontWeight: "bold"    // ❌ 使用数字值 600
})

// 不一致的间距
card=I(parent, {
  padding: [15, 13, 17, 14] // ❌ 使用 8px 网格: [16, 16, 16, 16]
})

// 硬编码颜色而非语义
amount=I(card, {
  textColor: "#ff0000" // ❌ 使用 var(--van-danger-color) 或 "#ee0a24"
})

// 缺少暗色模式
// ❌ 只创建亮色主题没有暗色变体

// 糟糕的命名
frame=I(document, {
  name: "Frame_123" // ❌ 使用 "Budget - List View - Light"
})

✅ 应该这样做:

// 真实业务术语
title=I(navbar, {
  type: "text",
  content: "预算管理",
  fontSize: 16,
  fontWeight: "600",
  textColor: "#323233"
})

// 一致的 8px 网格间距
card=I(parent, {
  padding: [16, 16, 16, 16],
  gap: 12
})

// 语义颜色变量
amount=I(card, {
  textColor: "#ee0a24", // 一致的危险色
  fontFamily: "DIN Alternate"
})

// 总是创建两种主题
lightScreen=I(document, { name: "Budget - List - Light" })
darkScreen=C(lightScreen, document, { 
  name: "Budget - List - Dark",
  positionDirection: "right"
})

// 清晰的描述性名称
card=I(parent, {
  name: "BudgetCard",
  reusable: true
})

委派与任务管理

使用此技能时:

// 委派设计任务时加载此技能
delegate_task(
  category: "visual-engineering",
  load_skills: ["pancli-design", "frontend-ui-ux"],
  description: "创建预算列表屏幕设计",
  prompt: `
    任务: 为 EmailBill 应用创建移动端预算列表屏幕设计
    
    预期结果:
    - 375x812px 亮色主题设计
    - 暗色主题变体 (复制并适配)
    - 可复用的 BudgetCard 组件
    - 两种主题的截图验证
    
    必需工具:
    - pencil_get_style_guide_tags
    - pencil_get_style_guide
    - pencil_batch_design
    - pencil_batch_get
    - pencil_replace_all_matching_properties
    - pencil_get_screenshot
    
    必须做:
    - 严格遵循 pancli-design 技能指南
    - 使用真实中文业务术语 (预算, 账单, 分类)
    - 创建亮色和暗色两种主题
    - 使用 8px 网格间距系统
    - 遵循 Vant UI 组件模式
    - 使用 模块-屏幕-变体 格式命名帧
    - 使用语义颜色变量
    - 数字显示应用 DIN Alternate
    - 导航栏背景必须设置为透明 (:deep(.van-nav-bar) { background: transparent !important; })
    - 截图验证
    
    不得做:
    - 使用 Lorem Ipsum 或占位文本
    - 只创建亮色主题没有暗色变体
    - 使用任意间距 (必须遵循 8px 网格)
    - 硬编码颜色 (使用语义变量)
    - 使用通用 "Dashboard" 标签
    - 跳过截图验证
    - 创建名为 "Frame_1", "Copy" 等的帧
    
    上下文:
    - 移动视口: 375px 宽度
    - 设计系统: 基于 Vant UI
    - 配色方案: #1989fa 主色, #ee0a24 危险, #07c160 成功
    - 字体: 中文系统默认, 数字 DIN Alternate
    - designs/emailbill.pen 中的现有组件 (用 batch_get 检查)
  `,
  run_in_background: false
)

快速参考 (基于实际 v2.pen 设计)

颜色面板:

名称	亮色	暗色	用途
页面背景	#FFFFFF	#09090B	页面背景
卡片背景	#F6F7F8	#18181B	卡片表面
强调背景	#F5F5F5	#27272A	按钮, 图标容器
主文本	#1A1A1A	#F4F4F5	主要文本
次要文本	#6B7280	#A1A1AA	次要文本
三级文本	#9CA3AF	#71717A	三级文本
主色	#3B82F6	#3B82F6	操作, FAB
红色	#FF6B6B	#FF6B6B	支出, 警告
黄色	#FCD34D	#FCD34D	警告
绿色	#F0FDF4	#064E3B	收入标签
蓝色	#E0E7FF	#312E81	信息标签

排版 (实际字体):

用途	字体	大小	粗细
大数值	Bricolage Grotesque	32px	800
页面标题	DM Sans	24px	500
章节标题	Bricolage Grotesque	18px	700
正文	DM Sans	15px	600
说明	DM Sans	13px	500
微型标签	DM Sans	12px	600

间距与布局 (实际数值):

• 容器内边距: 24px (主区域), 20px (卡片), 16px (小卡片)
• 间距比例: 2px, 4px, 8px, 12px, 14px, 16px
• 图标大小: 20px
• 图标按钮: 44x44px
• FAB 按钮: 56x56px

圆角 (实际数值):

• 小按钮/标签: 12px
• 卡片: 16px, 20px
• 图标按钮: 22px (圆形)
• FAB: 28px (圆形)

触摸目标: 最小 44x44px

视口: 402px (设计宽度), 移动端优先

---

版本: 2.0.0 (使用 v2.pen 实际设计值更新)
最后更新: 2026-02-03
来源: .pans/v2.pen 日历 (亮色/暗色)
维护者: EmailBill 设计团队