SoundCloud

演唱会暗房搭配霓虹蓝信号——近黑色画廊中,专辑封面和一个冷色调点缀色完成全部色彩表达,其周围金属元素保持不可见。
SoundCloud 是一个深色舞台媒体环境:近黑色画布(#121212)构成场地,专辑封面和摄影作品承载色彩,单一的冷蓝色(#699fff)用于链接和交互时刻。界面保持扁平且几乎无阴影——定义来自内嵌细线和灰度变化,而非立体感,从而将焦点集中在视觉内容上(艺术家、曲目封面、生活方式摄影)。字体采用定制几何无衬线字体(Söhne),具有异常宽广的字重范围,包含100字重用于极轻的展示场景,搭配舒适8–16px内边距和4px的方形角,整体感觉实用且不繁复。组件为矩形且内容密集——按钮为扁平填充,卡片仅为封面艺术的容器,输入框极简——让音乐内容成为视觉主角。
查看原始网站使用规范
建议采用
- 使用 #121212 作为页面默认背景色;仅在输入框或提升的深色面板中使用 #303030
- 所有按钮、输入框和徽章的圆角半径设置为 4px —— 严禁使用胶囊形(9999px)或大半径
- 按钮以扁平填充呈现,无投影阴影——使用内嵌细线(rgba(18,18,18,0.1) 0 0 0 1px inset)定义边界
- 在展示尺寸(60px)下使用 Söhne 100 字重用于首屏标题,以营造编辑性克制感;正文和UI内容则切换至600–700字重
- 内容区块中由摄影和专辑封面提供全部色彩;周围金属元素保持无色
- 仅将 #699fff 用于内联链接和强调线条——严禁作为按钮填充色
- 在桌面端保持6列网格布局,行与列间距为16px
建议避免
- 卡片或按钮不得添加阴影——系统设计为扁平化
- 禁止将 #699fff 用作CTA背景或按钮填充——操作色为白色(#ffffff)
- 交互元素的圆角半径不得大于4px;方形角是品牌身份的一部分
- 禁止在按钮、卡片或背景表面添加渐变——页面整体为纯黑扁平
- 正文文本不得小于14px,或在小于展示尺寸时使用100字重
- 禁止使用多个饱和的强调色——系统为单色系,仅有一个蓝色信号
- 禁止超出灰度变化层级(#121212 → #303030 → #666666)之外的层级——无阴影堆叠