Kalstore® 网站预览
Kalstore® 网站预览

Kalstore®

近白色基底、大幅摄影展示与紧密字距。

页面以近白色为基底,搭配近黑色文字。字体采用 ABCDiatype、Arial。视觉特点包括大幅摄影展示、紧密字距、细线分隔、扁平表面。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • #f1ba35 Mustard 仅用于填充操作按钮;它是体系中唯一具有 CTA 功能的彩色。
  • 展示文字使用 71–140px ABCDiatype,letter-spacing 为 -0.04em 至 -0.02em,建立编辑冲击力;紧凑字间距让超大文字显得有意设计,而非臃肿。
  • 卡片、按钮和输入框使用 8px border-radius;4px 留给徽章和图标容器。
  • 使用 1px #d3d3d3 Felt Gray 边框定义结构,不以 box-shadow 作为主要分隔方式。
  • 正文使用 19px ABCDiatype,400 字重、1.30 行高;19px 正文大于典型电商的 14–16px,体现编辑意图。
  • 彩色强调色板(#d26c46、#458e71、#3b59a3、#6c3c3c、#90abc8)仅用于编辑艺术块和插画,不用于按钮、链接或状态指示等功能性界面元素。
  • 分区间距至少保持 64px,保留宽松、杂志般的阅读节奏。

建议避免

  • 功能性界面不要使用彩色:成功不用绿、错误不用红、信息不用蓝;体系为单色加一种暖强调色。
  • box-shadows 的不透明度不要超过 10%;抬升应像纸张轻微翘起,而非数字化弹出。
  • 不要使用粗字重(600+);体系最高为 500 字重,层级来自尺寸,而非字重对比。
  • 文字或背景不使用纯黑(#000000),改用 #242424 Ink,以保持纸色画布上的暖意。
  • 不要添加渐变;原始数据显示没有渐变使用,体系完全由扁平表面构成。
  • 按钮纵向内边距不要超过 8px;紧凑的 6×8px 按钮尺寸是标志性特征,更大内边距会破坏克制感。
  • Mustard(#f1ba35)不要用于大面积填充表面;它适合按钮填充或徽章,而非分区背景。