Contractbook 网站预览
Contractbook 网站预览

Contractbook

近白色基底、胶囊形控件与网格布局。

页面以近白色为基底,搭配近黑色文字。字体采用 Abcwhyte。视觉特点包括胶囊形控件、网格布局、大字排版、宽松留白。适合参考的场景:SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • 所有按钮、导航项和标签均使用 999px 或 9999px 的圆角半径——胶囊形状不可妥协
  • 在页面任一位置使用 #ffba09 填充与 #1a1a1a 文字,作为唯一最高优先级的操作动作
  • 页面默认背景使用 #f0f0ec,提升卡片表面则使用 #ffffff 或 #f7f7f3
  • 全尺寸和字重下,仅使用 Abcwhyte(或替代字体 Inter/DM Sans)作为唯一字体家族
  • 标准卡片使用 24px 圆角,首屏面板和图片使用 40px 圆角——禁止使用中间值
  • 通过色彩与间距区分内容层级,而非阴影——该系统刻意保持扁平化
  • 宝蓝(#1009f6)使用需极为克制:仅用于特征面板、品牌标题、底部CTA——绝不可作为通用辅助色

建议避免

  • 任何卡片、按钮或面板均不得添加盒阴影——层级感来自色彩与空间,而非阴影
  • 禁止在标题中使用衬线或装饰性字体——单一字体家族是其标志性特征
  • 禁止将宝蓝(#1009f6)用于正文或边框——仅限于卡片背景与品牌强调场景
  • 禁止在内容卡片上使用锐角(0–8px 圆角)——最小卡片圆角为 24px
  • 禁止引入第二个主要操作色——金色(#ffba09)是唯一带有填充的彩色按钮
  • 禁止使用纯黑(#000000)作为正文——正文应使用 #1a1a1a 以获得更温暖的阅读体验
  • 禁止内容区块拥挤——主要区块之间需保持 120px 的垂直间距