Humble 网站预览
Humble 网站预览

Humble

近白色基底、大字排版与紧密字距。

页面以近白色为基底,搭配橙色文字。字体采用 Bricolage Grotesque、Geist。视觉特点包括大字排版、紧密字距、宽松留白、扁平表面。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 仅将安全橙色(#ff4000)作为小范围强调使用——用于标题后的终端句点、关键短语的细下划线、小图标填充,以及满幅延展的分节色带。禁止用于正文或大段文本。
  • 将展示类标题设为 Bricolage Grotesque 500–600 字重,搭配强烈负字间距:58px 时为 -3px,44px 时为 -1.5px,32px 时为 -0.96px。这种紧密的字间距是其标志性特征,不可松动。
  • 所有主要行动号召和填充按钮均使用 #000000。行动号召始终为黑色胶囊按钮(100px 半径),置于温暖米白画布上——永不使用橙色,也不应带有描边作为主要操作。
  • 所有卡片、图片和产品示意的圆角半径保持在 30–40px。这种柔和的圆润感是系统纸质感、亲和力的核心体现。
  • 保持扁平设计,无任何阴影。若需分层,使用表面色对比(纸 → 奶白 → 线布)或添加 1px #000000 边框。
  • 保持画布为 #fafafa(非纯白)。这种偏暖的米白调是让黑色文字与橙色强调看起来像印刷版编辑页面,而非屏幕界面的关键。
  • 使用充足的分节间距(64–80px)和卡片内边距(32–40px)。设计整体宽敞——切勿将元素密集堆叠。

建议避免

  • 禁止将安全橙色(#ff4000)用于行动号召按钮、链接或导航激活状态。主要操作始终为墨黑(#000000)。
  • 禁止添加阴影、光晕或层叠效果。该系统刻意保持扁平——任何阴影都会破坏其编辑类纸张质感。
  • 禁止使用纯白(#ffffff)作为背景。画布必须为 #fafafa 或更暖的色调(#fdfef8、#ecebe8),以维持印刷页面的氛围。
  • 禁止使用超过一个色彩。该系统为单色加一个橙色强调。引入蓝色、绿色或其他任何第二色会破坏整个视觉身份。
  • 禁止正文文字小于 14px。该系统以可读性和编辑性为优先——小字号仅限于元数据和微标签。
  • 禁止在卡片、图片或产品示意上使用锐利的边角(0–4px 半径)。系统中必须保持的柔和圆角(24–40px)是其核心特征。
  • 禁止使用装饰性渐变。系统中唯一的渐变是特定分节过渡中使用的微妙暖至深色渐变——禁止引入新的渐变模式。