Woset 网站预览
Woset 网站预览

Woset

清晨阳光下的画廊——一个安静、暖灰的房间,墙上仅允许一个金色点缀。

Woset 的视觉风格如同一家精心策划的文具店被转化为画廊墙面:采用柔和的暖灰底色(#e5e7eb),黑白灰调的铬合金质感,搭配一个金色黄点缀色(#ecca53),用于激活滤镜标签和关键操作。字体设计以 Macan 为主,这是一种几何无衬线字体,字间距控制在极紧密的 -0.04em,页面中 95px 的标题主视觉元素最为突出,其余内容则统一收缩至安静的 15px 正文。产品网格部分摒弃了光滑的摄影图片,转而采用手绘风格插图,以宽松的3 列布局呈现,无卡片边框、无阴影效果,且控件圆角半径为 30px。整个系统刻意保持克制:仅使用一种暖色调、一种字体,无任何层叠效果——每屏都应像文具精品店中明亮整洁的陈列页面。

查看原始网站

使用规范

建议采用

  • 使用 Sunlit Marigold(#ecca53)作为唯一的色彩表面——每个视口仅一个亮色,绝不作为满幅背景使用。
  • 为所有交互控件(按钮、输入框、滤镜胶囊)设置 30px 的边框圆角——胶囊是系统唯一的形状语言。
  • 将首屏文字设为 95px Macan Medium,字间距 -0.04em(-3.8px)——这种紧密的设置才让标题显得独特且定制。
  • 保持所有产品卡片无边框,圆角为 0px——由手绘插图定义边缘。
  • 保持主要区块间 60px 的垂直间距,同级元素间 22px 间距。
  • 所有价格和次要元数据使用 15px 的 Stone(#8d8c8a);Carbon Ink(#000)仅用于主要文本和标签。
  • 将首屏区域(标题+滤镜)居中对齐;在每张图片下方,产品卡片元数据左对齐。

建议避免

  • 不要引入额外的亮色——系统为单色铬灰加一个暖黄色。产品艺术中的紫色/绿色/红色调仅为插图用途。
  • 不要为产品卡片、按钮或任何 UI 表面添加阴影——设计本意为平面。
  • 不要使用500以上的字重——Macan最高仅到中等字重,更重的字重会破坏其安静、几何化的风格。
  • 不要为产品卡片添加背景或边框——唯一表面是 Soft Pebble 画布。
  • 不要使用比正文更宽松的字间距(-0.02em 以上)或比展示文本更宽松的字间距(-0.04em 以上)——系统刻意保持紧密字间距。
  • 不要添加次级 CTA 亮色、渐变或填充黑色按钮——唯一填充的亮色是 Sunlit Marigold。
  • 不要左对齐首屏标题或添加首屏图片——仅以纯文字居中的首屏是标志性设计。