21 TSI

近黑色基底、大幅摄影展示与胶囊形控件。
页面以近黑色为基底,搭配白色文字。字体采用 Saans。视觉特点包括大幅摄影展示、胶囊形控件、细线分隔、网格布局。适合参考的场景:服饰品牌介绍页、商品展示页。
查看原始网站使用规范
建议采用
- 所有文字都使用 Saans,或 Inter/Manrope,绝不换成人文字体或板状衬线。几何精度就是声音。
- 每个 12–20px 的全大写标签都采用 0.05em 正字间距。疏朗间距让 12px 文字也能读起来像编辑式界面框架。
- 每个 47px 及以上的展示字号都使用 -0.025em 紧密字间距。这种负字间距是必需的,避免超大字母彼此漂离。
- 每个交互控件,包括 CONTACT、FR、SOUND 及同类控件,都使用 70px 胶囊圆角。按钮绝不使用 8px 圆角。
- 照片在最大视口高度下填满 100vw,不叠加覆盖层、遮罩或文字。图像本身就是设计。
- 界面保持 #000000 上的 #ffffff,并在顶部只添加一条 1px 细线。框架绝不超过两种颜色和一条线。
- 最具戏剧性的展示场景使用字重 300,而非 700。轻声字重与巨大字号的对比,是标志性手法。
建议避免
- 不要设置实心红色 CSS 背景。深红始终来自照片,而不是填充色。
- 不要使用彩色背景的实心按钮。所有交互控件都采用幽灵或轮廓样式,配 1px 白色边框。
- 正文不要叠在编辑摄影上,应让文字拥有独立背景或呼吸空间。
- 不要使用投影、发光或任何悬浮效果。系统严格保持平面,纵深只来自镜头。
- 不要引入第二种字体或图标字体。每个字形都来自 Saans,或以基础形状绘制。
- 不要使用 max-width 内容容器。满幅布局源于设计理念,而非偶然。
- 展示字号不要小于 47px 或大于 245px。尺度跳跃就是节奏,中间字号会破坏这种垂直强调。