SoundCloud 网站预览
SoundCloud 网站预览

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)之外的层级——无阴影堆叠