WGSN 网站预览
WGSN 网站预览

WGSN

白色基底、胶囊形控件与圆角卡片。

页面以白色为基底。字体采用 DM Sans。视觉特点包括胶囊形控件、圆角卡片、细线分隔、摄影展示。适合参考的场景:SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • 所有按钮、标签和导航链接均使用40px半径的胶囊圆角——胶囊几何是该系统的最强特征形状。
  • 所有图像、图像卡片和图像容器均使用16px半径——此设定需在整个站点保持一致。
  • 仅输入框使用8px半径——与胶囊按钮形成有意识的对比,以体现交互性而不失柔和感。
  • 在两个白色带之间使用#f6f2eb(骨暖)作为区块背景——这是该无色彩系统创造节奏的唯一方式。
  • 展示标题在DM Sans 700字重下设定为48–92px,字间距为-0.0110em(在48px时约-0.53px,92px时约-1.01px)——紧密的字间距使文字呈现出编辑性而非企业风格。
  • 使用大写标签和按钮文字,字间距设为0.0560em以提供呼吸感——任何大写都必须配合扩展字间距,否则会显得拥挤。
  • 所有分隔线和交互提示均使用1px细线边框(#666666)替代阴影——系统刻意避免使用立体感,转而强调线条。

建议避免

  • 绝不引入彩色——该系统按设计为0%彩色,任何辅助色都会破坏编辑性单色逻辑。
  • 绝不使用阴影进行立体感营造——系统中唯一的阴影模式是链接上的1px内嵌边框;禁止为卡片或按钮添加投影阴影。
  • 绝不使用#000000作为大面积填充表面——深色背景使用#212121(黑曜石),纯黑仅用于文字和细线辅助笔画。
  • 绝不使用图像或卡片的尖角0px圆角——所有包含图像的元素均使用16px半径;无圆角的图像会显得突兀。
  • 绝不为正文使用展示字重的字间距——-0.0110em的字间距仅适用于40px以上的字号;应用于16px正文将导致字母过度压缩,影响可读性。
  • 正文绝不采用大写;大写仅用于眉题、徽标和按钮标签,0.0560em字间距在这些文字中提供所需的字母间隔。
  • 绝不将暖色骨暖(#f6f2eb)用于表单字段或交互表面——它仅作为区块背景色;表单区域应使用冷色灰雾(#f5f5f5)以提示输入状态。