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

Brisbane Web Developer

浅色基底、宽松留白与网格布局。

页面以浅色为基底，搭配深灰色文字。字体采用 system-ui, -apple-system, sans-serif、Suisse Works Trial。视觉特点包括宽松留白、网格布局、产品图像展示、摄影展示。适合参考的场景：创意机构官网、项目作品集。

查看原始网站

使用规范

建议采用

  • 页面、卡片和输入框的背景色统一使用 #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，层级仅通过大小和色彩体现
  • 禁止在正文文本中使用大写、字间距或装饰性字体处理——克制是其核心身份

相似设计语言