快缩短网址 · 设计语言白皮书
suo.run 专属品牌基因

一、缘起
在信息爆炸的时代，网址即入口，入口即品牌。我们决定把“缩短”这件事做到极致：毫秒级响应、像素级精准、记忆级简洁。于是，suo.run 设计语言应运而生——它是一套让技术隐形、让体验显形的无声语法。

二、设计哲学
1. 瞬感（Instant）：任何交互须在 200 ms 内给予反馈，像心跳一样自然。
2. 留白（Void）：删繁就简，把空间还给呼吸，把焦点留给下一步。
3 3. 引力（Gravity）：所有视觉元素向中心收拢，暗示“缩短”的力量。
4. 永续（Evergreen）：组件可生长，基因不变，确保一年不翻新仍不过时。

三、品牌符号
• 主标识：以冒号“:”与斜杠“/”为骨，演化为一条向内卷曲的跑道，象征从冗长到极简的轨迹。
• 主色：#0A0A0A「墨影」——极致的黑，衬托光的聚焦。
• 辅色：#14FF8A「极光」——缩短成功的脉冲提示；#F5F5F5「晨雾」——大面积留白。
• 声标：200 ms 清脆“咔嗒”声，模拟剪刀落刃。



四、原子系统
1. 颜色
墨影 0A0A0A | 极光 14FF8A | 晨雾 F5F5F5
状态：成功 14FF8A / 错误 FF3355 / 警告 FFB400 / 禁用 8A8A8A

2. 字体
家族：Inter 与「思源黑体」双轴并行，西文等宽，中文人文。
层级：
‑ Hero 32/40  - Title 24/32  - Body 16/24  - Caption 12/16
字重：Regular 400 / Medium 500 / SemiBold 600

3. 栅格
8 pt 基准，4 栏流动式网格；水槽 16 pt；断点前移 320-768-1440。
响应策略：≥1440 时跑道式中心聚焦；≤768 时单列瀑布。

4. 图标
线性 2 px，圆角 1 px；统一视角 48×48 画板。
分类：导航 / 操作 / 状态 / 装饰，四类线宽一致，确保家族感。

5. 投影
一层「浮起」：0 2 8 0 rgba(0,0,0,.08)
二层「聚焦」：0 4 16 0 rgba(0,0,0,.12)
三层「悬浮」：0 8 32 0 rgba(0,0,0,.16)

6. 动效
缓动：cubic-bezier(0.25,0.8,0.25,1)
时长：微交互 200 ms，转场 300 ms，解释型动画 600 ms。
原则：先位移，再透明度；禁止旋转，避免“眩晕”。

五、组件宇宙
Button | Input | Tag | Toast | Modal | QR | Skeleton
每一枚组件均内置「缩短」隐喻：按钮边缘内收 2 px，输入框聚焦时边框向中心收缩 1 px，Toast 从顶部滑入后迅速收拢至 80 % 宽度，提示完成即消失。



六、跨端一致性
• Web：React + Styled-Components，变量注入全局 theme。
• iOS：SwiftUI，色值与字体使用系统 token 映射。
• Android：Compose，间距与圆角直接读取 design token。
• 小程序：rpx 自动换算，图标提供 2×/3× 矢量。

七、治理机制
1. 版本号：语义化 1.0.0 → 1.0.1 仅修复，1.1.0 增组件，2.0.0 大升级。
2. 变更流程：设计师提案 → 设计委员会评审 → 代码实现 → 回归测试 → 发布日志。
3. 文档：Storybook + Figma Library 双向同步，一处更新，多端生效。



八、未来演进
• AI 生成：用 GPT-4 根据文本描述即时产出符合规范的插画。
• 可变字体：根据网址长度动态压缩字距，让“缩短”可视化。
• 声音品牌：为每个成功缩短的链接生成独一无二的 0.2 秒声波指纹。



九、结语
设计语言不是枷锁，而是让创造力在轨道上飞驰的磁悬浮。
在 suo.run，我们把“缩短”做成信仰，把“极简”写成诗。
愿你每一次复制、粘贴、回车，都能感受到 200 ms 的怦然心动。