用途:这是一套带有强约束取向的 Spotify 风格界面设计指南,供 AI 代理在构建类似 Spotify 视觉风格的界面时参考。适用场景包括构建暗色模式界面、创建 Spotify 风格设计系统,以及使用 Inter 字体和 4px 网格实现 UI。
主要能力:
- 颜色——主表面必须使用暗背景(亮度低于 20,检测值为 9);页面背景(surface-base)必须为 #171717;主要操作与聚焦状态(accent)必须为 #010002;文字对比度至少 4.5:1。
- 语义令牌——包括 surface-base #171717、surface-raised #FEFEFE、surface-overlay #010002、text-primary #555555、text-secondary #6A6A6A、text-tertiary #AEAEAE、border-default #838486、accent #010002。
- 排版——主字体必须为 Inter;主标题必须 41px/500;正文必须 13px/400;标题用 text-balance、正文用 text-pretty;数字宜用 tabular-nums;除明确要求外不得修改字距。
- 间距与圆角——必须使用 4px 网格;默认间隙 5px;圆角取自 10px、15px、17px、18px、22px、24px;胶囊元素用 22px 以上;边框宽度限 1px、2px,默认圆角 15px。
- 布局与交互——按 1920px 基准视口设计;整屏高度用 h-dvh 而非 h-screen;固定元素需尊重 safe-area-inset;聚焦必须用 2px accent 轮廓加 2px 偏移;禁用态用 opacity 0.5 与 cursor: not-allowed;图标按钮必须加 aria-label;破坏性操作必须用 AlertDialog。
- 动画与性能——除非明确要求否则不加动画;只动画 transform 与 opacity;交互反馈不超过 200ms;尊重 prefers-reduced-motion。
使用方式:本资料未提供安装命令或调用示例,仅以规范文档形式供代理在生成界面时遵循。
限制:本资料为特定设计系统的约束性指南,并非可直接运行的软件包;未提供收费、价格、平台支持范围等信息;部分规范存在“必须”“应当”“从不”等强制程度差异,需按原文区分执行。