Spotify

近黑色基底、分屏构图与胶囊形控件。
页面以近黑色为基底。字体采用 SpotifyMixUI、SpotifyMixUITitle。视觉特点包括分屏构图、胶囊形控件、网格布局、渐变展示。适合参考的场景:音视频产品介绍页、媒体内容展示页。
查看原始网站使用规范
建议采用
- 使用#121212作为默认卡片/侧边栏表面色,使用#000000作为页面画布色
- 所有内容卡片和图像容器均使用6px圆角
- 所有交互按钮和标签均使用9999px圆角
- 输入字段使用500px圆角以形成柔和的胶囊形状
- 所有播放按钮、激活状态及品牌强调色均使用#1ed760
- 所有部分标题和按钮标签均使用SpotifyMixUI 14px字重700
- 所有次要文本(艺人名称、元数据、时间戳)均使用#b3b3b3
建议避免
- 不要使用厚重的投影阴影——Spotify的层叠感来自表面色彩变化,而非模糊阴影
- 不要在#1ed760和促销渐变之外使用强调色——该界面刻意保持单色
- 不要混合圆角家族——内容类使用6px,操作类使用9999px,并保持一致
- 核心界面不要使用浅色背景或白色表面——深色画布是标志性特征
- 标题字体不要超过24px——Spotify的层级结构是紧凑的
- 不要在深色画布上放置彩色按钮——主要操作始终是白色胶囊形按钮
- 不要为卡片添加装饰性边框或轮廓——仅靠表面颜色定义边界