Glossier 网站预览
Glossier 网站预览

Glossier

近白色基底、大幅摄影展示与大字排版。

页面以近白色为基底,搭配近黑色文字。字体采用 Apercu、Apercu Mono。视觉特点包括大幅摄影展示、大字排版、细线分隔、分屏构图。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 专用于主要行动按钮和品牌标识的 #fff116,禁止在背景、边框或文本中使用
  • 所有组件(包括卡片、按钮、徽章和输入框)保持 0px 圆角——必须保持锐利边缘
  • 正文文本设定为 16px/400 的 Apercu 字体,字间距 0.002–0.003em;仅用于编辑性展示标题保留 32px/700 字号
  • 以满幅生活方式摄影作为主要视觉元素;页面背景 #f7f7f7 仅在区块边缘和卡片网格周围可见
  • 产品卡片保持纯 #ffffff 色,不设边框或阴影——由空白区域和 #f7f7f7 画布共同实现分隔
  • 所有眉题标签、分类名称和导航项采用大写Apercu 12px/500,字间距0.04em。
  • 仅将 #0600ff 青钴色用于「新」或状态徽章——禁止用于 CTA、链接或装饰性强调

建议避免

  • 不要引入圆角、阴影或渐变——系统刻意保持扁平与锐利
  • 不要将 #fff116 用作非按钮元素的悬停状态、边框或背景填充——这会削弱主要行动的冲击力
  • 不要通过颜色建立字体层级——应依赖 Apercu 字重(400/500/700)和尺寸变化来实现
  • 不要为产品卡片添加边框或背景;#ffffff 表面与 #f7f7f7 画布之间的对比已提供全部分隔需求
  • 不要将 #666666 用于主要文本;仅限用于辅助说明、元数据和占位符
  • 不要对正文或产品描述进行居中对齐——所有内容必须左对齐,除非是首屏展示文本或区块引言
  • 每个视口内最多仅允许一个黄色元素;该色彩的影响力依赖于其稀缺性