Suno 网站预览
Suno 网站预览

Suno

在混音台上的余晖。奶油色文字搭配夕阳渲染,背景为哑光黑色工作室,仅有一个珊瑚色按钮作为唯一的色彩点缀。

Suno 以温暖的夜色基调运作:近黑色画布(#101012)上仅用一道黄昏渐变渲染,搭配一种奶油色暖白(#f7f4ef)承载全部正文与标题文字。整个产品感觉像深夜的录音室——安静、哑光、略带反光,色彩仅作为单一功能事件(珊瑚色「创建」按钮)出现,突显在否则单调的表面。字体承担主要表达:Neue Montreal 以紧凑的 14–16px 行高设置大部分内容,而 Editorial New 斜体展示音色则在 72–140px 的尺寸下以人文衬线字体打破黑暗,为每个屏幕带来片刻温暖与尺度感。组件默认采用低层级设计——柔软的卡片、透明描边控件、细线分隔——唯一真正的强调是延伸至首屏背景的夕阳渐变。

查看原始网站

使用规范

建议采用

  • 每屏默认使用 #101012 作为画布——绝不引入更亮或更灰的页面背景
  • 所有正文与 UI 文字使用 Neue Montreal 300 或 400 字重,行高 14–16px;仅将 500 字重保留给需要显得活跃的标签
  • 使 Ember Coral(#fd429c)仅出现在每屏一个元素上——即主要操作按钮——且绝不出现在其他位置
  • 任何 40px 及以上字号的文字,需应用 -0.026em 字间距,以避免大尺寸显示行显得空旷
  • 仅在首屏和一个氛围性插页使用黄昏渐变——绝不可作为卡片或区块背景
  • 使用6px圆角用于按钮,12px用于输入框和卡片,20px用于图片拼图,24px用于首屏区域艺术作品
  • 通过色彩阶梯(#101012 → #17171a → #000000)叠加表面,而非阴影;仅保留一个环境级的投影用于悬浮的首屏图块

建议避免

  • 不要引入第二个强调色——系统本意为单色系,仅以珊瑚色作为点缀
  • 不要将白色(#ffffff)作为主要文字颜色——Warm Cream(#f7f4ef)是标志性的暖白,避免界面显得冷冰冰
  • 不要为卡片或按钮添加厚重阴影——设计语言为哑光且低层级
  • 不要在产品 UI、标签或按钮中使用 Editorial New——仅保留用于首屏标题和编辑性引语
  • 正文文字大小不得高于 18px 或低于 13px——字体层级处于狭窄的中间区间
  • 不要使用超出 {6, 12, 20, 24} 的圆角值——这四个数值是整个圆角语汇的全部内容
  • 不要将「创建」按钮置于非深色背景上——珊瑚色需与 #101012 对比才能正确显示,不可用于浅色背景