Overflow 网站预览
Overflow 网站预览

Overflow

白色基底、渐变展示与紧密字距。

页面以白色为基底,搭配深蓝色文字。字体采用 Inter。视觉特点包括渐变展示、紧密字距、居中构图、网格布局。适合参考的场景:设计产品官网、作品展示页。

查看原始网站

使用规范

建议采用

  • 所有卡片使用24px圆角,所有按钮使用12px圆角——双圆角系统是其标志性特征
  • 对40px及以上任何文本应用Inter的-0.025em字间距;绝不允许标题使用正向间距以产生呼吸感
  • 在任意页面中,将深色实心按钮(#000背景,#fafafc文字,12px圆角)作为唯一的转化路径
  • 将每张产品截图包裹在macOS窗口边框内,搭配三个交通灯状点和24px外层圆角
  • 将信号蓝渐变(linear-gradient(90deg, #007bff, #62aeff))最多用于每 3 张卡片网格行中的一个卡片,以营造节奏感
  • 保持区块垂直间距在80–120px之间;页面应像思想之间留有空气般透气
  • 任何需要承载分量的标题均使用午夜藏蓝(#161637)

建议避免

  • 不引入新的色彩强调——天蓝强调色(#0085e4)是系统中唯一的蓝色
  • 不为功能按钮使用9999px的胶囊圆角;胶囊形控件仅用于标签和状态指示器
  • 不应用比rgba(0,0,0,0.08)更暗的阴影,或超过20px的模糊半径——这种抬升感本意是微弱可感的
  • 不将区块标题居中对齐;Overflow始终保持左对齐
  • 不使用Inter 300或200字重——系统中最细的字重为400
  • 不使用纯#ffffff作为卡片表面色;#fafafc的微妙暖感避免了临床的扁平感
  • 单个元素上叠加的阴影不超过两个;设计依赖于单一低不透明度的抬升