Brisbane Web Developer 网站预览
Brisbane Web Developer 网站预览

Brisbane Web Developer

冬日光线下的画廊墙。一个无色彩、宽敞的作品集,以温暖的骨白画布为底,每个项目卡片由柔和的棕色调阴影框出,并以极细的展示字体标注。

Carl Beaverson的作品集秉持极端克制的设计理念:温暖的米白色画布,仅使用中性色调,且仅在最小的排版细节中使用一种强调字体(Suisse Works)。整个系统为无彩色系统——没有品牌色,没有色彩强调,也没有语义性色彩。层级关系通过尺寸跳跃、字间距以及充足的负空间来构建,而非依赖色彩或粗细。各个组件悬浮在带有暖调棕色阴影之上,微妙地为原本冷峻的极简网格增添温暖。阅读顺序以内容为先:三格并列的项目卡片、极小的署名文字,以及宽敞的板块留白区域,使每个作品都能独立呼吸。

查看原始网站

使用规范

建议采用

  • 页面、卡片和输入框的背景色统一使用 #f4f3f1,禁止引入纯白或纯灰
  • 按钮、输入框、卡片和卡片的圆角统一使用 5px —— 不得混用更大的圆角
  • 仅在艺术作品和图像下方使用暖棕阴影堆叠(rgba(90,50,40,0.15) + rgba(80,40,30,0.1))——绝不应用于文本块或导航栏
  • 元素间距使用 20px,区块间距使用 122px,以维持画廊的宽敞节奏
  • 在编辑内容标签中使用 Suisse Works(或衬线字体替代)字号 13px,字间距 -0.038em —— 严禁大于 13px
  • 所有边框、分隔线和署名文字统一使用 #aaaaaa —— 层级来自间距,而非字重
  • 色彩调色板仅限六个中性色值——禁止品牌色、语义色彩或强调色

建议避免

  • 禁止引入任何有色彩的色值——系统中不得出现蓝色、绿色、红色或紫色
  • 禁止使用冷灰阴影——阴影色调必须保持暖调(带有棕色底色)或完全省略
  • 禁止将 Suisse Works 字号设置超过 13px —— 它用于图注,而非标题
  • 禁止在项目艺术作品周围添加卡片内边距——图像必须完全填满卡片至边缘
  • 禁止使用边框来分隔卡片与画布——应依赖阴影和 #f4f3f1 表面色调实现分隔
  • 禁止使用粗体字重——整个系统统一为 400,层级仅通过大小和色彩体现
  • 禁止在正文文本中使用大写、字间距或装饰性字体处理——克制是其核心身份