cord.com 网站预览
cord.com 网站预览

cord.com

白色基底、圆角卡片与网格布局。

页面以白色为基底,搭配深蓝色文字。字体采用 Figtree。视觉特点包括圆角卡片、网格布局、大幅图像展示、摄影展示。适合参考的场景:SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • 所有主要文字和标题使用#0b3658,绝不用纯黑,藏青色调就是语气。
  • #4e9ad9严格限定为三种用途:标志、主要填充按钮,以及激活或选中状态。
  • 展示标题设为800字重,厚重字重是标志性特征,更轻字重会像正文。
  • 卡片、按钮和输入框采用20-24px圆角,宽裕圆润感让藏青色板显得亲切。
  • 所有阴影染为rgba(11,54,88, ...)并采用4-8%不透明度,灰色阴影会与品牌冲突。
  • 所有24px以上字号采用负字间距,字号越大越紧。
  • 所有极细线和边框使用#dde7ee,它是主导中性描边,使系统统一。

建议避免

  • 不要引入第二种强调色;#42b3b1(青绿)是状态指示,而非应在其他地方重复的品牌色。
  • 文字不要使用纯黑#000000,始终采用#0b3658,藏青色而非纯黑才是语气。
  • 卡片或按钮不要采用锐利角落(< 8px),圆润感是品牌支柱。
  • 不要添加不带蓝色调的投影,通用灰色阴影会破坏系统。
  • 展示标题不要使用400或500字重,700-800是盖印式标题的标志。
  • 正文或大标题不要使用#4e9ad9,它是信号色,仅用于小型交互场景。
  • 深色CTA横幅仅能作为接近页末的铺满画面区块出现,不要放在其他地方;它是一次对比场景,而非重复图案。