色彩体系
主色 · 辅助色 · 选中色 · 语义色 · 链接色
品牌色
主色 Primary
#007AFF · --space-color-primary
辅助色 Secondary
#5856D6 · --space-color-secondary
强调色 Accent
#FF2D55 · --space-color-accent
交互状态
主色按钮
辅助色
选中 Selected
点赞 / 强调
禁用 Disabled
语义色
Success
--space-color-success
Warning
--space-color-warning
Danger
--space-color-danger
Info
--space-color-info
文字与链接
主文字
--space-label-primary
次要文字
--space-label-secondary
链接色
--space-color-link
中性灰阶 & 背景
Gray 1
--space-gray-1
Gray 3
--space-gray-3
Gray 5
--space-gray-5
分组背景
--space-bg-secondary
字体排版
Typography scale — SF Pro / PingFang SC
Display 34
Title 1 大标题
Title 2 区块标题
Title 3 卡片标题
Headline 强调正文
Body 正文内容，用于列表、表单与详情描述。
Callout 辅助说明文字
Footnote 脚注与次要信息
Caption 1 最小标注
图标库
SF Symbol 风格 · 社交 / 控制 / 装饰 / 工具
社交互动
播放控制
装饰 & 工具
尺寸
16 / 20 / 24 / 28 / 32 px
图标按钮 & 社交操作栏
按钮
Buttons — variants, sizes, states
类型
尺寸
状态
链接
文字链接 · 行内链接 · 链接卡片
输入与搜索
Inputs — text, select, toggle, search
开关 / 复选 / 单选
步进器
2
标签 Tab
Tag · Badge · 筛选 Chip（含选中态）
状态标签 Tag
默认
进行中
已报名
即将满员
已取消
筛选 Chip（点击切换选中）
3
消息
9
头像
Avatar — sizes & group
A
拉
L
头像组
A
B
C
+5
地图
Map — 场地定位、导航卡片、活动地图占位
XX 运动中心
朝阳区 xx 路 88 号 · 距你 1.2 km
紧凑地图（详情页内嵌）
相册网格
Album grid — upload & multi-image
上传
+8
横幅
Banner — hero, carousel, ad sizes
广告位 320×50
广告位 300×250
视频
Video placeholder with play overlay
03:24
广告列表
Ad list — sponsored cells & native card
Ad
Lala 运动装备
赞助 · 刚刚
专业足球鞋限时 7 折，拉完见同款穿搭。
弹窗
Modal — center, bottom sheet, alert
标签页
Tabs — top, bottom, segmented
分段控件
反馈
Toast & loading spinner
日历控件
万年历 — 公历 + 农历 · 7×6 月网格 · 左右滑动切月 · 用于发起活动 / 报名选日期
周条快选 · 横向滑动
时段选择 · 场地预约
列表式日期字段
活动时间
8月26日 周六 14:00
›
滑动交互
Gestures — 卡片滑动、横向列表、下拉刷新
卡片滑动 · 左滑拒绝 / 右滑接受
羽毛球双打
周日 10:00 · 望京
周末足球局
周六 14:00 · 5 人制 · 还差 2 人
左右拖动卡片，或点击切换下一张
横向滑动列表 · scroll-snap
⚽ 足球
12 场进行中
🏸 羽毛球
8 场进行中
🏀 篮球
5 场进行中
🎾 网球
3 场进行中
🏃 跑步
6 场进行中
下拉刷新 · Pull to Refresh
下拉刷新
望京足球局 · 14:00
朝阳羽毛球 · 10:00
奥森跑步团 · 07:00
三里屯篮球 · 19:00
动效与过场
Motion — 时长 / 缓动 Token、入场动画、页面 Push、骨架屏、列表交错
动效 Token
| Token | 值 | 场景 |
|---|---|---|
--space-duration-fast | 150ms | 按钮按压、Chip 切换 |
--space-duration-normal | 250ms | 淡入、Toast |
--space-duration-sheet | 320ms | Bottom Sheet 滑入 |
--space-duration-page | 380ms | 页面 Push / Pop |
--space-ease-ios | cubic-bezier(0.32, 0.72, 0, 1) | iOS 标准曲线 |
--space-ease-spring | cubic-bezier(0.34, 1.56, 0.64, 1) | 弹性缩放 |
点击预览 · 入场动画
页面 Push 过场 · iOS 导航
活动列表
点击「进入详情」预览 Push 动画
‹ 活动详情
周末足球局
周六 14:00 · 望京球场
周六 14:00 · 望京球场
骨架屏 · Skeleton
列表交错入场 · Stagger
张
张三 加入了活动
李
李四 完成了支付
王
王五 上传了照片
赵
赵六 发表了评论
页面布局
Layout — shell, nav, cards, lists, empty
五人制足球
周六 14:00
羽毛球局
周日 10:00
队
队员管理
›
场地信息
望京球场
›
费用分摊
¥50/人
›
📭
暂无活动
附近还没有人发起活动，来做第一个吧