Art Deco 装饰艺术(Art Deco)

Scope: This entry covers the ornamental 1920s–30s Deco look and its later revivals as a UI and branding style. Its chrome-and-speed-lines 1930s offshoot, Streamline Moderne, is a related but distinct flavor; the era's functional-geometry movement across the Atlantic is Bauhaus.

范围:本条涵盖 1920–30 年代装饰性的 Deco 面貌及其后来的复兴,作为一种 UI 与品牌风格。它 1930 年代那个镀铬加速度线的分支叫 Streamline Moderne(流线型现代),相关但不同;同时代大西洋对岸的功能几何运动,见包豪斯。

Midnight Drive
Neon Coast
1:123:48

标本可交互 —— 点点看。Specimen is live — try it.

If you called it…如果你管它叫……

“great gatsby party invitation style”「了不起的盖茨比派对请柬风」“black and gold fancy 1920s look”「黑金配色的华丽 1920 年代感」“gold lines and sun rays vintage luxury design”「金线加太阳放射纹的复古奢华设计」“roaring twenties geometric borders”「咆哮二十年代的几何边框」“old hollywood glam wedding website style”「老好莱坞华丽婚礼网站风」“that chrysler building looking gold and black ui”「长得像克莱斯勒大厦的那种黑金 UI」

