Spotify

一个用于音乐发现的深色沉浸式空间。

深色背景搭配高对比度的白色文字与微妙的灰色层次。

geometric-sans

• display24px · 700
• heading16px · 700
• body14px · 400
• caption13px · 400

主标题和版块标题使用粗体。 · 正文和导航项使用常规字重。 · 保持紧凑的行高以提升垂直信息密度。

基于 8px 的节奏，内容间距采用 12px 和 24px 的增量。

1px solid rgba(255,255,255,0.1)

rgba(0,0,0,0.3) 0px 8px 8px 0px · rgba(0,0,0,0.5) 0px 8px 24px 0px

固定左侧边栏（约 280px），搭配流动式主内容区域。

卡片悬停状态的变换与透明度变化 · 交互元素的背景颜色过渡

卡片有微妙的背景颜色变化和轻微的缩放变换。 · 通过背景颜色变化提供即时视觉反馈。

• button 胶囊形实心按钮，采用高对比度或低强调轮廓。
• card 扁平、可悬停的内容卡片，拥有醒目的视觉效果和极简内边距。
• chip 当前视图中无明显可见的元素。
• input 圆角搜索栏，带有微妙的深色背景和左对齐图标。
• hero 基于网格的版块，用于展示热门内容和艺术家。

• 语气 轻松、有邀请感且以发现为导向。
• 标题风格 直接且以行动为导向，通常使用小写或句首字母大写。
• 按钮文案 清晰且有鼓励性，使用高对比度的胶囊按钮。

• 不要使用浅色背景——截图显示的是深色（#121212）环境。
• 不要使用衬线字体——截图显示的是几何无衬线字体。
• 不要在主要按钮上使用尖锐的圆角——截图显示的是胶囊形（999px）按钮。
• 不要使用过多的阴影——截图仅使用微妙的深色阴影来体现层次。
• 不要使用多列布局进行导航——截图显示的是固定侧边栏。
• 不要使用明亮、多彩的 UI 强调色——截图仅使用单一绿色（#1ed760）表示激活状态。
• 避免: 正式的企业语言
• 避免: 过于复杂的句子结构
• 避免: 视觉杂乱或不必要的装饰元素

历史提取与模型分析 · 尚未逐项校验