Shupatto 网站预览
Shupatto 网站预览

Shupatto

白色大理石上的博物馆展柜。

Shupatto 的数字呈现像安静的博物馆展柜,只展示一个实体产品。视觉系统几乎完全无彩色:白画布以炭灰细线、大量留白和低声微型文字打断。一切全大写,并使用极宽字间距,连正文也转为编辑式展示文字。唯一彩色是柔和长春花蓝,它更像微弱压力点而非品牌色,出现在标签、选中状态或小徽章中。界面是克制研究:没有阴影、渐变、超过 3px 的圆角,也没有与产品竞争的装饰影像。一切表达来自线条和排版节奏。

查看原始网站

使用规范

建议采用

  • 所有界面文字使用大写,字间距 ≥ 0.07em;排版标志是这种字间距,而不是字重或字号。
  • 内容容器通过 1px 的 #2d2d2d 或 #000000 细线边框分隔,绝不用背景填充或阴影。
  • 所有圆角元素都保持 3px 圆角;系统比常见 8–16px 更利落、更有建筑感。
  • 颜色只限中性色与长春花蓝 #738ae5;每个视图最多 1–2 个元素使用长春花蓝,作为安静强调。
  • 正文使用 16–18px、行高 1.22–1.33、字间距 0.07–0.1em,形成编辑画廊感。
  • 所有微型标签、徽章与分类印章使用 GillSansNova-SemiBold,字重 800,字号 8px,字间距 0.119em。
  • 全局应用 "palt" font-feature 设置;它优化比例替代字形,对品牌排版身份不可妥协。

建议避免

  • 不要引入阴影、渐变或任何浮起形式;设计系统在理念上就是平面。
  • 不要添加 #738ae5 之外的鲜亮或饱和色,甚至次要强调也应保持中性。
  • 圆角不要超过 3px,避免胶囊形和大圆角。
  • 文字不要大小写混排,也不要使用正常字间距;所有文字都靠字间距呈现编辑式展示感。
  • 卡片或区块不要填充带色背景,依赖细线边框在白画布上建立结构。
  • 大型展示文字不要低于 28px 或高于 32px;尺度刻意压缩而安静。
  • 不要添加描边粗于 1px 的图标;图标应不存在,或用尽可能细的线条绘制。