SoundCloud

近黑色基底、细线分隔与摄影展示。
页面以近黑色为基底,搭配白色文字。字体采用 Söhne (custom)。视觉特点包括细线分隔、摄影展示、扁平表面、分屏构图。适合参考的场景:音视频产品介绍页、媒体内容展示页。
查看原始网站使用规范
建议采用
- 使用 #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)之外的层级——无阴影堆叠