ARKET 网站预览
ARKET 网站预览

ARKET

白色基底、等宽文字标注与细线分隔。

页面以白色为基底,搭配近黑色文字。字体采用 Arket Sans、arketSansMono。视觉特点包括等宽文字标注、细线分隔、宽松留白、摄影展示。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有按钮、输入框和标签采用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阴影仅用于浮动链接提示。