Design System Documentation
智生活 — 设计系统
支撑智生活App与SaaS后台的核心视觉与组件规范。涵盖色彩体系、字级阶层、组件状态与图标分类，作为团队内部"单一信任来源"，确保跨端体验的一致性。
角色
设计系统建立与治理负责人
应用范围
智生活 App（iOS / Android）· 智生活 SaaS 管理后台
关键成果
统一跨端组件规范，作为设计与研发对接的单一信任来源
核心技能
色彩体系 · 组件状态管理 · 跨端一致性治理
智生活在快速迭代过程中，App 与后台管理系统的视觉语言逐渐出现分歧——同样的"确认/取消"操作，在不同模块可能对应不同的按钮样式与色彩。为了解决这个问题，主导建立了这套跨端共用的设计系统，从色彩、字级到组件状态，建立统一且可扩展的规范基础，让后续新功能开发时，设计与研发都能直接复用既有组件，不需要每次重新定义样式。
色彩系统
以品牌主色 #46B39A 为核心，建立6阶透明度梯度，搭配语义化的功能色与文字/背景色阶。
Primary 主色阶
100%
#46B39A
80%
#6BC3AE
60%
#90D2C2
40%
#B5E1D7
20%
#DAF0EB
10%
#ECF7F4
Basic 功能色
标签强调
#09C6D9
价格
#AC0A31
提示
#FF773D
错误
#F80000
错误 / 强调按钮
#F05151
Text 文字色
内容标题
#484848
备注 / 日期
#999999
分隔线 / 失效
#D2D2D2
白色文字
#FFFFFF
Background 背景色
导航背景
#F9F9F9
费用信息背景
#FCF3CC
小标背景
#F2F2F2
列表背景
#EFEFF4
文字排版
以 iOS @1x 为基准字级，Android 对应 +1px 适配。字重统一采用 Semibold（标题）与 Regular（内文）两级。
28px / 29px
Semibold · 金额、费用、点数
#484848
24px / 25px
Semibold · 功能内容大标
#484848
20px / 21px
#484848
Headline 4 标题
16px / 17px
Semibold · 标题
#484848
Body 15 内文
15px / 16px
Regular · 标题
#484848
Caption 14 备注日期
14px / 15px
Regular · 备注、日期时间
#999999
Caption 13 标签
13px / 14px
Regular · 标签
#999999
色彩变体（以 Headline2 为例）
Headline
Default
Headline
Secondary
Headline
Disable
Headline
Accent
Headline
Alert
间距系统
以8px为基础网格，按组件层级分为三级间距 Token，响应式场景下同步以百分比适配不同屏宽。
Spacing / XS
12px
/
3%
Spacing / SM
16px
/
4%
Spacing / MD
24px
/
6%
按钮组件
分为 Filled 与 Outlined 两种类型，各自具备三种尺寸与三种状态（Normal / Pressed / Disabled）。
Basic 功能色
Large · w80%
Normal
Pressed
Disabled
Medium · w50%
Normal
Pressed
Disabled
Small · w32%
Normal
Pressed
Disabled
Outlined Buttons
Large
Normal
Pressed
Disabled
Medium
Normal
Pressed
Disabled
Small
Normal
Pressed
Disabled
浮动操作按钮 FAB
用于列表页快速新增（如「行动卡夹」新增入口），固定悬浮于右下角
反馈组件
系统级提示信息，依语义分为三种类型：错误 / 一般动作 / 状态通知，另含分段式 Tab 切换组件。
Toast 提示条
提示文案 · 错误 v1
提示文案 · 错误 v2
文案 · 一般动作提示
提示文案 · 无网络状态
Tab 切换组件
Tab
Tab
Tab
Tab
0
Tab
Tab
输入与控件
表单输入统一采用12px圆角，错误态以强调红色边框搭配提示文案呈现。
Subtitle
Placeholder
Subtitle
Placeholder
错误提示文案
必填单选项目
必填单选项目
复选项目
复选项目
图标系统
按使用场景分类：提示状态、主功能导航、社区服务、公设类型等，统一线性风格，1.7px描边。
下方为示意呈现风格，实际交付以原始图标库文件为准
主功能导航
社区服务
公设类型
社区公告类型
应用于以下项目
这套系统并非独立存在，以下两个案例是它的实际落地场景。