在“快缩短网址”（suo.run）的每一段跳转背后，都藏着一场关于视觉秩序的精密交响。我们不只在缩短链接，更在重塑用户对数字界面的直觉认知——而这一切，始于一个被反复打磨的最小单元：风格原子。

---

一、风格：设计的量子基底

风格，是产品语言中最不可再分的语素。它不喧哗，却决定一切。
在suo.run，我们定义风格为六大核心原子：色彩、字体、边角、阴影、图标、线条。
它们不是装饰，而是界面的语法——没有它们，组件将沦为无序的碎片。

---

二、构建风格库：从混沌到共鸣

#### 2.1 色彩：情绪的调色盘

- 品牌色：是心跳的节奏。我们以一抹克制而有力的蓝（#2563EB）作为行动的召唤——按钮、状态标识、高亮信息，皆由此生发。
- 中性色：是呼吸的间隙。我们不使用固定色值，而以透明度层级（rgba）构建动态灰阶，让文字在深浅背景间自然融合，不突兀、不割裂。
- 功能色：是无声的警报。成功（#10B981）、警告（#F59E0B）、错误（#EF4444）、链接（#3B82F6）——遵循人类本能认知，不创新，只尊重。

> 色彩不是选择，是共识。

#### 2.2 字体：阅读的韵律

- 家族：系统优先，Mac用苹方，Windows用微软雅黑，确保跨平台的优雅一致性。
- 主尺寸：14px为黄金基线——足够清晰，不侵占空间；16px用于标题，12px用于辅助文本，形成视觉阶梯。
- 字重：400（Regular）为正文，500（Medium）为标题，600（Semibold）为中西文混排的隐形桥梁。
- 行高：1.5倍字高，是文字与呼吸之间的温柔距离。

#### 2.3 边角：温柔的转折

圆角，是冷峻界面的人性化微光。
我们统一采用 4px 的圆角半径——足够柔和，不显稚嫩；足够锐利，不失专业。
按钮、卡片、输入框、弹窗，皆遵循此律，如一首统一韵脚的诗。

#### 2.4 阴影：空间的呼吸

阴影不是装饰，是三维的隐喻。

| 层级 | 名称 | 用途 | 阴影参数（x, y, blur, spread, color） |
|------|------|------|----------------------------------------|
| S0 | 无影 | 基础元素 | — |
| S1 | 微影 | 悬停反馈 | 0, 2, 4, 0, rgba(0,0,0,0.05) |
| S2 | 中影 | 下拉、提示 | 0, 6, 12, 0, rgba(0,0,0,0.08) |
| S3 | 深影 | 模态层 | 0, 16, 24, 0, rgba(0,0,0,0.12) |



光源恒定于左上45°，阴影如月光倾泻，自然、可预测、可感知。

#### 2.5 图标：视觉的速记符号

尺寸遵循斐波那契的美学节奏：8px、16px、24px、40px、64px。
每一枚图标，皆以1px网格对齐，点线圆角统一于2px圆角弧度，确保缩放时无锯齿、无失真。
图标库源自IconFont，但经我们手工校准视觉重心，使每一枚都如钟表齿轮般严丝合缝。

#### 2.6 线条：沉默的分界者

- 样式：仅保留实线与点线两种，点线为2px点距，绝不滥用虚线变体。
- 粗细：
- 1px：内容分隔
- 2px：区块分界
- 3px：重点强调

线条如呼吸的节奏，轻，但不可缺席。

---

三、风格库的应用：从规范到进化

#### 3.1 组件的诞生：原子的组合

按钮、卡片、导航栏、表单——皆非独立设计，而是风格原子的化学反应。
在Figma中，我们以样式组（Styles）封装色彩、字体、阴影、边角，一键应用，千篇一律，万变不离其宗。

#### 3.2 快速迁移：一库通百域



当项目从suo.run迁至新场景？
无需重绘。
只需调整主色值、字体字号、阴影强度——整套组件库即刻重生，如同交响乐换调，旋律依旧。

---

结语：风格，是团队的共同语言

在“快缩短网址”的设计中，我们拒绝“我觉得这样好看”。
我们只问：“它是否符合风格原子的定义？”

风格库不是文档，是设计的DNA。
它让新人快速融入，让老手无需重复，让每一个像素都讲述同一个故事。

当你在suo.run点击那一串缩短链接时，
你感受到的流畅、克制与优雅——
那不是偶然，
是风格原子在无声地，为你排列秩序。



---

> 设计的终极目标，不是惊艳，而是让人忘记设计的存在。
> ——suo.run，让链接短，让体验长。