Swwim 网站预览
Swwim 网站预览

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 色破坏蓝色单色;蓝底白色胶囊形就是操作模式。