Arsenijs Fabrica 网站预览
Arsenijs Fabrica 网站预览

Arsenijs Fabrica

白色基底、胶囊形控件与细线分隔。

页面以白色为基底,搭配近黑色文字。字体采用 Onest、Times。视觉特点包括胶囊形控件、细线分隔、非对称构图、大字排版。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有 48px 及以上的展示字号都使用 Onest 字重 200-300。轻声般的标题字重是品牌的编辑标志。
  • 整个文字尺度都使用负 em 字间距,到 152px 展示字号时收紧为 -0.091em。
  • Ember Orange #f15730 留给实心按钮,Tangerine Blaze #f7651a 留给整片促销表面。绝不在同一组件中混用。
  • Apricot Whisper #ff8562 用于卡片 1-2px 细线边框和链接下划线,不用于填充。
  • 每个按钮采用 600px 圆角,每个输入框采用 30px。操作元素必须采用胶囊形。
  • 卡片默认使用 10px 圆角,产品图像使用 15px 圆角。
  • 白色表面上,如果 Graphite 显得过重,边框才使用 Mist Gray #eeeeee。

建议避免

  • 卡片、按钮或模态框不要使用 box-shadows。系统仅通过边框与颜色传达纵深。
  • 正文不要使用 Orange 橙色,因为它在白底上不满足无障碍对比要求。只将它留给填充、边框和大型展示数字。
  • 正文或界面标签不要使用字重 600-800。这些字重只留给少见的强调场景。
  • 不要引入第二种强调色或色相。橙色必须始终是唯一彩色音符。
  • 卡片或图像不要使用 0px 或 4px 圆角。10px/15px 的最低尺度是柔和编辑气质的一部分。
  • 产品卡片文字不要居中。所有界面文案左对齐,居中只留给首屏叠加内容和模态框内容。
  • 表面填充不要使用渐变。唯一观察到的渐变,是深色表面上的单个进度条指示器。