Champions4good 网站预览
Champions4good 网站预览

Champions4good

深色基底、紧密字距与摄影展示。

页面以深色为基底。字体采用 Druk Condensed Super Desktop、Neue Montreal。视觉特点包括紧密字距、摄影展示。适合参考的场景：产品介绍页、品牌展示页。

查看原始网站

使用规范

建议采用

  • 所有58px或更大的展示标题都采用Druk Condensed；它是品牌语气，而非装饰。
  • 展示文字行高设为0.78-0.85，形成海报叠排的重叠效果。
  • Deep Plum（#23002b）分区中，Lavender Shock（#e894ff）是唯一彩色，让双色配对承担表现。
  • 每个按钮、标签和胶囊元素都采用9999px border-radius，UI中不使用锐利直角。
  • 深李紫分区后切换到白色（#ffffff）分区，打破页面节奏；对比本身就是布局。
  • Mint Signal（#93ffe4）和Amber Pulse（#ffac47）只作为小强调，面积低于视口的20%；它们是标点，而非表面。
  • 所有UI附属文字中的Neue Montreal保持12-16px，必须足够安静，让Druk占主导。

建议避免

  • 展示文字不要使用Druk Condensed之外的任何字体；200px+的系统衬线或常规无衬线会让海报活力崩塌。
  • Lavender Shock（#e894ff）不要放在白色或浅色背景上；其对比只针对深李紫设计。
  • 卡片或按钮不要添加box-shadow；设计使用平面色层，而非抬升。
  • 展示文字行高不要高于1.0；紧密纵向压缩是标志性特征。
  • 薄荷和琥珀强调色不要混入深李紫分区；它们只属于浅色或过渡区域。
  • 任何交互元素的border-radius不要小于6px；系统由胶囊和柔和圆角构成。
  • 展示标题不要居中；左对齐将文字推向视口边缘，形成大幅印张效果。

相似设计语言