Suno

近黑色基底、渐变展示与细线分隔。

页面以近黑色为基底，搭配暖白色文字。字体采用 Neue Montreal、Editorial New。视觉特点包括渐变展示、细线分隔、居中构图、网格布局。适合参考的场景：AI 服务首页、产品演示介绍页。

查看原始网站

使用规范

建议采用

每屏默认使用 #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 对比才能正确显示，不可用于浅色背景

正在读取模板权限…

使用指南

# Suno — Style Reference
> Afterglow on a mixing console. Cream typography and a sunset wash over a matte black studio, with a single coral button as the only chromatic punctuation.
 
**Theme:** dark
 
Source measurements are normalized; roles and recommendations are interpreted. Font summary lists are independent, not paired by position. HTML examples are reconstructions, not source components.
 
Suno operates in a warm nocturnal register: a near-black canvas (#101012) lit by a single dusk-gradient wash, with one cream-warm off-white (#f7f4ef) carrying all body and headline text. The whole product feels like a recording studio after midnight — quiet, matte, and slightly reflective, with color reserved as a single-function event (the coral Create button) that punctuates an otherwise monochromatic surface. Typography does the heavy lifting: Neue Montreal sets almost everything in compact 14–16px rows, while an Editorial New italic display voice breaks the dark with humanistic serifs at 72–140px, giving every screen one moment of warmth and scale. Components are low-elevation by default — soft cards, ghost controls, thin dividers — and the only true accent is the sunset gradient that bleeds behind the hero.

Suno

使用规范

建议采用

建议避免

相似设计语言

ElevenLabs

Coda

Splice

Gleap

SoundCloud

Ameba