Spotify

近黑色基底、胶囊形控件与渐变展示。
页面以近黑色为基底,搭配白色文字。字体采用 SpotifyMixUI、SpotifyMixUITitle。视觉特点包括胶囊形控件、渐变展示、摄影展示、分屏构图。适合参考的场景:音视频产品介绍页、媒体内容展示页。
查看原始网站使用规范
建议采用
- 所有按钮、标签和搜索字段使用9999px边距圆角——胶囊形状是Spotify品牌身份的不可妥协标准。
- 所有正方形内容卡片(专辑、播放列表)使用6px圆角,圆形艺术家头像使用9999px圆角——同类型卡片内禁止混用不同圆角。
- 将#1ed760保留用于每屏最重要的单个操作——登录、播放、确认。绝不用于次要链接、元数据或装饰元素。
- 所有文本保持在11px到24px之间。系统紧凑,正文内容不应超过16px,仅章节标题可达24px。
- 页面画布使用#000000,内容卡片使用#121212,交互控件使用#1f1f1f——在每屏保持此三层表面层级结构。
- 仅将0px 8px 24px rgba(0,0,0,0.5)阴影应用于脱离画布的内容卡片,绝不应用于导航、按钮或输入控件。
- 由专辑封面和艺术家摄影提供界面中的全部色彩。其本身应保持单色,仅允许使用#ffffff和#b3b3b3作为文本颜色。
建议避免
- 不要引入新的色彩强调色。整个系统仅以绿色(#1ed760)和紫色到钴蓝渐变(用于付费推广)为色彩基础。
- 任何交互元素均不得使用尖角(<4px圆角)。仅胶囊形和柔和的6px正方形是可接受的形状。
- 正文文本不得低于11px或高于16px。4px的尺寸范围是刻意设计的,以保持紧凑。
- 不要在白色或深色按钮上使用#1ed760作为悬停状态——绿色仅作为主要操作填充,绝非状态指示。
- 不要在非订阅或推广场景下使用紫色到钴蓝渐变。该渐变仅用于促销转化时刻。
- 任何表面均不得使用白色或浅色背景。系统以深色为先,即使提升的卡片也应保持在#1f1f1f或更低。
- 不要添加多层阴影堆叠、彩色光晕或拟物化效果。单一的rgba(0,0,0,0.5)下投阴影是唯一的提升处理方式。