跳到主要内容
界面图谱Interface Atlas
☰
EN
风格Style / Visual Language

装饰艺术

Art Deco

别名:盖茨比风格黑金几何风对称奢华风deco

这是什么

以几何秩序、对称构图、放射线和阶梯轮廓构成鲜明装饰感的视觉语言。网页中的现代演绎常使用深色底、金属色细线和展示字体,强调仪式感与主次节奏。装饰应集中于标题、边框和关键视觉;正文、表单和导航仍需保留简洁清楚的阅读与操作方式。

开发规格

字体

展示性衬线标题,短标签增加字距。

色彩

午夜蓝黑、暖金;正文用柔和浅色。

边框

细直线、双层边框、阶梯轮廓。

阴影

不依赖阴影,以边线分出层次。

间距

轴线对齐,留白对称,移动端收敛装饰。

动效

200–300ms ease-out 的优雅淡入与描边展开,尊重 prefers-reduced-motion

状态反馈

hover 金色描边增亮;focus 用双层金色可见外框;active 描边收紧;disabled 降为暗金;error 用红金强调,保持轴对称

风格演示

同一张页面,直接操作

Explore 打开晚宴意向表,填写称呼、日期、人数并保存对应结果,可返回修改;Collection 与 About 展示夜晚体验和品牌信息,明确仅本地意向并非实际订位。

整页预览 · 直接交互

独立打开 ↗

使用时关注什么

  • 01逐一操作 THE AURELIA 原导航和主 CTA,检查对应内容与返回路径,不只是点击提示。
  • 02完成上述 THE AURELIA 操作后修改输入或撤销,检查结果与状态同步。
  • 03用键盘和 390px / 320px 检查重排、焦点、校验;区分工具栏重载和内部清空,核对刷新后状态复位。

✓ 适用场景

  • 精品酒店、文化活动、餐饮与展览页面。
  • 希望表达典雅与仪式感的品牌首屏。

✕ 不适用场景

  • 高频业务后台不宜使用繁复装饰。
  • 细金线不能替代文字和控件的可见边界。

常见形式

午夜黑金

Midnight gold

深蓝黑与暖金组成戏剧性对比。

翡翠金

Emerald gold

深绿底色配对称几何结构。

实现要点

borderletter-spacingSVG pathgrid

THE AURELIA 以午夜蓝黑、暖金与深绿构成晚宴空间。右侧使用独立于文字的金线拱廊 SVG、菱形 A 字章与透视地面;晚宴结果卡延续拱形双线轮廓。标题减轻字重,短标签加字距;280ms 淡入和保存描边反馈,表单保留完整矩形输入范围。

交给 AI

四层 Prompt 从「它是什么」一路写到「可直接执行的任务」;切到 Agent 任务层,还能叠加视觉风格与附加要求,再一键复制给你的 Coding Agent。

用当前风格完成 THE AURELIA 同品牌完整页面,从原首屏延续到内容、具体操作结果和返回路径,而非孤立控件或局部 demo。保留品牌、首屏文案、素材、构图、tokens 与全部 variants。以当前 YAML preview 为品牌、原导航与 CTA 的事实来源,不替换成通用营销模板。

THE AURELIA 以午夜蓝黑、暖金与深绿构成晚宴空间。右侧使用独立于文字的金线拱廊 SVG、菱形 A 字章与透视地面;晚宴结果卡延续拱形双线轮廓。标题减轻字重,短标签加字距;280ms 淡入和保存描边反馈,表单保留完整矩形输入范围。

复用当前 preview.tokens:背景 #151c24;前景 #e8ce92;强调 #d7b571 / #151c24;卡面 #25312e;边框 #a88b51;圆角 0px;字体 Georgia, serif;卡影 none。

dark 与 variants 延续已有工作区模式;style-signatures.css 负责本品牌主视觉、续页和微交互,封面与整页共用同一 renderer。

完整页面操作:
Explore 打开晚宴意向表,填写称呼、日期、人数并保存对应结果,可返回修改;Collection 与 About 展示夜晚体验和品牌信息,明确仅本地意向并非实际订位。

静态封面、详情演示与 /style-scenes/art-deco/(英文 /en/style-scenes/art-deco/)共用 renderer;静态封面不嵌套真实按钮,详情在独立文档中启用同款页面的语义控件与品牌内容延续。原导航和 CTA 必须到达对应内容或工作流,不用占位链接、仅变颜色或一句 toast 代替结果。

操作状态仅存在当前页面内存;刷新、工具栏重载/重置与模式切换均恢复初始状态,不使用 localStorage 或 sessionStorage。页内清空/重置用于撤销本次操作,不暗示跨页或持久保存。

提供返回、取消或清空/重置路径,说明仅当前页内存的状态边界;不伪装真实支付、邮件、登录、AI 或云同步。桌面、390px、320px 按内容换行重排,保留可读字号和触控目标,不整体缩小桌面页。控件有可访问名称、键盘操作、可见焦点;弹层支持关闭和焦点返回,表单校验与结果可被辅助技术读到;尊重 prefers-reduced-motion。

不新增依赖。检查中英文、原导航与 CTA、具体结果、返回/重置和窄屏重排;报告实际运行的检查与待验项,不将实现要求写成已通过结论。

附加要求:
- 支持深色模式
- 尊重 prefers-reduced-motion
- 不新增依赖
- 完成后运行现有检查并列出修改文件

可直接交给 Coding Agent,可叠加风格与附加要求

相关概念

包豪斯Bauhaus

用基础几何与三原色做构成游戏的视觉语言:圆 三角 方三种形状,红 黄 蓝 三原色加黑,不对称但平衡的构图,装饰服从功能。每一块色面与线条都参与 结构,海报像一场几何关系的研究。

风格相似概念
杂志编辑风Editorial

把页面当作杂志版面经营的视觉语言:衬线大标题、首字下沉、细分栏、章节 编号与发丝分隔线,图文穿插而节奏如翻页。黑白灰为底、衬线与无衬线搭配, 用版式语言讲故事,而非用装饰堆砌氛围。

风格相似概念
复古未来主义Retro-Futurism

"过去的人想象中的未来"的视觉语言:奶油橙棕的暖色底、粗圆角机身、轨道线 与星球贴纸、像素化屏幕与 CRT 荧光,乐观却已过时的科技感。它把登机舱 仪表盘、老式家电与太空竞赛海报揉成一种温暖的怀旧未来。

风格相似概念
按钮Button

用可点击的色块触发一个明确的动作,是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作,按压时有即时的下沉反馈, 繁忙时进入加载态并禁用点击,防止重复提交。

组件影响组件

参考来源

Markdown 版(给 Agent) · JSON