Studio.Design 网站预览
Studio.Design 网站预览

Studio.Design

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

页面以近白色为基底,搭配近黑色文字。字体采用 Inter、Inter Tight。视觉特点包括大字排版、紧密字距、错落拼贴、网格布局。适合参考的场景:设计作品集、创意服务介绍页。

查看原始网站

使用规范

建议采用

  • 使用 Studio Canvas #eeeeee 作为默认页面背景,以及 Charcoal Ink #222222 作为几乎所有显示文本的颜色。
  • 将首屏文字设为 Inter 80px/600,80px 行高,字间距 -3.2px。
  • 将主要区块标题设为 Inter 48px/700,52.8px 行高,字间距 -1.92px。
  • 使用 Inter Tight 15px/500,21px 行高,用于公共导航和紧凑标签。
  • 使用 16px 元素间距,24px 水平控件内边距,12px 垂直控件内边距。
  • 标准按钮和深色卡片使用 8px 圆角;紧凑按钮和图片拼图使用 4px 圆角。
  • 由作品艺术提供页面背景色,而 UI 元素仅限于 #eeeeee、#ffffff、#222222、#333333 和 #000000。

建议避免

  • 不要引入饱和的 UI 强调色、语义色标签或彩色主按钮。
  • 不要使用胶囊形 9999px 控件;公共标准按钮使用 8px 圆角,紧凑深色控件使用 4px。
  • 不要在边到边的作品拼图拼图或黑色展示卡内添加内边距。
  • 不要使用宽泛的卡片阴影;仅在突出按钮悬停状态时使用 0px 2px 15px 0px rgba(0, 0, 0, 0.1)。
  • 不要将显示文字的字间距放宽至正常间距;在 48px、64px 和 80px 的 Inter 显示层级上,使用 -0.04em 字间距。
  • 不要将每个区块都变为白色卡片;保持大面积无中断的 Studio Canvas #eeeeee 区域。
  • 不要将首屏区域的视觉作品规整为等宽列;保留不匹配的重叠和裁剪的项目图像边缘。