ARKET 网站预览
ARKET 网站预览

ARKET

斯堪的纳维亚白色画廊。骨白画布上的铺满画面摄影、极细格线,以及像博物馆墙面标签一样标注每个区块的小型大写等宽文字。

ARKET是一家斯堪的纳维亚时尚零售商,其数字呈现像经过策展的白色画廊空间:骨白画布、炭黑字体、极细边框,除了摄影本身以外,任何地方都没有颜色。字体将安静的人文主义无衬线与小型大写等宽字体搭配,像博物馆墙面文字一样为编辑式卡片标注,强化重视艺术指导胜于广告的语气。交互元素锐利(2px圆角)、平坦,通过反转而非颜色强调;实心黑色按钮与同高度的描边按钮并列。系统珍视克制:充裕留白、没有渐变、极少高度效果,唯一几乎不可见的蓝色强调只用于链接。每个屏幕都应像印刷造型册页面,疏朗、单色,让影像承担色彩表达。

查看原始网站

使用规范

建议采用

  • 所有按钮、输入框和标签采用2px圆角;锐利直角是ARKET克制风格的标志性特征。
  • 同时提供主要与次要操作时,将同高度的实心黑色按钮与描边白色按钮配对,而非使用彩色强调。
  • 编辑式分类标签和元信息采用arketSCSansMono、10–12px及-0.05em字间距,绝不用于正文。
  • 所有UI表面保持无彩色:#ffffff画布、Carbon文字、Mist分隔线、Linen边框,让摄影提供页面中唯一的颜色。
  • 保持16px元素间隔和64–80px区块间隔;留白是主要层级工具,而非字重或颜色。
  • #000000填充卡片(例如会员浮层)是引入明暗对比的唯一方式,绝不添加阴影来托起表面。
  • 每张编辑式内容卡片都以边到边的照片为锚点,采用0px圆角;图片本身就是卡片,字体位于其下,像说明文字。

建议避免

  • 绝不将#3860be Indigo Whisper用于装饰填充、徽标背景或插画颜色,它仅用于链接或交互状态。
  • 绝不将字重提高到400以上表示强调,改用字号、位置或明暗对比,例如白底黑字与黑底白字。
  • 绝不添加渐变填充、辉光效果或彩色阴影,系统刻意保持平坦。
  • 卡片圆角绝不使用网格中的0px或独立内容块的20px以外的值;混用圆角会破坏画廊墙面感。
  • 生产环境中绝不用系统后备字体替代定制Arket Sans或arketSansMono;等宽字体对编辑式语气至关重要。
  • 每个视口绝不出现超过一个填充黑色按钮;如果所有内容都反转,反转效果就会失去强调作用。
  • 绝不用阴影提升卡片、导航或模态框;唯一的rgba(0,0,0,0.1) 0px 2px 10px 2px阴影仅用于浮动链接提示。