装饰艺术
Art Deco
别名:盖茨比风格黑金几何风对称奢华风deco
这是什么
以几何秩序、对称构图、放射线和阶梯轮廓构成鲜明装饰感的视觉语言。网页中的现代演绎常使用深色底、金属色细线和展示字体，强调仪式感与主次节奏。装饰应集中于标题、边框和关键视觉；正文、表单和导航仍需保留简洁清楚的阅读与操作方式。
开发规格
字体
展示性衬线标题，短标签增加字距。
色彩
午夜蓝黑、暖金；正文用柔和浅色。
边框
细直线、双层边框、阶梯轮廓。
阴影
不依赖阴影，以边线分出层次。
间距
轴线对齐，留白对称，移动端收敛装饰。
动效
200–300ms ease-out 的优雅淡入与描边展开，尊重 prefers-reduced-motion
状态反馈
hover 金色描边增亮；focus 用双层金色可见外框；active 描边收紧；disabled 降为暗金；error 用红金强调，保持轴对称
风格演示
先看整页效果，再试交互场景整页预览
An evening,
extraordinary.
为值得铭记的夜晚，预留一个位置。
Explore →交互场景
正在加载演示…
✓ 适用场景
- 精品酒店、文化活动、餐饮与展览页面。
- 希望表达典雅与仪式感的品牌首屏。
✕ 不适用场景
- 高频业务后台不宜使用繁复装饰。
- 细金线不能替代文字和控件的可见边界。
常见形式
午夜黑金
Midnight gold
深蓝黑与暖金组成戏剧性对比。
翡翠金
Emerald gold
深绿底色配对称几何结构。
实现要点
borderletter-spacingSVG pathgrid用 SVG 绘制放射线和阶梯形装饰，语义内容独立于装饰层。金色只作为强调，正文需有足够对比。窄屏保持标题和表单的完整宽度，减少外围装饰。
交给 AI
四层 Prompt 从「它是什么」一路写到「可直接执行的任务」；切到 Agent 任务层，还能叠加视觉风格与附加要求，再一键复制给你的 Coding Agent。
先检查项目的布局、字体和主题变量，以装饰艺术风格完成一个可交互品牌场景。 展示性衬线标题，短标签增加字距。午夜蓝黑、暖金；正文用柔和浅色。细直线、双层边框、阶梯轮廓。不依赖阴影，以边线分出层次。轴线对齐，留白对称，移动端收敛装饰。 用 SVG 绘制放射线和阶梯形装饰，语义内容独立于装饰层。金色只作为强调，正文需有足够对比。窄屏保持标题和表单的完整宽度，减少外围装饰。 按钮必须有明确反馈，窄屏可用，保留焦点和 reduced-motion 支持，不新增依赖。完成后运行检查并列出修改文件。 附加要求： - 支持深色模式 - 尊重 prefers-reduced-motion - 不新增依赖 - 完成后运行现有检查并列出修改文件
可直接交给 Coding Agent，可叠加风格与附加要求
相关概念
用基础几何与三原色做构成游戏的视觉语言：圆 三角 方三种形状，红 黄 蓝 三原色加黑，不对称但平衡的构图，装饰服从功能。每一块色面与线条都参与 结构，海报像一场几何关系的研究。
风格相似概念把页面当作杂志版面经营的视觉语言：衬线大标题、首字下沉、细分栏、章节 编号与发丝分隔线，图文穿插而节奏如翻页。黑白灰为底、衬线与无衬线搭配， 用版式语言讲故事，而非用装饰堆砌氛围。
风格相似概念"过去的人想象中的未来"的视觉语言：奶油橙棕的暖色底、粗圆角机身、轨道线 与星球贴纸、像素化屏幕与 CRT 荧光，乐观却已过时的科技感。它把登机舱 仪表盘、老式家电与太空竞赛海报揉成一种温暖的怀旧未来。
风格相似概念用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件影响组件