Contrast 网站预览
Contrast 网站预览

Contrast

白色基底、居中构图与网格布局。

页面以白色为基底,搭配近黑色文字。字体采用 Gilroy。视觉特点包括居中构图、网格布局、宽松留白、产品图像展示。适合参考的场景:SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • #ff5065是主要操作、激活状态和图标强调唯一的彩色填充。
  • 所有按钮、徽章和小图像都采用100px border-radius,形成标志性胶囊形。
  • 展示标题设为Gilroy 700、56px和0.80行高,形成紧密叠排文字块。
  • 主要文字采用#0e0f10而非#000000,在深色调中保持暖意。
  • 所有抬升卡片都采用唯一阴影设计变量0 5px 25px rgba(38,42,62,0.06)。
  • 分区采用80px纵向间距,卡片默认24px内边距,形成内部节奏。
  • 左下角保持悬浮网络研讨会组件模式,作为持续收集潜在客户的锚点。

建议避免

  • 不要引入珊瑚、余烬、柿红和粉色色洗之外的额外彩色。
  • 不要使用厚重或深色阴影;整个抬升系统仅依赖0.06不透明度。
  • 正文不要弱化至500字重以下;这里不使用Gilroy的轻字重。
  • 除小导航细节外,任何用户可见表面都不要采用0–4px锐利圆角。
  • 正文分区不要添加背景色;白色静默本身就是设计。
  • 不要调整letter-spacing;所有字号的字间距均保持normal。
  • 首屏图像不要采用摄影;产品UI截图和插画承担视觉分量。