《快缩短网址 · 原子设计手册》



——在 suō.run 上，用最少的设计原子，造最长的价值链路

一、风格即原子
风格是界面最不可再分的粒子，它像 DNA 一样，决定了所有组件的样貌与性格。
在 suō.run 的语境里，它由六枚质子构成：色、字、角、影、图、线。



二、六维风格库
1. 色
• 品牌色：#0A84FF——缩短链接的「闪电」意象。
• 中性色：以 10%–90% 透明度的 #000 与 #FFF 衍生，确保深浅背景通用。
• 功能色：成功 #34C759 / 失败 #FF3B30 / 警告 #FF9500 / 链接 #007AFF。



2. 字
• 家族：SF Pro（iOS）、Roboto（Android）、PingFang SC（macOS）、微软雅黑（Windows）。
• 主字号：14 px 为正文基准，阶差 2 px 递增，行高 1.5 倍。
• 字重：Regular 400、Medium 500、Semibold 600，三者足以构建全部信息层级。

3. 角
• 圆角阶梯：2 / 4 / 8 / 16 / 32 px。
• 规则：容器越大，圆角越大；交互态比静态多 2 px，暗示弹性。

4. 影
• 四层海拔：
S0 无影（输入框）
S1 2 dp（卡片悬停）
S2 8 dp（下拉浮层）
S3 16 dp（全局弹窗）
• 阴影值：三层叠加，模糊 4/8/16，透明度 12%/8%/4%，模拟真实光感。

5. 图
• 尺寸：8 / 16 / 24 / 40 / 64 px，以 8 为模数，适配高密度屏。
• 风格：线性 2 px 描边，圆角 1 px，视觉区域统一 20% 留白。

6. 线
• 样式：实线为主，虚线仅用于草稿或失效态。
• 粗细：1 px 分割 / 2 px 强调 / 3 px 聚焦。

三、从原子到星系
1. 组件铸造
以「缩短按钮」为例：
• 色：品牌色 #0A84FF
• 字：14 px / Medium / 白色
• 角：8 px
• 影：S1 2 dp
• 图：24 px 闪电图标
• 线：无
六维参数一键写入 Axure / Figma 样式库，即得 100% 一致的按钮。

2. 星系跃迁
当 suō.run 衍生子品牌「suo.link」时，仅需替换品牌色与圆角值，十分钟即可生成全新组件宇宙。

四、使用守则
• 设计师：任何新元素必须溯源至六维原子，否则不予合并。
• 工程师：所有变量写入 ThemeProvider，禁止硬编码。
• 运营：市场物料直接调用 CDN 上的样式 JSON，保证线上线下零偏差。

五、尾声
在 suō.run，我们坚信：
最短的路径不是删减功能，而是让每一颗粒子都恰到好处。
当风格被提炼成原子，一致性便不再是约束，而是自由。