Thomas Hedger 网站预览
Thomas Hedger 网站预览

Thomas Hedger

白色基底、文字主导与错落拼贴。

页面以白色为基底,搭配近黑色文字。字体采用 Diatype、Diatype Variable。视觉特点包括文字主导、错落拼贴、网格布局、产品图像展示。适合参考的场景:设计作品集、创意服务介绍页。

查看原始网站

使用规范

建议采用

  • 所有作品集内容都采用完整的 3 列边到边拼贴布局;pageMaxWidth 为 null,网格延伸至视口边缘。
  • 将所有角落半径设为 0px——UI 中任何位置均不使用圆角。
  • 在所有导航和节标题中使用 Diatype Variable 26px 500/700;将 700 专用于设计师姓名及激活强调。
  • 正文使用 Diatype 400 19px,版权及页脚使用 9px——9px 的图注文字是标志性尺寸选择。
  • 保持板块内部间距为 3px,板块间间距为 0–3px,以营造印刷文件夹的平实感。
  • 由项目图片提供全部色彩——绝不将强调色或品牌色引入边框元素。
  • 仅当需要标题中的编辑温暖感时,才将 Carbon Plum(#29242b)与 Ink Black(#000000)配对;其他情况始终使用纯 Ink Black。

建议避免

  • 任何组件均不添加阴影、渐变或边框圆角——设计本意为扁平化。
  • 不引入强调色、品牌色或语义色(无成功绿色,无错误红色)——色彩系统为封闭的双色体系。
  • 导航中不使用衬线或展示字体——Diatype Variable 是唯一允许的标题字体。
  • 导航链接不添加悬停背景、下划线或动画——文字本身即为交互表面。
  • 不将网格置于居中最大宽度容器内——拼接网格必须延伸至视口边缘。
  • 不使用 9/13/19/26 以外的字级——超出此尺度的插值会破坏编辑节奏。
  • 不使用卡片表面、提升面板或模态容器——若需要容器,项目图片应直接填充其内部。