MetaMusic 网站预览
MetaMusic 网站预览

MetaMusic

暖白色基底、渐变展示与大字排版。

页面以暖白色为基底。字体采用 Maison Neue、Spoof。视觉特点包括渐变展示、大字排版、紧密字距、宽松留白。适合参考的场景:软件产品首页、服务说明页。

查看原始网站

使用规范

建议采用

  • 全部界面文字采用 Maison Neue;Spoof 每页最多用于一个 22px 强调标题。
  • 硬边 4px 黑色偏移阴影仅用于按钮、导航项等交互控件,不用于卡片或图像。
  • 表面体系按序叠放:Paper Cream 画布 → White 卡片 → Ice Blue 铺色 → Deep Indigo 上的 Midnight Card;同一视口不混用超过两级表面。
  • 展示标题采用 80–120px,letter-spacing 为 -0.02em 至 -0.03em;紧凑字间距让超大文字显得经过设计,而非臃肿。
  • 全部卡片采用 24px 圆角,按钮和标签采用 9999px 胶囊形;8px 仅用于输入框。
  • Peach Blush 图标圆形只放在受众或功能卡片内,不放在会与之冲突的深靛蓝表面。
  • 以 Card Padding 40px 和 Section Gap 80px 建立节奏;8px 基础单元统领所有内部间距。

建议避免

  • 不使用柔和模糊投影,硬边 4px 实色偏移是唯一抬升语言。
  • 不引入新彩色;Brand Blue 和 Deep Indigo 是唯一饱和语气,且不能共用一个表面。
  • 展示文字必须采用负 letter-spacing,56px+ 下的正字间距会破坏编辑感。
  • 卡片不使用 8px 圆角,输入框不使用 24px;三级圆角体系(24px / 9999px / 8px)严格限定。
  • 文字不直接放在 Peach Blush 或 Lavender Mist 上,除非核对对比度;两者是表面铺色,而非文字背景。
  • 同一视图不添加第二个描边胶囊形按钮,Log-in 描边是每个页眉仅出现一次的强调。
  • 超过一行的正文不居中;编辑体系依靠左对齐、右侧参差的阅读排列。