North star · Keep the creation prompt unmistakably central while the full-bleed music imagery supplies atmosphere, not interface noise.
The visual strategy contrasts a near-black interface with a warm, blurred hero image that shifts through amber, rust, and muted plum. Treat that saturated field as atmospheric media rather than a reusable brand color: the measured interface palette remains dark and neutral, with warm off-white for primary text and calls to action. Neue Montreal carries the page throughout, using a large, centered, light-feeling headline against compact navigation and understated supporting copy. The hero uses a full-bleed composition; angled music-cover previews enter from the edges while the prompt composer anchors the center. Keep the controls legible through a translucent dark surface and fine border, not heavy ornament. Generous open space separates the headline, composer, and low-contrast publication marks. Rounded pills and soft card corners temper the otherwise flat, cinematic presentation. The page should feel like a focused creative tool placed inside a vivid music-world backdrop.
Site-wide typeface for hero display, supporting copy, navigation, and controls.
角色
示例
字号
字重
行高
字距
特大标题
Centered, oversized hero prompt headline.
Suno
72px
500
1
-0.013em
正文
Short explanatory sentence directly below the headline.
The quick brown fox 敏捷的狐狸
16px
300
1.5
0
辅助文字
Compact composer labels and supporting interface text.
The quick brown fox 敏捷的狐狸
15px
500
1.6
0
导航
Header links and account actions.
The quick brown fox 敏捷的狐狸
15px
500
1.6
0
间距与布局
基准单位 4px · 密度：适中
80px版块间距
4px元素间距
—卡片内边距
854px内容最大宽度
4px
6px
8px
10px
12px
14px
16px
20px
24px
40px
80px
Use a full-bleed hero with a centered content axis and a 12-column underlying grid. The measured page max width is 854px for constrained content, while background imagery spans the viewport. Keep the headline, description, and composer aligned centrally; let track artwork intrude from both side edges. Maintain comfortable density and generous vertical breathing room, with an 80px section rhythm and compact gaps within controls. The publication marks sit low in the hero as a restrained closing row.
圆角与层次
按钮 · 9999px
输入框 · 12px
卡片 · 20px
图片 · 50%
导航 · 9999px
xl · card
xl · card
The interface is mostly flat, relying on fine dark borders and tonal contrast instead of prominent shadows. The composer reads as a translucent dark panel over the hero image. Cards can use rounded corners and restrained depth; the measured colored shadow is subtle and should not become a conspicuous glow.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
Dark, unobtrusive header with a wordmark, compact links, login action, and a Warm Porcelain (#f7f4ef) pill CTA.
Hero headline
Large centered Neue Montreal display text with tight tracking, set in white over the full-bleed media backdrop.
Prompt composer
Wide rounded dark panel with a muted prompt hint, add control, Advanced option, utility icon, and Create action.
Create button
Compact rounded CTA with white label; the screenshot shows a vivid pink-to-orange treatment within the composer.
Track artwork
Two partially cropped, angled music-cover previews flank the hero content and recede beneath dark overlays.
Press marks
A low-contrast row of publication logos near the bottom of the hero, visually subordinate to the creation flow.
Imagery · Use full-bleed, softly blurred music-world imagery with warm amber, rust, and plum tones. Frame track-cover previews as angled cards entering from the far left and right, leaving the central text and prompt unobstructed. Apply dark fades toward the bottom and edges to preserve contrast. These vivid colors belong to the hero media, not the core interface palette.
Use Midnight Canvas (#101012) for the underlying interface.
Reserve Warm Porcelain (#f7f4ef) for readable light actions and labels.
Let the hero image span the viewport behind the content.
Use edge-cropped artwork to frame rather than crowd the headline.
Keep borders subtle and control shapes softly rounded.
✕ 不该做
Do not turn the warm hero imagery into a solid brand-color system.
Do not add competing content blocks above the composer.
Do not place dense copy over the brightest image areas.
Do not use heavy shadows or thick borders as default decoration.
Do not make publication marks as prominent as the primary action.
Do not replace the restrained neutral UI with colorful controls throughout.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in Suno’s visual style: a near-black Midnight Canvas (#101012) interface over a full-bleed, softly blurred music image. Treat amber and rust tones as image atmosphere, not reusable UI colors. Use Neue Montreal or Inter, with a large centered headline, light supporting copy, and a clear prompt composer beneath. Keep the composer dark and translucent with a fine Graphite Hairline (#28282a) border, rounded corners, and compact controls. Use Warm Porcelain (#f7f4ef) for key navigation labels and light CTA surfaces; preserve strong white text contrast. Frame the central content with cropped, tilted track covers at the edges. Maintain generous open space, subtle tonal layering, and small low-contrast supporting marks. The prompt and its primary action must remain the page’s clearest focal point.
