B150 网站预览
B150 网站预览

B150

暖白色基底、等宽文字标注与胶囊形控件。

页面以暖白色为基底,搭配近黑色文字。字体采用 Geist、Fragment Mono。视觉特点包括等宽文字标注、胶囊形控件、大字排版、紧密字距。适合参考的场景:工作流工具首页、产品功能说明页。

查看原始网站

使用规范

建议采用

  • 使用#f2efe9作为默认页面画布,使用#1f1915作为主要文本颜色。
  • 在使用完整编辑类首屏处理时,将展示标题设置为Geist 400,字号120px,行高111.6px,字间距-8px。
  • 使用Fragment Mono 10px,字间距+0.3px,用于大写导航、标签和元数据。
  • 构建公共转化按钮为#ffffff或#fffdf6的胶囊形按钮,半径1440px,文字颜色#1f1915,垂直内边距12px。
  • 使用1px实线#e6e3dd的分隔线和边框,替代阴影用于轻量区块结构。
  • 卡片和媒体容器使用16px圆角,嵌入图像使用8px圆角。
  • 保留#fa725a用于紧凑状态的可用性或即将上线状态文本。

建议避免

  • 不要使用蓝色、绿色或紫色作为通用界面强调色;保持工作色板无彩色,仅以#fa725a为例外。
  • 不要将1440px按钮半径替换为8px或16px等圆角矩形。
  • 不要在#ffffff、#fffdf6或#e6e3dd卡片上使用投影阴影。
  • 不要将大标题设置为粗体字重;在120px展示处理中使用Geist 400,在次级标题中使用Geist 500。
  • 不要在#f2efe9可用时使用纯#ffffff作为整体页面背景。
  • 不要将四列资源布局转换为四张厚重边框的卡片。
  • 不要使用明亮的摄影图像作为背景素材;保持在明亮首屏文字背后使用深色、沉静的纪录片风格。