Dries Bos 网站预览
Dries Bos 网站预览

Dries Bos

浅灰色基底、细线分隔与网格布局。

页面以浅灰色为基底,搭配近黑色文字。字体采用 Sohne Buch、myFont。视觉特点包括细线分隔、网格布局。适合参考的场景:设计工作室首页、案例展示页。

查看原始网站

使用规范

建议采用

  • 色彩调色板严格限定为四种色调:羊皮纸、羊皮纸底、印度墨水、石墨。绝不引入任何彩色。
  • 设置表格行和卡片的边距为四边25px——这是布局的主要节奏。
  • 所有文字使用Sohne Buch 400,且保持单一字重。不加粗,不斜体。层级通过大小和颜色(石墨与印度墨水)来体现,而非字重。
  • 绘制边框和分隔线为1px印度墨水细线。不使用2px以上的线;不使用阴影。
  • 使用myFont图标集,字号为20px,行高为1.0。图标应根据邻近文字的x高度进行光学对齐,而非其边界框。
  • 让空白空间承担视觉重量。保持主要区块之间约79px的垂直间距。
  • 所有交互元素保持无边框。箭头、链接和图标本身就是交互提示——无需按钮容器,无需填充状态。

建议避免

  • 不添加品牌色、强调色或CTA填充。该系统本质上是单色的。
  • 不为行、表格单元格或卡片添加圆角。角为锐利(0px)。只有胶囊形元素(1000px)会呈现弧度。
  • 不引入阴影、光晕或层叠效果。表面是平的;区分通过色调(羊皮纸到羊皮纸底)或细线实现。
  • 不使用多种字重。Sohne Buch 400是唯一注册的字重——添加500/600/700会破坏编辑的克制。
  • 不将交互元素包裹在按钮容器中。链接仅为文字加箭头图标,不包含其他内容。
  • 不使用摄影、渐变或彩色插图。线框线条图是唯一的视觉内容;必须尊重这一点。
  • 正文文本不右对齐。所有编辑内容均为左对齐,包括个人简介描述。