OFF+BRAND.

温暖羊皮纸上呈现的虹彩球体
OFF+BRAND. 以温暖的羊皮纸为载体,构建出近乎单色的画布(#e5e4e0),其中仅有一款定制的几何无衬线字体(Ataero Retina OB)承载了绝大部分的视觉表现力。标题尺寸宏大(最大达103px),行高紧凑(0.80),字间距轻微加宽,而一个唯一的虹彩渐变球体——从黄色过渡到粉红,再转为蓝色,最终消融于白色——作为首屏的唯一色彩事件,锚定页面整体的无色基调。界面应如同杂志专题页:采用细长的同心圆装饰,精确的2×5客户标识网格,网格纸风格的项目卡片,以及与博物馆标识相似的宽字间距标签文本。全篇无阴影、无填充,所有按钮的视觉分量都不超过采用 10px 圆角的透明描边链接——克制,是整个设计语言的精髓。
查看原始网站使用规范
建议采用
- 使用 #e5e4e0 作为页面画布的唯一配色——禁止在页面层级替换为纯 #ffffff 或灰色
- 将显示标题设定在70–103px之间,使用Ataero Retina OB 400字重,行高0.80,形成堆叠式的文字块结构
- 将虹彩球体渐变(255deg,黄色 → 粉红 → 蓝色 → 白色)作为首屏锚点使用,禁止用作按钮填充、边框或次要装饰
- 所有交互元素(链接、按钮、输入框)均设置 10px 圆角半径——所有卡片表面保持 0px 圆角
- 将区块标签设定为 11px,字间距 0.05em,全大写——此字间距为品牌标志,非风格选择
- 各区块间使用 76–119px 的垂直间距,使用 Ash(#bfbebe)1px 细线作为结构分隔线,禁止使用彩色线条
- 保持单色原则:若页面需要超出羊皮纸/墨水/白色/灰调的配色,须重新评估设计再引入色彩
建议避免
- 不得引入第二套字体家族——Ataero Retina OB是唯一的表达声音
- 禁止在按钮、卡片或背景上使用彩色填充——所有交互表面保持透明描边或白色
- 禁止添加阴影、框阴影或层叠效果——系统设计哲学为平面化
- 禁止在非首屏虹彩球体场景中使用渐变——该渐变仅为一次标志性时刻,非重复性装饰
- 禁止正文文本小于 15px 或大于 18px——15/18 为该系统可读范围
- 禁止段落正文居中对齐——正文始终左对齐
- 禁止对卡片或图片容器进行圆角处理——卡片为锐角(0px);仅交互元素拥有 10px 圆角