Style Atlas · 88 Styles
88 种风格由同一套组件骨架渲染，只换颜色、字体、圆角与材质——横向比较真实差别，不读形容词。
50 推荐 · 29 补充 · 9 已弃用（保留用于复刻旧项目）
显示 88 / 88 种风格
Design System
色彩、字体、圆角与材质，决定了界面的气质。
企业后台 · 文档站 · 专业工具
Design System
色彩、字体、圆角与材质，决定了界面的气质。
智能家居 · 控制面板 · 概念原型
Design System
色彩、字体、圆角与材质，决定了界面的气质。
SaaS 后台 · 音乐/媒体应用 · 仪表盘浮层
Design System
色彩、字体、圆角与材质，决定了界面的气质。
艺术项目 · 独立品牌 · 实验性页面
Design System
色彩、字体、圆角与材质，决定了界面的气质。
产品发布 · 硬件展示 · 品牌官网
Design System
色彩、字体、圆角与材质，决定了界面的气质。
创意机构 · 活动页 · 年轻向产品
Design System
色彩、字体、圆角与材质，决定了界面的气质。
夜间工具 · 开发者产品 · 移动端
Design System
色彩、字体、圆角与材质，决定了界面的气质。
公共服务 · 医疗教育 · 政企系统
Design System
色彩、字体、圆角与材质，决定了界面的气质。
儿童教育 · 消费级 App · 品牌活动
Design System
色彩、字体、圆角与材质，决定了界面的气质。
AI 产品 · 品牌落地页 · 发布会
Design System
色彩、字体、圆角与材质，决定了界面的气质。
游戏 · 音乐发行 · 潮流品牌
Design System
色彩、字体、圆角与材质，决定了界面的气质。
工具应用 · 后台系统 · 跨端产品
Design System
色彩、字体、圆角与材质，决定了界面的气质。
怀旧产品 · 教育演示 · 品牌彩蛋
Design System
色彩、字体、圆角与材质，决定了界面的气质。
iOS / macOS 应用 · 系统级控件
Design System
色彩、字体、圆角与材质，决定了界面的气质。
品牌官网 · 产品发布 · 互动叙事
Design System
色彩、字体、圆角与材质，决定了界面的气质。
表单流程 · 移动应用 · 高频操作工具
Design System
色彩、字体、圆角与材质，决定了界面的气质。
公共服务 · 医疗健康 · 老龄用户产品
Design System
色彩、字体、圆角与材质，决定了界面的气质。
智能助手 · 语音设备 · 自动化流程
Design System
色彩、字体、圆角与材质，决定了界面的气质。
SaaS 后台 · 健康应用 · 现代消费产品
Design System
色彩、字体、圆角与材质，决定了界面的气质。
品牌落地页 · 产品发布（已弃用）
Design System
色彩、字体、圆角与材质，决定了界面的气质。
注册落地页 · 电商促销（已弃用）
Design System
色彩、字体、圆角与材质，决定了界面的气质。
B2B SaaS 官网 · 功能对比页（已弃用）
Design System
色彩、字体、圆角与材质，决定了界面的气质。
单页产品 · 个人作品（已弃用）
课程/工具落地页 · 订阅转化（已弃用）
Design System
色彩、字体、圆角与材质，决定了界面的气质。
开发者工具 · 试用页（已弃用）
金融 · 医疗 · 企业采购（已弃用）
Design System
色彩、字体、圆角与材质，决定了界面的气质。
品牌官网 · 公益传播（已弃用）
Design System
色彩、字体、圆角与材质，决定了界面的气质。
运营后台 · 监控中心 · 内部工具
Design System
色彩、字体、圆角与材质，决定了界面的气质。
行为分析 · 资源调度 · 排班
Design System
色彩、字体、圆角与材质，决定了界面的气质。
经营驾驶舱 · 投后管理
Design System
色彩、字体、圆角与材质，决定了界面的气质。
运维大屏 · IoT · 交易风控
Design System
色彩、字体、圆角与材质，决定了界面的气质。
BI 平台 · 财务分析 · 用户增长
Design System
色彩、字体、圆角与材质，决定了界面的气质。
竞品分析 · A/B 实验 · 期间对比
Design System
色彩、字体、圆角与材质，决定了界面的气质。
需求预测 · 风险管理 · 增长建模
Design System
色彩、字体、圆角与材质，决定了界面的气质。
增长分析 · 漏斗优化 · 留存
Design System
色彩、字体、圆角与材质，决定了界面的气质。
财务系统 · 交易终端 · 预算管理
Design System
色彩、字体、圆角与材质，决定了界面的气质。
CRM · 销售管理 · 业绩复盘
Design System
色彩、字体、圆角与材质，决定了界面的气质。
年轻品牌 · 创作者工具 · 活动页
Design System
色彩、字体、圆角与材质，决定了界面的气质。
产品官网 · 功能总览 · 个人主页
Design System
色彩、字体、圆角与材质，决定了界面的气质。
潮流品牌 · 音乐视觉 · 限定活动
Design System
色彩、字体、圆角与材质，决定了界面的气质。
游戏 HUD · 黑客主题 · 音乐产品
Design System
色彩、字体、圆角与材质，决定了界面的气质。
健康 · 农业 · 可持续品牌
Design System
色彩、字体、圆角与材质，决定了界面的气质。
AI 助手 · Copilot · 生成式工具
Design System
色彩、字体、圆角与材质，决定了界面的气质。
活动视觉 · 儿童产品 · 创意工作室
Design System
色彩、字体、圆角与材质，决定了界面的气质。
音乐视觉 · 潮流联名 · 亚文化社区
Design System
色彩、字体、圆角与材质，决定了界面的气质。
设计工具 · 空间型后台 · 卡片流
Design System
色彩、字体、圆角与材质，决定了界面的气质。
作品集 · 高端品牌 · 概念发布
Design System
色彩、字体、圆角与材质，决定了界面的气质。
品牌片头 · 活动页 · 音乐视觉
Design System
色彩、字体、圆角与材质，决定了界面的气质。
品牌故事 · 年度报告 · 展览页面
Design System
色彩、字体、圆角与材质，决定了界面的气质。
设计工作室 · 文化机构 · 产品官网
Design System
色彩、字体、圆角与材质，决定了界面的气质。
游戏界面 · 数据大屏 · 影视概念
Design System
色彩、字体、圆角与材质，决定了界面的气质。
独立游戏 · 复古社区 · 彩蛋页面
Design System
色彩、字体、圆角与材质，决定了界面的气质。
旧版产品官网（已弃用）
Design System
色彩、字体、圆角与材质，决定了界面的气质。
空间计算 · AR/VR · 沉浸式应用
Design System
色彩、字体、圆角与材质，决定了界面的气质。
阅读应用 · 笔记工具 · 慢科技产品
Design System
色彩、字体、圆角与材质，决定了界面的气质。
潮流社区 · 快闪活动 · 亚文化内容
Design System
色彩、字体、圆角与材质，决定了界面的气质。
生物科技 · 未来材料 · 实验品牌
Design System
色彩、字体、圆角与材质，决定了界面的气质。
独立工作室 · 手工品牌 · 纪录片
Design System
色彩、字体、圆角与材质，决定了界面的气质。
实验性产品 · 品牌互动 · 移动端彩蛋
Design System
色彩、字体、圆角与材质，决定了界面的气质。
香氛 · 家居 · 慢生活品牌
Design System
色彩、字体、圆角与材质，决定了界面的气质。
创意工作室 · 互动作品集 · 展览
Design System
色彩、字体、圆角与材质，决定了界面的气质。
语音助手 · 车载 · 无障碍产品
Design System
色彩、字体、圆角与材质，决定了界面的气质。
电商 · 汽车/家具配置器 · 硬件
Design System
色彩、字体、圆角与材质，决定了界面的气质。
AI 产品 · Web3 · 品牌视觉
Design System
色彩、字体、圆角与材质，决定了界面的气质。
媒体 · 长报道 · 品牌内容站
Design System
色彩、字体、圆角与材质，决定了界面的气质。
实验视觉 · 音乐封面 · 故障艺术
Design System
色彩、字体、圆角与材质，决定了界面的气质。
摄影 · 咖啡/餐饮 · 独立出版
Design System
色彩、字体、圆角与材质，决定了界面的气质。
文化机构 · 设计展览 · 教育产品
Design System
色彩、字体、圆角与材质，决定了界面的气质。
阅读应用 · 高级时装 · 编辑型产品
Design System
色彩、字体、圆角与材质，决定了界面的气质。
流媒体 · 高端移动应用 · 内容社区
Design System
色彩、字体、圆角与材质，决定了界面的气质。
移动端 SaaS · 金融科技 · 效率工具
Design System
色彩、字体、圆角与材质，决定了界面的气质。
开发者工具 · 运维应用 · 极客彩蛋
Design System
色彩、字体、圆角与材质，决定了界面的气质。
潮流电商 · 音乐/球鞋 · 活动应用
Design System
色彩、字体、圆角与材质，决定了界面的气质。
工具类 App · 教育应用 · 轻量服务
Design System
色彩、字体、圆角与材质，决定了界面的气质。
Android 应用 · 系统工具 · 跨端设计系统
Design System
色彩、字体、圆角与材质，决定了界面的气质。
消费品牌 · 社交应用 · 年轻向活动
Design System
色彩、字体、圆角与材质，决定了界面的气质。
时尚品牌 · 展览 · 内容型应用
Design System
色彩、字体、圆角与材质，决定了界面的气质。
阅读/研究应用 · 出版 · 高等教育
Design System
色彩、字体、圆角与材质，决定了界面的气质。
游戏伴侣 · 加密应用 · 潮流工具
Design System
色彩、字体、圆角与材质，决定了界面的气质。
加密钱包 · 交易应用 · Web3
Design System
色彩、字体、圆角与材质，决定了界面的气质。
儿童/教育 App · 冥想 · 生活服务
Design System
色彩、字体、圆角与材质，决定了界面的气质。
企业移动办公 · CRM · 审批流
Design System
色彩、字体、圆角与材质，决定了界面的气质。
教育 · 手账/笔记 · 创意工具
Design System
色彩、字体、圆角与材质，决定了界面的气质。
智能硬件 App · 车载控制 · 概念稿
Design System
色彩、字体、圆角与材质，决定了界面的气质。
Microsoft 365 · Windows 应用 · 企业产品
Design System
色彩、字体、圆角与材质，决定了界面的气质。
电商后台 · 商家管理 · 运营工具
Design System
色彩、字体、圆角与材质，决定了界面的气质。
创意软件 · 专业工具 · 跨端套件
Design System
色彩、字体、圆角与材质，决定了界面的气质。
Creative Cloud · 新一代 Adobe 界面
没有匹配的风格，换个关键词试试。
每个预览都由同一副组件骨架构成：品牌栏、标题、正文、主次按钮、指标卡与柱状图。生成时只替换该风格的设计令牌（颜色、字体、圆角、描边、阴影、材质与特效类），因此差异都来自风格本身。
阅读指南 说明了字段含义、令牌推导方式，以及如何把这些风格用于真实项目。
上游数据把 9 条风格标记为 deprecated，插件检索默认排除它们。图鉴仍然展示，便于复刻旧项目或理解设计史；标注只是提示「不要作为新项目的首选」。
同理，29 条 supplemental 是补充条目，通常作为主风格的变体或细分场景使用。