健身应用设计系统
本指南概述了健身应用的设计标准，确保所有屏幕和组件的一致性。
颜色
主要颜色
#3B82F6
蓝色 500
主要操作
次要颜色
#10B981
绿色 500
成功
#EF4444
红色 500
错误
#F59E0B
黄色 500
警告
#8B5CF6
紫色 500
强调
中性颜色
#111827
灰色 900
文本
#6B7280
灰色 500
次要文本
#E5E7EB
灰色 200
边框
#F9FAFB
灰色 50
背景
排版
标题 1
text-3xl font-bold (30px)
标题 2
text-2xl font-bold (24px)
标题 3
text-xl font-semibold (20px)
标题 4
text-lg font-semibold (18px)
正文粗体
font-medium (16px)
正文常规
默认文本 (16px)
小文本
text-sm (14px)
超小文本
text-xs (12px)
组件
按钮
卡片
基础卡片
卡片用于分组相关内容。
带图片的卡片
卡片可以包含图片、文本和操作。
交互式卡片
卡片可以包含交互元素。
表单元素
开关选项
复选框选项
选项 1
选项 2
导航
返回
标题
首页
训练
进度
个人
图标
我们使用 Font Awesome 6 作为图标系统。
间距
4px (1)
最小间距
8px (2)
紧凑间距
12px (3)
组件间距
16px (4)
标准间距
24px (6)
区域间距
32px (8)
大间距