Bpowell 网站预览
Bpowell 网站预览

Bpowell

白色基底、非对称构图与大字排版。

页面以白色为基底,搭配近黑色文字。字体采用 Teg、Beatrice Display。视觉特点包括非对称构图、大字排版、单栏阅读排版、满幅色块。适合参考的场景:设计产品官网、作品展示页。

查看原始网站

使用规范

建议采用

  • 恰好使用 #ffffff 与 #111111 两种表面,以铺满边缘的分区交替建立节奏,不加分隔线。
  • 桌面项目名称采用 Teg,86px / line-height 1.04 / letter-spacing -0.033em;明显字间距让列表像一堵文字墙。
  • 全部分区标签使用 New Grotesk 600、0.069em 字间距,宽间距是体系唯一“装饰性”字体处理。
  • 导航项以 space-between 横跨视口全宽,不聚在角落或居中。
  • 最左导航项采用 Diatype 700 字重,让作者姓名成为其他平坦项目中唯一视觉分量。
  • 全部分区的内容列距离视口左边缘保持 40px 内边距。
  • 主要分区纵向内边距为 104px,它是体系最大间距单元,定义页面呼吸节奏。

建议避免

  • 除 #ffffff、#111111、#000000 与 #2b2b2b 外不引入其他颜色,体系有意单色。
  • 项目列表项不添加图像、缩略图或预览作品,名称本身就是入口。
  • 项目名称不居中,也不对齐到网格,它们固定左边距,让自身长度决定列宽。
  • 不使用卡片容器、圆角或投影,体系没有抬升或圆角。
  • 正文或导航不超过 26px;尺度直接跃迁至 58px 副标题和 86px 展示,填补间隔会破坏对比。
  • 项目名称不加悬停颜色、下划线或按钮样式,它们像列表,而非链接。
  • 单一文字块不使用超过一种字体;同一行中混用 Teg 与 Beatricedisplay 会破坏字体体系。