Sprig 网站预览
Sprig 网站预览

Sprig

近白色基底、渐变展示与细线分隔。

页面以近白色为基底,搭配深青色文字。字体采用 TT Commons Pro、ABC Diatype。视觉特点包括渐变展示、细线分隔、宽松留白、居中构图。适合参考的场景:SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • #272420(Espresso)是唯一填充按钮背景,不为按钮引入蓝、红或绿。
  • 所有填充和幽灵按钮采用 32px border-radius(完全胶囊形),内边距为横向 12px × 纵向 6px。
  • 24px 及以上标题全部使用 ABC Diatype 500 字重,不升至 600 或 700。
  • 大型功能卡片采用 100px border-radius,特殊首屏卡片为 1600px;曲率是标志性特征。
  • Dusk→Ember→Twilight 线性渐变仅作为产品界面背板或活动卡片背景,不用于文字、边框或控件。
  • 页面画布保持 #faf9f8(Bone),用 1px Mist(#e8e7e6)分隔线替代交替背景条带。
  • 正文、标题与 CTA 等全部文字左对齐,不让正文或分区开篇居中。

建议避免

  • 任何组件不添加投影,改用表面色调变化与曲率。
  • 不引入辅助品牌色;体系为单色加暖渐变,蓝、绿或红会破坏编辑语气。
  • 正文或功能说明不居中,左对齐是结构要求,而非风格选择。
  • 任何可见元素的 border-radius 不低于 4px;体系坚持柔和,而非尖锐。
  • 暖渐变不用于文字、图标或界面控件,它留给图像背板和大型装饰卡片。
  • 任何位置不使用粗体(700 字重);ABC Diatype 500 为上限,TT Commons Pro 只用 400。
  • 不以深浅分区背景交替建立节奏,改用细线分隔与充裕间距。