Swwim

白色基底、胶囊形控件与渐变展示。
页面以白色为基底,搭配近黑色文字。字体采用 Baton Turbo、Greycliff。视觉特点包括胶囊形控件、渐变展示、大字排版、细线分隔。适合参考的场景:设计工作室首页、案例展示页。
查看原始网站使用规范
建议采用
- Baton Turbo 仅用于展示和超大标题,29px 及以上,不用于低于 20px 的文字。
- 钴蓝背景上的首屏标题为 151px、1.0 行高、全大写,至少一张产品图像与字形重叠。
- 每个按钮、标签和胶囊形控件都采用 9999px 圆角;体系没有圆角卡片或输入框。
- 表面保持扁平;内容以 1px #e5e7eb 细线边框分隔,不使用投影。
- 铺满边缘的分区由 #1658b3 主导;白色留给内容页,#0d3c88 留给页脚和渐变深度。
- 交互标签和小标题使用 Greycliff 500,正文用 400,强调时少量使用 700。
- 页眉的组合字标与描述文字之间加 1px 白色竖向分隔线。
建议避免
- 正文、导航标签、按钮及低于 20px 的任何文字不使用 Baton Turbo;小尺寸会失去编辑语气。
- 不要引入投影、发光或多层抬升;体系有意保持扁平。
- 蓝色家族加唯一 #eee1d9 肤色强调之外,不引入其他彩色。
- 首屏构图不要干净、对称地居中;散布且重叠的产品裁切图是标志性特征。
- 卡片或输入框边角不变圆;体系唯一圆角是 9999px 胶囊形。
- 151px 文字不用于首屏之外;展示尺度骤降至 48px。
- 不要用对比 CTA 色破坏蓝色单色;蓝底白色胶囊形就是操作模式。