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 区域。
- 不要将首屏区域的视觉作品规整为等宽列;保留不匹配的重叠和裁剪的项目图像边缘。