ThoughtLab 网站预览
ThoughtLab 网站预览

ThoughtLab

近黑色基底、胶囊形控件与紧密字距。

页面以近黑色为基底,搭配白色文字。字体采用 sui。视觉特点包括胶囊形控件、紧密字距、分屏构图、大字排版。适合参考的场景:设计工作室首页、案例展示页。

查看原始网站

使用规范

建议采用

  • 所有按钮、标签和胶囊控件的边框圆角均设为 9999px ——完整胶囊是不可妥协的
  • 桌面端显示标题设为 198px 或 91px 字重 700,全大写,行高 ≤ 0.96
  • 配色仅限于虚空、灰烬、霜寒、石墨和红信号——永不引入额外的强调色
  • 桌面端页面水平边距设为 126px ——负空间即为设计
  • 仅在每个视图的单一主要操作和标志中使用红信号(#fc1c46)
  • 正文文本使用 #cccccc 而非纯白色,以减少在黑色画布上的光学眩光
  • 通过尺寸跳跃和字间距建立层级,绝不通过阴影或背景填充

建议避免

  • 任何组件均不添加阴影、发光或任何 box-shadow 值
  • 绝不引入第二套强调色——红色是唯一的色彩信号
  • 绝不给卡片添加背景色、渐变或边框——卡片必须保持透明
  • 绝不将正文文本设为小于 10px,或使用衬线体、手写体或展示字体——sui 是唯一的字体家族
  • 绝不给卡片、输入框或任何非按钮元素添加边框圆角
  • 绝不将正文行高设为高于 1.25,支持文本行高设为高于 1.10——系统通过紧密感呼吸
  • 绝不将红信号应用于非操作元素——其稀有性才是其有效的原因