Glideapps 网站预览
Glideapps 网站预览

Glideapps

白色基底、紧密字距与细线分隔。

页面以白色为基底,搭配近黑色文字。视觉特点包括紧密字距、细线分隔、居中构图、满幅色块。适合参考的场景:SaaS 产品官网、功能介绍页。

查看原始网站

使用规范

建议采用

  • 所有主要操作的填充必须使用 #71eaee,禁止用于装饰背景、图标或非操作元素
  • 在 48px 及以上字号时,标题字间距设为 -0.02em;在 20–36px 时设为 -0.01em;正文文字保持默认字间距
  • 所有卡片、按钮、输入框和图片均使用 6px 圆角——这一圆角值是系统的标志性特征
  • 分层表面的顺序为:#ffffff(页面)→ #edede8(卡片)→ #d9dad3(区块带)→ #e4feff(强调晕染)→ #000000(深色断层)
  • 结构分隔线使用 1px 实线 #000000;非结构分隔线保留使用 #d9dad3
  • 首屏和展示标题仅使用 affairsFont 字重 400——轻盈的字重才是重点
  • 正文和 UI 文字保持 bootonFont 字重 400–575;仅在最大标题中使用字重 700

建议避免

  • 卡片、按钮或任何抬升表面均不得使用阴影——该系统使用内嵌高亮和边框粗细,而非阴影
  • 不得引入额外的强调色——整个系统仅包含黑色、白色和一种青色
  • 标准组件的圆角不得大于 6px——12px 或更大的圆角会破坏整体建筑感
  • 不得在正文、导航、按钮或小于 36px 的元素中使用 affairsFont——它仅作为展示字体存在
  • 不得在 80px 字号标题中使用 bootonFont 字重 700——该系统在该尺寸下使用 affairsFont 字重 400 以实现对比效果
  • 不得将青色 (#71eaee) 用于文字——仅可用于填充或背景
  • 不得添加渐变、模糊或玻璃态效果——该系统刻意保持扁平和边框驱动