Websmith Studio 网站预览
Websmith Studio 网站预览

Websmith Studio

清晨的光线洒在奶油色纸张上

Websmith Studio 是一种安静、近乎修道院风格的个人作品语言,基于温暖的奶油色纸张和一种接近黑色的墨水构建。首屏区域以文字为核心——一个 96px 的句子承载整个首屏内容,其余所有元素都退居幕后以留出空间。界面 99% 为无彩色;色彩仅出现在三个柔和的卡片表面(淡蓝色、薄荷绿、粉晕色)以及一个鲜明的绿色状态点,作为功能性标点而非装饰。组件为扁平化且无边框,依靠充足的留白、12px 的图像圆角以及一个深色填充按钮来营造节奏。整体感觉不像网站,更像印刷品中的专题版面——自信、克制,且刻意简约。

查看原始网站

使用规范

建议采用

  • 使用 #1a1a1a Studio Ink 用于所有正文、图标以及填充按钮 —— 从不使用纯 #000000 用于文本或背景。
  • 将首屏标题设置为 88–96px,字重 700,行高 1.00,字间距 -2.4px 以重现标志性的文字表达。
  • 为所有卡片和图片设置 12px 圆角,按钮设置 8px 圆角——这两个数值是系统中唯一的圆角值。
  • 仅将三种柔和色调(淡蓝色、薄荷绿、粉晕色)作为服务/分类板块的完整卡片背景使用,禁止用于文字颜色或小面积装饰。
  • 仅将信号绿(#00c950)用于状态点——它是一个单像素的标点,不是用于号召性按钮或图标的品牌色。
  • 保持主要页面区块之间 96–112px 的垂直间距,以维持宽敞、编辑性的节奏感。
  • 白色(#ffffff)与奶油色(#f8f8f2)搭配,通过色彩变化实现表面层次感,无需使用阴影——色彩的转变即是高度的体现。

建议避免

  • 不要引入第二种字体或衬线体展示字体——系统在所有尺寸下均使用单一的几何无衬线字体。
  • 不要将柔和色调用于文字、边框或图标——它们仅作为表面填充,且在小尺寸下可读性会下降。
  • 不要为卡片或按钮添加阴影——高度感来自色彩变化和留白,而非投影阴影。
  • 不要在任何地方使用信号绿,除了状态点——否则会过度承诺品牌的克制感。
  • 不要使用带有彩色背景的调用行动按钮 —— 系统中唯一的动作色是深色 Studio Ink 填充。
  • 不要将区块间距压缩到 64px 以下——当垂直节奏降低时,布局会显得拥挤。
  • 只使用 12px(卡片/图片)或 8px(按钮)的圆角值——这两个值定义了视觉的柔和感。