Full style DNA完整风格 DNA

  1. Mirror symmetry镜像对称 layout defining定义特征

    Everything hangs on one vertical center axis: ornaments, frames and type blocks mirror exactly left-to-right, often in nested symmetrical tiers. An off-center layout instantly stops reading as Deco.

    所有元素都挂在一根垂直中轴线上:纹样、边框和文字块左右精确镜像,常套着层层对称的嵌套结构。构图一旦偏心,立刻就不像装饰艺术了。

  2. Sunburst and fan motifs太阳放射纹与扇形纹样 imagery defining定义特征

    Rays radiating from a single point (sunburst), scalloped fan shells, chevrons and zigzag bands — the canonical ornament kit, drawn as thin gold strokes 1–2px wide.

    从同一个点向外辐射的光芒线(太阳纹)、贝壳扇面、人字折线与锯齿带 —— 装饰艺术的标准纹样库,一律用 1–2px 的细金线绘制。

  3. Stepped ziggurat forms阶梯收分轮廓 geometry defining定义特征

    Silhouettes recede in symmetric stair-steps — three to five shrinking tiers like the Chrysler Building crown — used for frame corners, badges and panel tops.

    轮廓以对称的台阶逐级收分 —— 三到五层递减,像克莱斯勒大厦的塔冠 —— 用在边框转角、徽章和面板顶部。

  4. Gold on black, jewel accents黑底描金配宝石色 color defining定义特征

    Metallic gold linework (#c9a227, highlights #f0dc9a) on near-black lacquer (#0b0b0e), accented with deep emerald, sapphire or ruby; pastels or flat primaries break the spell.

    金属金线条(#c9a227,高光 #f0dc9a)压在近黑漆色(#0b0b0e)上,点缀深翡翠绿、宝蓝或酒红;马卡龙色或扁平原色一出现,味道就破了。

  5. Gilded all-caps lettering描金全大写题字 typography defining定义特征

    Headings set in ALL CAPS geometric or high-contrast display faces with letter-spacing 0.15–0.35em, rendered in gold — reading like inscriptions over a hotel entrance.

    标题用几何体或高对比展示字体的全大写,letter-spacing 0.15–0.35em,渲染成金色 —— 读起来像酒店大门上方的铭文。

  6. Hairline double rules细密双线框 surface supporting辅助特征

    Borders are paired strokes — a 2px gold line with a 1px inner hairline 4–6px inside it, mimicking engraved gilt frames. A single thick black border reads as neobrutalism, not Deco.

    边框是成对的线条 —— 2px 金线,向内 4–6px 再压一道 1px 细线,模仿刻金画框。单条粗黑边读起来是新粗野主义,不是装饰艺术。

  7. Gold, chrome or copper金色、铬色还是铜色 color variable可变特征

    Yellow gold is the default, but chrome-silver (the Streamline Moderne branch) and copper read equally Deco; what matters is metallic contrast on a dark ground, not the hue.

    黄金色是默认,但铬银(Streamline Moderne 一支)和红铜同样成立;关键是金属压深底的对比,不是具体色相。

  8. Flat primary-color blocks扁平原色块 color avoid避免

    Flat red/yellow/blue blocks on white with asymmetric grids and bare grotesk type belong to Bauhaus and De Stijl — ornament-free primaries are a different movement that happens to share the decade.

    白底上扁平的红黄蓝色块、不对称网格和素面 grotesk 字体属于包豪斯与风格派 —— 零装饰的原色是恰好同年代的另一场运动。

Often confused with: Bauhaus最容易混淆:包豪斯(Bauhaus)

Midnight Drive
Neon Coast
1:123:48

Art Deco装饰艺术(Art Deco)

Midnight Drive
Neon Coast
1:123:48

Bauhaus包豪斯(Bauhaus)

This is Art Deco because the geometry is ornamental luxury: mirror symmetry, gilded linework, sunburst and fan motifs, jewel tones on black — the decoration itself is the point, not a byproduct.

这是装饰艺术,因为这里的几何是装饰性的奢华:镜像对称、描金线条、太阳纹与扇形纹样、黑底宝石色 —— 装饰本身就是目的,不是副产品。

It would become Bauhaus if the ornament were stripped away and the symmetry broken — asymmetric grid, flat primary-color blocks, unadorned grotesk type, and not a gram of gold left.

如果把装饰剥光、打破对称 —— 不对称网格、扁平原色块、无饰 grotesk 字体,一克金都不剩 —— 就变成包豪斯了。

Compare: Art Deco vs Bauhaus →对比页 →

In code — optional starting points代码写法 —— 可选起点

Double-rule gilded frame (2px line + inner hairline)

border: 2px solid #c9a227;
box-shadow: inset 0 0 0 5px #0b0b0e, inset 0 0 0 6px #c9a227; /* black gap, then the hairline */

Sunburst fan — rays radiating from bottom-center

background: repeating-conic-gradient(from -90deg at 50% 100%, rgba(201,162,39,.9) 0deg 2deg, transparent 2deg 11deg);

Gilded all-caps display type as utilities

uppercase tracking-[0.28em] font-bold bg-gradient-to-b from-[#f0dc9a] via-[#c9a227] to-[#9c7f22] bg-clip-text text-transparent

Style brief — paste into your agent风格 Brief —— 粘贴给你的代理

Build the surface as 1920s–30s Art Deco. Ground: near-black lacquer #0b0b0e; optional deep emerald panel #0f3d2e. Metal: gold linework — stops #f0dc9a/#c9a227/#9c7f22 (highlight/base/shade) as vertical gradients on strokes and display text (background-clip: text). Composition: strict mirror symmetry on one vertical axis; hero centered. Typography: ALL CAPS display face (Cinzel, Poiret One or Didot; fallback Georgia), letter-spacing 0.2–0.35em, headings in gradient gold; body small, sentence case, ivory #efe9dc. Ornament kit: sunburst fan — repeating-conic-gradient, ~2deg gold rays on 11deg spacing from bottom-center; stepped ziggurat corners on frames/badges; paired border rules: 2px gold stroke plus 1px inner hairline 4–6px inside (box-shadow: inset 0 0 0 5px #0b0b0e, inset 0 0 0 6px #c9a227). Cut button corners into octagons (clip-path). Depth comes from metal and line, never blurred drop shadows. Motion: almost none — one fade, or rays turning over 40s at most. Avoid: primary-color blocks, asymmetry, bubble radii, soft shadows, caps body text — that way lies Bauhaus or kitsch.

把界面搭成 1920–30 年代的装饰艺术(Art Deco)。底色:近黑漆色 #0b0b0e;可选深翡翠绿面板 #0f3d2e。金属:描金线条 —— 色端 #f0dc9a/#c9a227/#9c7f22(高光/基色/暗部),以垂直渐变用在描边和展示文字上(background-clip: text)。构图:围绕一根垂直中轴线严格镜像对称,主视觉居中。字体:全大写展示字体(Cinzel、Poiret One 或 Didot;兜底 Georgia),letter-spacing 0.2–0.35em,标题用渐变金;正文小字号、句子式大小写、象牙白 #efe9dc。纹样库:太阳放射扇面 —— repeating-conic-gradient,约 2deg 金光芒、11deg 间隔、从底部中点辐射;边框和徽章转角用阶梯收分;成对边框线:2px 金描边,向内 4–6px 再压 1px 细线(box-shadow: inset 0 0 0 5px #0b0b0e, inset 0 0 0 6px #c9a227)。按钮用 clip-path 切成八边形。纵深感来自金属和线条,绝不用模糊投影。动效:能省则省 —— 一次淡入,或光芒 40s 转一圈封顶。避免:原色块、不对称、泡泡圆角、柔和阴影、小号全大写正文 —— 那样只会滑向包豪斯或廉价俗套。

Accessibility & misuse可访问性与误用

Gradient gold text fails silently: on #0b0b0e the base gold #c9a227 measures about 8.1:1, but a dark stop like #8a6d1d drops to 4.0:1 — keep every gradient stop at #9c7f22 (5.1:1) or lighter, or set the text in solid #c9a227.

渐变金字会悄悄失守:在 #0b0b0e 上,基色金 #c9a227 实测约 8.1:1,但 #8a6d1d 这样的暗色端会掉到 4.0:1 —— 渐变每个色端都保持 #9c7f22(5.1:1)或更亮,或者文字直接用纯色 #c9a227。

ALL CAPS with 0.2em+ tracking is measurably slower to read and harder for dyslexic and low-vision users — reserve it for headings and short labels, and set body copy in sentence case with normal spacing. Dense ray and zigzag patterns cause visual vibration; keep ornament out of text zones and mark decorative layers aria-hidden.

全大写加 0.2em 以上的字距会实测拖慢阅读,对阅读障碍和低视力用户更不友好 —— 只留给标题和短标签,正文用句子式大小写和正常字距。密集的光芒和锯齿纹样会造成视觉颤动;把装饰挡在文字区之外,装饰层标 aria-hidden。

Rotating sunbursts and shimmer must stop under prefers-reduced-motion. Gradient text made with background-clip disappears entirely in Windows forced-colors mode — add a @media (forced-colors: active) fallback that resets it to solid CanvasText with background: none.

旋转的太阳纹和流光必须在 prefers-reduced-motion 下停止。用 background-clip 做的渐变文字在 Windows forced-colors 模式下会整个消失 —— 加一条 @media (forced-colors: active) 兜底,重置为纯色 CanvasText 并 background: none。

Origin起源

Named after the Exposition internationale des arts décoratifs et industriels modernes held in Paris in 1925 — though the label only stuck after Bevis Hillier's 1968 book 'Art Deco of the 20s and 30s'. The look had crystallized in 1910s–20s France around designers such as furniture maker Émile-Jacques Ruhlmann, absorbing Cubist geometry and, after Tutankhamun's tomb was opened in 1922, Egyptian sunburst and stepped forms. In America it became the architecture of ambition: William Van Alen's Chrysler Building (1930) crowned New York with a stainless-steel sunburst, followed by the Empire State Building (1931). Depression-era and wartime austerity ended the party, and Baz Luhrmann's 2013 film 'The Great Gatsby' later gave the black-and-gold revival its pop-culture template.

名字来自 1925 年在巴黎举办的国际装饰艺术与现代工业博览会(Exposition internationale des arts décoratifs et industriels modernes)—— 但这个称呼要到 Bevis Hillier 1968 年的著作《Art Deco of the 20s and 30s》才真正流行开来。这种面貌在 1910–20 年代的法国已经成形,以家具设计师 Émile-Jacques Ruhlmann 等人为代表,吸收了立体派几何;1922 年图坦卡蒙墓开启后,又融入埃及风格的太阳纹与阶梯造型。到了美国,它成了野心勃勃的建筑语言:William Van Alen 设计的克莱斯勒大厦(1930)用不锈钢太阳纹塔冠加冕纽约,帝国大厦(1931)紧随其后。大萧条与战时紧缩终结了这场盛宴;Baz Luhrmann 2013 年的电影《了不起的盖茨比》则为后来的黑金复兴提供了流行文化模板。

See also相关词条