school_uni/static/my/半径里Design System v1.0.txt

半径里 Design System v1.0

以后所有页面全部遵循。

一、设计关键词（整个项目的灵魂）

这是最重要的。

关键词：

青春
轻松
省钱
校园
成长
呼吸感
未来感
游戏化
高级感
治愈

绝不能：

❌ 商务后台风
❌ 微信工具风
❌ 支付宝风
❌ Android Material风
❌ 表格风
❌ 信息流风
❌ 卡片堆叠风

一句话：

像任天堂，而不是像企业OA。

二、视觉DNA

整个项目只能出现这一套语言。

页面背景

永远不是纯白。

统一：

#F8FCFA

再加：

超浅绿色

超浅蓝色

超浅橙色

渐变光斑

例如：

左上：

绿色

右下：

橙色

透明度10%

非常淡。

不能明显。

就是苹果官网那种。

三、圆角规范

统一。

一级卡片

32rpx

二级卡片

24rpx

按钮

999rpx

Tag

999rpx

头像

24rpx

不要今天16

明天30

后天50

统一。

四、阴影

整个项目：

只允许一种阴影。

0 12rpx 40rpx rgba(30,80,60,.06)

不能：

box-shadow:

0 10 20

0 4 8

0 30 60

到处乱写
五、留白规范（最重要）

你现在最大的毛病：

所有东西挤一起。

统一：

页面左右：

32rpx

模块之间：

28rpx

卡片内部：

24rpx

文字：

16rpx

永远不要：

4

6

8

10


那种密密麻麻。

六、字体层级

整个项目只能四种字号。

一级标题

48rpx

例如：

今天22:00瓜分现金

——————————

二级标题

36rpx

例如：

学院荣耀榜

——————————

正文

28rpx

——————————

说明

22rpx

不能出现：

21

23

25

27

31

33


乱。

七、颜色体系

主色：

#34C8A0

辅助：

#FFA63D

危险：

#FF6464

成功：

#22C55E

文字：

#202124

二级：

#70757A

三级：

#A8B0B8

整个项目不要超过：

6种颜色。

八、按钮规范

整个项目只允许：

三种按钮。

一级按钮

橙色

胶囊

立即拼团

立即下注

立即助推

高度：

88rpx
二级按钮

绿色

描边

查看

领取

进入
三级按钮

纯文字

更多>>

查看全部

禁止：

灰按钮

蓝按钮

紫按钮

九、卡片规范

整个项目：

卡片只有三类。

数据卡

例如：

余额

中奖率

订单

收入

特点：

数字巨大。

下面说明。

功能卡

例如：

兼职主页

商家后台

钱包

左：

ICON

右：

箭头

中间：

说明

游戏卡

例如：

学院荣耀榜

白嫖星球

PK

幸运盲盒

特点：

一定有：

奖励

倒计时

进度

按钮

动态。

十、ICON规范

绝不能：

emoji。

统一：

线性图标。

风格：

苹果SF Symbols。

全部：

2px。

统一粗细。

十一、首页规范

首页只能：

三级结构。

① Hero

↓

② 今日重点

↓

③ 更多玩法

不能：

30个入口。

十二、个人中心规范

一定不是菜单。

而是：

身份中心。

例如：

我是普通用户

↓

我是配送员

↓

我是商家

↓

校园生活

每一个：

像一个身份空间。

不是：

菜单。

十三、所有页面都必须有"重点"

每一个页面：

第一屏：

只能有一个重点。

例如：

钱包：

余额。

白嫖：

今晚奖金。

学院：

排名。

配送：

今日收入。

不要：

第一屏：

十几个数字。

十四、动画规范（重点）

整个项目：

不能死。

必须：

所有页面都有：

hover

缩放

渐变

数字滚动

呼吸

倒计时

领奖动画

金币飞入

星球券飞入

但是：

都很轻。

不要：

炫酷。

十五、游戏化规范

所有页面：

尽量回答：

今天还能干什么？

还能赚什么？

还能省多少钱？

还能拿什么奖励？

而不是：

功能入口。
十六、最重要的一句话（Cursor必须遵守）

以后所有Prompt第一句：

严格遵循《半径里 Design System v1.0》。

这是一个面向18-25岁中国大学生的校园平台。

视觉目标不是工具软件，而是：
Nintendo + Apple + 小红书 + 微信小程序的结合体。

整体体验必须满足：

① 呼吸感（大量留白）
② 游戏化（成长感）
③ 高级感（不过度装饰）
④ 校园青春感（轻松、有生命力）
⑤ 信息一眼就懂（3秒理解页面）
⑥ 一个页面只有一个视觉中心
⑦ 每个模块都有明确层级，不允许菜单式堆砌
⑧ 所有卡片都要有温度，避免后台管理系统风格
⑨ 优先优化布局和视觉节奏，而不是增加装饰元素
⑩ 不允许自由发挥新的设计语言，所有页面必须保持统一设计体系。