C 端移动概述
RUNDA ToC 移动端设计组件系统（v1.6.0），基于 iOS 应用截图逆向分析。与 B 端 PC 端共享同一套中性色阶、背景纹理与品牌主色 #2A7F8B，形成「一个品牌、两种端形态」的统一界面语言。
01 · OVERVIEW · 平台与基础参数
| 项目 | 取值 |
|---|---|
| 适用平台 | iOS（iPhone） |
| 设计分辨率 | 390 × 852 pt（3x → 1170 × 2556 px） |
| 基础网格 | 4 pt 网格，4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 |
| 屏幕水平内边距 | 16 pt |
| 状态栏 / 导航栏 / Tab 栏 | 59 / 44 / 49 pt |
| 最小触摸目标 | 44 × 44 pt |
| 主色 | #2A7F8B（与 B 端 cdx.500 同值） |
Design Principles · 六条设计原则
浅色为主暖灰基底 #FAFAFA，卡片纯白，通过阴影区分层级而非色差。
蓝色聚焦单一强调色引导注意力，仅用于 CTA、链接、进度与关键状态。
卡片承载信息以卡片为单元组织，间距 12pt，内边距 16pt。
呼吸感大量留白，段落间距 ≥ 24pt，列表项间距 ≥ 8pt。
渐进展示复杂信息分层呈现：折叠、步骤指示器、骨架屏。
触觉反馈按压缩放 0.96、高亮背景、Haptic 触感。
Page Structure · 典型页面结构
今日步数
8,420步
▲ 12.4%较昨日
目标 12,00068%
健康提醒
需关注
血压偏高
收缩压 142 mmHg · 参考 <140
正常
睡眠 7.2 小时
深睡占比 23%
查看完整报告
标准页面：导航栏 44pt + 卡片流 + Tab 栏 49pt
跨端一致性
以下视觉元素与 B 端（PC）完全一致，是两套系统共享的「品牌底座」。C 端不重新定义这些值。
| 共享元素 | B 端令牌 | C 端令牌 |
|---|---|---|
| 中性色阶（11 级） | color.ink.50~950 | color.primitive.neutral |
| 品牌主色 500 | color.cdx.500 #2A7F8B | color.primitive.primary.500 |
| 背景点状纹理 | effect.grain | effect.grain |
规范文件
C 端完整的令牌、组件契约与验收流程见仓库 docs/c/ 目录。
| 文件 | 内容 |
|---|---|
| docs/c/DESIGN.md | 设计原则、色彩、排版、间距、圆角、阴影、动效、无障碍 |
| docs/c/COMPONENTS.md | 全部组件契约：视觉、状态、尺寸、交互行为 |
| docs/c/DEVELOPMENT-RULES.md | 强制开发规范与视觉验收清单 |
| tokens/c-design-tokens.json | 机器可读设计令牌 |
使用方式
页面需同时引入站点外壳样式与 C 端组件样式。C 端组件统一使用 c- 前缀，与 B 端类名不冲突，可在同一仓库内并存。
<link rel="stylesheet" href="design-system/preview/assets/coss.css" />
<link rel="stylesheet" href="design-system/preview/assets/design-system.css" />
<link rel="stylesheet" href="design-system/preview/assets/c-mobile.css" />
<script src="https://cdn.tailwindcss.com"></script>
<script src="design-system/preview/assets/tw-config.js"></script>