Steampunk 蒸汽朋克（Steampunk）
Steampunk dresses the interface in the brass, leather and rivets of a Victorian machine room that never was: warm sepia grounds, burnished copper and bronze, gear-edged frames, engraved serif lettering, pressure-gauge meters and visible mechanical fasteners. It is retro-futurism from the age of steam — the screen pretending to be a 19th-century astrolabe, pocket watch or steamship console rather than a digital surface.
蒸汽朋克把界面装扮成一座从未存在的维多利亚机械车间：温暖的 sepia 底色、抛光铜与黄铜、齿轮边框、镌刻衬线字体、压力表刻度，以及外露的铆钉与螺丝。它是来自蒸汽时代的复古未来主义——屏幕假装自己是 19 世纪的星盘、怀表或蒸汽船仪表板，而不是一块数字平面。
Scope: This entry covers the Victorian/Industrial-Revolution retro-futurist visual style as applied to UI. It does not cover the 1920s–40s streamlined machine aesthetic (Dieselpunk) or the geometric luxury of Art Deco, both of which sit in different centuries and moods.
范围：本条覆盖维多利亚/工业革命复古未来主义在 UI 中的视觉风格。它不包含 1920–40 年代的流线型机械美学（Dieselpunk），也不包含几何奢华的 Art Deco；它们属于不同的世纪与情绪。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Brass, copper and sepia palette黄铜、铜与 sepia 配色 color defining定义特征
The dominant reads are warm metal — brass #d4a35b, burnished copper #b87333, dark bronze #6e4c2e — against sepia parchment #e6dcc8 or chocolate leather #4a3425, never cool chrome or neon.
主导是暖金属：黄铜 #d4a35b、抛光铜 #b87333、深青铜 #6e4c2e，衬在 sepia 羊皮纸 #e6dcc8 或巧克力皮革 #4a3425 上，绝不能是冷铬或霓虹。
-
Gear and mechanical frames齿轮与机械边框 geometry defining定义特征
Panels sit inside cogwheel borders, riveted straps, or stepped brass bezels; the frame itself advertises the machine rather than hiding it.
面板嵌在齿轮边框、铆接带或阶梯式黄铜表圈里；边框本身在炫耀机械，而不是隐藏它。
-
Victorian engraved serif维多利亚镌刻衬线 typography defining定义特征
Headings and labels use high-contrast serifs (Georgia, Times New Roman, or similar), often small-caps, with letter-spacing around 0.04em and a faint highlight to suggest engraved metal or letterpress.
标题与标签使用高对比衬线（Georgia、Times New Roman 或类似字体），常配合 small-caps，字间距约 0.04em，并带一道微高光，像镌刻金属或活字印刷。
-
Riveted fasteners铆钉紧固件 surface defining定义特征
Buttons and plates are studded with small circular rivets or screws at the corners; the fastener is treated as ornament, not a bug.
按钮与金属板四角点缀着小圆铆钉或螺丝；紧固件被当作装饰，而非瑕疵。
-
Steam-pressure gauges蒸汽压力表 imagery defining定义特征
Progress bars, dials and readouts are styled as analog gauges — horizontal tubes with brass casings, tick marks and a copper needle or fill.
进度条、刻度盘和读数都设计成模拟仪表——带黄铜外壳、刻度线与铜指针或填充的水平管。
-
Leather and dark wood panels皮革与深色木板 surface supporting辅助特征
Large surfaces read as tooled leather, dark walnut or tarnished metal plate, usually with an inset shadow to suggest depth and wear.
大面积表面像压花皮革、深色胡桃木或氧化金属板，通常带内阴影以表现深度与磨损。
-
Sepia warmth and tarnishsepia 暖调与氧化 color supporting辅助特征
Everything is warmed by a sepia overlay or vignette; bright white and pure grey look out of place unless they read as porcelain enamel.
所有东西都被 sepia 叠加或暗角加温；纯白色与纯灰色会显得格格不入，除非它们读起来像搪瓷。
-
Geometric luxury symmetry几何奢华对称 geometry avoid避免
Mirror symmetry, gold sunbursts and lacquer-black glamour are Art Deco; Steampunk is asymmetrical, patched-together machinery.
镜像对称、金色旭日、黑漆 glamour 是 Art Deco；蒸汽朋克是不对称、拼凑而成的机械。
Often confused with: Art Deco最容易混淆：装饰艺术（Art Deco）
Steampunk蒸汽朋克（Steampunk）
Art Deco装饰艺术（Art Deco）
This is Steampunk because the materials are industrial-Victorian: burnished brass, copper, riveted leather and visible gears — asymmetrical, mechanical, and sepia-warm rather than gilded-luxury.
这是蒸汽朋克，因为材料是维多利亚工业的：抛光黄铜、铜、铆钉皮革和可见齿轮——不对称、机械感、sepia 暖调，而不是镀金奢华。
It would become Art Deco if the brass machinery were replaced by mirror symmetry, gold sunburst linework, black lacquer, and jewel-tone luxury ornament — geometry for glamour, not for engineering.
如果黄铜机械被替换成镜像对称、金色放射状线条、黑漆底和宝石色调的奢华装饰——为 glamour 服务而非工程——就变成 Art Deco 了。
In code — optional starting points代码写法 —— 可选起点
Riveted brass button
width: 42px; height: 42px; border-radius: 50%; border: 2px solid #6e4c2e; background: radial-gradient(circle at 30% 30%, #f0d6a6, #d4a35b 40%, #8c5e3c 90%); box-shadow: inset 0 1px 2px rgba(255,255,255,.55), inset 0 -2px 3px rgba(0,0,0,.35), 0 3px 5px rgba(0,0,0,.35), -13px -13px 0 -18px #5c4028, 13px -13px 0 -18px #5c4028, -13px 13px 0 -18px #5c4028, 13px 13px 0 -18px #5c4028;Victorian engraved heading
font-family: Georgia, 'Times New Roman', serif; font-variant: small-caps; letter-spacing: 0.04em; color: #3e2b1f; text-shadow: 0 1px 0 rgba(255,255,255,.25);Pressure-gauge progress track
height: 12px; border: 2px solid #b8864b; border-radius: 999px; background: linear-gradient(180deg, #4a3425, #2a1d14 45%, #1a120d); box-shadow: inset 0 2px 4px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.15);Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the interface as a Victorian machine-room console. Start with a warm sepia ground (#f5efe4 or #e6dcc8) and dark leather panels (#4a3425). Primary metals: brass #d4a35b, burnished copper #b87333, dark bronze #6e4c2e; add tarnish with linear-gradient(180deg, #e8c887, #b8864b 55%, #7a5428). Surfaces need inset highlights (box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.25)) and a 2px solid #5c4028 outer frame. Frames should read as brass gear borders — use an inline SVG border-image or repeating cog motif in #a67c3b. Typography: Victorian/Edwardian high-contrast serif (Georgia, 'Times New Roman', serif) for headings; letter-spacing 0.04em; small-caps labels in #3e2b1f. Buttons are riveted metal discs: 40–44px circles with radial-gradient brass, border 2px #6e4c2e, inset box-shadow 0 1px 1px rgba(255,255,255,.5), and four corner rivets. Progress bars become pressure gauges: a 10–12px channel inside a rounded brass casing (border 2px #b8864b, background #2a1d14), filled with copper gradient #d47f39 to #9e5b25 and overlaid with faint tick marks every 10%. Avoid Art Deco symmetry, chrome streamline, flat vector minimalism, neon, or screen-default sans-serif. Preserve contrast: dark #2e2119 text on sepia grounds and light labels on dark metal; keep focus rings as visible brass outlines.
把界面建成维多利亚机械车间控制台。先用温暖 sepia 底色（#f5efe4 或 #e6dcc8）和深色皮革面板（#4a3425）。主金属：黄铜 #d4a35b、抛光铜 #b87333、深青铜 #6e4c2e；用 linear-gradient(180deg, #e8c887, #b8864b 55%, #7a5428) 做出氧化渐变。表面需要内高光（box-shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -2px 0 rgba(0,0,0,.25)）和 2px solid #5c4028 外框。边框要读出黄铜齿轮感——用内联 SVG border-image 或重复的 #a67c3b 齿纹图案。字体：标题用维多利亚/爱德华时代高对比衬线（Georgia、'Times New Roman', serif），字间距 0.04em，small-caps 标签用 #3e2b1f。按钮是带铆钉的金属圆盘：40–44px 圆形，径向渐变黄铜，边框 2px #6e4c2e，内阴影 inset 0 1px 1px rgba(255,255,255,.5)，四角加铆钉。进度条做成压力表：10–12px 管道装在圆角黄铜壳里（border 2px #b8864b，背景 #2a1d14），填充铜色渐变 #d47f39 到 #9e5b25，并叠上每 10% 一格的淡刻度。避开 Art Deco 对称、镀铬流线、扁平矢量极简、霓虹，以及屏幕默认无衬线。保证对比度：sepia 底上用深色 #2e2119 文字，深色金属上用浅色标签；焦点环做成可见的黄铜外框。
Accessibility & misuse可访问性与误用
Sepia and brass palettes can hide contrast problems: dark #2e2119 text on #f5efe4 passes WCAG AAA, but light labels on copper or brass often fail — either darken the label or add a solid backing strip behind small text.
sepia 与黄铜配色容易掩盖对比度问题：#2e2119 文字在 #f5efe4 上满足 WCAG AAA，但浅色标签在铜或黄铜上通常不达标——要么加深标签，要么给小文字加实色衬底。
Victorian serifs and small-caps ornament look period-correct but hurt readability at small sizes; keep body text at 16px minimum, avoid blackletter or ultra-condensed display faces, and use the decorative serif for headings only.
维多利亚衬线与 small-caps 装饰虽符合时代感，却会损害小尺寸可读性；正文至少 16px，避免哥特体或超窄展示字体，只把装饰性衬线留给标题。
Any rotating gears, hissing steam, or ticking animations can trigger vestibular issues; honor prefers-reduced-motion by pausing rotation and removing parallax, and make sure all rivet buttons still have a visible focus state and a 44×44 CSS hit area.
任何旋转齿轮、喷蒸汽或滴答动画都可能诱发前庭问题；在 prefers-reduced-motion 下暂停旋转并移除视差，并确保所有铆钉按钮都有可见焦点状态与 44×44 CSS 点击区域。
Origin起源
The term was coined by science-fiction author K. W. Jeter in a 1987 letter to Locus magazine, where he jokingly proposed 'steampunk' as a label for the Victorian-set fiction he, Tim Powers and James Blaylock were writing — work that borrowed the speculative machinery of H. G. Wells and Jules Verne. The visual vocabulary grew from 19th-century industrial hardware — riveted boilers, brass instrumentation, pocket watches and leather-strapped aviator gear — and entered Web and game UI through retro-futurist projects such as Arcanum: Of Steamworks and Magick Obscura (2001).
这个词由科幻作家 K. W. Jeter 在 1987 年写给《Locus》杂志的一封信中创造，他半开玩笑地提议用“steampunk”来统称他与 Tim Powers、James Blaylock 正在创作的维多利亚背景小说——这些作品借用了 H. G. Wells 与 Jules Verne 的假想机械。视觉语汇来自 19 世纪工业硬件：铆接锅炉、黄铜仪表、怀表与皮革绑带的飞行员装备；随后通过复古未来主义项目进入 Web 与游戏 UI，例如《Arcanum: Of Steamworks and Magick Obscura》（2001）。