Shupatto 网站预览
Shupatto 网站预览

Shupatto

白色基底、宽松留白与居中构图。

页面以白色为基底,搭配深灰色文字。字体采用 GillSansNova-Book、GillSansNova-SemiBold。视觉特点包括宽松留白、居中构图、细线分隔、网格布局。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有界面文字使用大写,字间距 ≥ 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 的图标;图标应不存在,或用尽可能细的线条绘制。