品牌、内容、平台与治理

品牌与语气

为标志留出充足的留白；在统一的网格上构图应用图标。语气克制、自信、有人情味——像一位懂行的朋友在帮你。

• 标志（Logo） — 四周留白 ≥ 标志高度的 ½。
• 应用图标（App icon） — 连续圆角的方圆形（squircle）；主体居中，约占网格的 60%。
• 语气（Voice） — 清晰（直说要点，不绕弯）· 自信（肯定，既不怯懦也不傲慢）· 友好（懂行的朋友，而非生硬刻板）。
• 推荐 — “登录”、“删除”、“出错了,稍后再试”。避免 — “立即登陆”、“销毁”、“未知错误 0x5”。

内容

文案是界面的一部分。按钮以动词开头；标题采用句首大写（sentence case）；数字、日期与货币遵循统一格式。

• 大小写 — “Save changes”（句首大写），而非 Title Case（每词首字母大写）。
• 日期 — “2026年6月24日”（本地化、无歧义）。
• 数字 — “¥ 1,280.00”（千位分隔符，等宽数字对齐）。
• 优先用“保存”而非“点击此处以保存你的更改”；用“无法连接,请稍后再试”而非“发生未知错误”。

本地化与 RTL

为文本扩展留出空间（德语可能长约 1.5 倍）；在阿拉伯语和希伯来语中整体镜像布局。绝不将文字烧录进图片。

• LTR ↔ RTL：布局镜像（EN “Settings” / DE “Einstellungen” / JA “設定” / AR “الإعدادات”）。
• 同一标签在不同语言中宽度差异很大——为按钮和容器使用弹性宽度，绝不固定宽度。

平台

同一套设计语言，按情境适配。手机为单列纵向；平板使用分栏视图；桌面为带指针悬停的窗口化界面。控件尺寸随输入方式（触摸 vs 指针）调整。

• 手机 — 单列 · 标签栏 · 触摸 44pt。
• 平板 — 侧边栏 · 分栏视图 · 多任务。
• 桌面 — 窗口 · 指针悬停 · 更紧凑。
• 触摸目标 ≥ 44pt；指针目标可缩小至约 28。为指针提供悬停状态；触摸绝不依赖悬停。

实现

令牌（Tokens）是设计与代码之间唯一的真实来源。一套令牌生成 CSS 变量与原生常量；组件 API 命名清晰、默认安全。

.btn {
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  min-height: var(--size-touch);
}

• Prop API — variant: filled|tinted|gray|plain、size: small|medium|large、disabled: bool（默认 false）。
• 性能 — 首次绘制 < 1s，动画稳定在 60fps，避免大面积实时模糊区域。
• 质量基线 — 每个组件都通过对比度、键盘和屏幕阅读器检查。
• 命名 — 语义化（accent）优于字面（blue），如此重设主题只需一处改动。

治理

该系统是一个持续演进的产品。语义化版本控制、公开的更新日志以及清晰的贡献流程让团队保持一致。

• 状态 — 稳定（Stable）· 测试版（Beta）· 已弃用（Deprecated）。
• 版本控制 — major = 破坏性变更，minor = 新增功能，patch = 修复。已弃用的组件至少存续一个 minor 周期，并记录其替代方案。