Holiday 100 网站预览
Holiday 100 网站预览

Holiday 100

深灰色基底、摄影展示与扁平表面。

页面以深灰色为基底。字体采用 Crimson Pro、Google Sans。视觉特点包括摄影展示、扁平表面、衬线字形、网格布局。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 在48px及以上尺寸用于展示和板块标题时使用Crimson Pro——切勿用无衬线字体替代品牌展示场景。
  • 正文与界面文本保持Google Sans 200或400字重,所有尺寸保持一致的-0.02em字间距。
  • 每个分类均置于独立的饱和色背景中——系统内使用全部七种分类色,而非仅使用一种。
  • 保持38-40px的垂直板块间距,以在不同系列之间留出编辑空间。
  • 所有卡片、标签和图片块使用20px圆角——这是整个系统的唯一结构圆角。
  • 以深色画布(#333438)作为主导区域;仅将表面提升至#202124以用于卡片。
  • 所有次要操作使用描边胶囊按钮(9999px圆角,白色边框)——此系统中不存在填充型CTA色。

建议避免

  • 不要添加阴影或立体效果——设计采用平面色调对比,而非阴影。
  • 不要为任何按钮或CTA填充饱和色——所有操作均以透明描边形式呈现于深色画布之上。
  • 不要将Crimson Pro用于正文或界面文本——它仅限展示用途,混合使用于小字号会破坏编辑层级。
  • 不要使用亮色主题表面或白色卡片背景——这是一个纯深色系统。
  • 单个组件内不要使用超过两种强调色——分类标签有效的原因在于每个标签只承诺一种颜色。
  • 不要使用渐变——设计基于平面色块与摄影,无平滑过渡。
  • 不要将展示标题缩小至80px以下——编辑的视觉分量依赖极端尺寸。