Design VocabularyDesign vocabulary · Edition 01

VOCABULARY / ENTRY

Steampunk

steampunk

Add to comparison +

A retro-futurist visual language that brings nineteenth-century steam machinery into contemporary imagery: exposed gears, rivets, and pressure gauges; brass, copper, and leather materials; and Victorian display lettering with engraving-style fine-line illustration.

Illustration · Editorial artwork, no interactive specimen yet
A fictional FIELDNOTES cover on deep brown: exposed brass gears, rivets, and a pressure gauge around a Victorian display title, engraving-style fine-line ornament at the edges, and warm white placeholder text bars below.
A fictional FIELDNOTES cover on deep brown: exposed brass gears, rivets, and a pressure gauge around a Victorian display title, engraving-style fine-line ornament at the edges, and warm white placeholder text bars below.

Recognizing it

  • Exposed gears, rivets, pipes, and pressure gauges serve as decorative components
  • Brass, copper, and leather material cues, usually with worn highlights
  • Victorian display lettering with engraving-style fine-line illustration

Concept boundary

This entry covers only its side as a graphic language; it does not summarise steampunk as a science-fiction subgenre with its own narrative tradition, literary lineage, or costume subculture. Its key move is the anachronism of showing technology as people in the nineteenth century might have imagined it — gears and gauges act as visible explanatory devices. Brown tones or vintage photographs alone do not make the style. It runs opposite to cyberpunk, which imagines a near future in neon, darkness, and digital distortion, where steampunk imagines an alternative past in brass, mechanism, and engraving. It is also not simple antiquing: antiquing reproduces old objects, while steampunk deliberately invents machines that never existed.

When to consider it

  • The product narrative itself involves machinery, craft, or an imagined alternative history of technology
  • Abstract system behaviour needs to be made concrete through a visible mechanical metaphor
  • The format is large enough for engraving lines and gear detail to survive

When to be cautious

  • The interface needs a neutral visual skeleton that can evolve over time
  • Gears are stuck on as pure decoration beside functions that have nothing mechanical about them, misleading users about purpose
  • The low-contrast pairing of deep brown and brass is used directly for body text

Tradeoff

The mechanical metaphor makes a complex system feel graspable and tinkerable, at the cost of materials and fine engraving detail that fail quickly at small sizes and in dark, low-contrast settings — and it demands a lot from the subject matter.

Conditional rules · Editorial advice

When Mechanical elements such as gears and gauges appear beside functionsMustUse them only where they really correspond to a state or an action; keep purely decorative mechanical parts away from buttons and inputs so they are not mistaken for controls.
When Engraving-style fine-line illustration has to shrink to icon or list sizeRecommendedPrepare a simplified version with heavier strokes and fewer details, and check recognisability at the real minimum size.

Related entries

Skeuomorphism ↗Related, but different · The interface borrows physical form to explain function

Skeuomorphism borrows objects users have actually seen to explain purpose, while steampunk borrows machines that never existed, so its explanatory force comes from metaphor rather than experience.

Retro Computing Aesthetic ↗Conditional alternative · A nostalgic technological visual language is needed

Retro computing remembers early computer interfaces that really existed; steampunk imagines a mechanical path that never happened. They are nostalgic for different things.

Contrast and Legibility ↗Conditional conflict · Brass-colored text sits on deep brown or leather-textured grounds

Metallic color renders as a mid tone on screen, and over texture the resulting body-text contrast is often insufficient.

Sources and what they support

Wikipedia · Steampunk ↗

The article defines steampunk as a science-fiction subgenre whose retro-futuristic technology and aesthetics are prominently inspired by nineteenth-century industrial steam-powered machinery and design, often set in an alternative history of the Victorian era or the American frontier where steam power remains mainstream, and distinguished from Neo-Victorianism by showing technology as people in the nineteenth century might have envisioned it. This entry paraphrases the visual description from it; the interface guidance is editorial.

Retrieved: 2026-09-16 · Snapshot unconfirmed

Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.

Type extensions and implementation notes

This entry has no runnable specimen; the illustration is an editorial sketch of how the materials and mechanical motifs combine, not a verified implementation. Before shipping, confirm that mechanical elements are not mistaken for controls and measure contrast for brass-colored elements.

{
  "tokens": {
    "surface": "#2b2119",
    "ink": "#efe2cd",
    "accent": "#b98b3e",
    "radiusPx": 4,
    "shadow": "0 4px 16px rgba(0, 0, 0, 0.35)"
  },
  "tokenScope": "This sample recipe — deep brown ground, warm white ink, brass accent — sketches one reading of the material direction. Real work should re-pick values for its brand context and verify contrast for brass-colored text separately."
}
Full Agent entry JSON
{
  "id": "steampunk",
  "type": "visual",
  "name": {
    "zh": "蒸汽朋克",
    "en": "Steampunk"
  },
  "aliases": [
    "Steampunk Aesthetic",
    "蒸汽朋克视觉",
    "维多利亚机械风"
  ],
  "granularity": "experience",
  "intents": [
    "express-brand",
    "organize-content"
  ],
  "tags": [
    "gears",
    "brass",
    "Victorian",
    "retro-futurism",
    "machinery"
  ],
  "definition": "A retro-futurist visual language that brings nineteenth-century steam machinery into contemporary imagery: exposed gears, rivets, and pressure gauges; brass, copper, and leather materials; and Victorian display lettering with engraving-style fine-line illustration.",
  "boundary": "This entry covers only its side as a graphic language; it does not summarise steampunk as a science-fiction subgenre with its own narrative tradition, literary lineage, or costume subculture. Its key move is the anachronism of showing technology as people in the nineteenth century might have imagined it — gears and gauges act as visible explanatory devices. Brown tones or vintage photographs alone do not make the style. It runs opposite to cyberpunk, which imagines a near future in neon, darkness, and digital distortion, where steampunk imagines an alternative past in brass, mechanism, and engraving. It is also not simple antiquing: antiquing reproduces old objects, while steampunk deliberately invents machines that never existed.",
  "signature": [
    "Exposed gears, rivets, pipes, and pressure gauges serve as decorative components",
    "Brass, copper, and leather material cues, usually with worn highlights",
    "Victorian display lettering with engraving-style fine-line illustration"
  ],
  "when": [
    "The product narrative itself involves machinery, craft, or an imagined alternative history of technology",
    "Abstract system behaviour needs to be made concrete through a visible mechanical metaphor",
    "The format is large enough for engraving lines and gear detail to survive"
  ],
  "when_not": [
    "The interface needs a neutral visual skeleton that can evolve over time",
    "Gears are stuck on as pure decoration beside functions that have nothing mechanical about them, misleading users about purpose",
    "The low-contrast pairing of deep brown and brass is used directly for body text"
  ],
  "tradeoff": "The mechanical metaphor makes a complex system feel graspable and tinkerable, at the cost of materials and fine engraving detail that fail quickly at small sizes and in dark, low-contrast settings — and it demands a lot from the subject matter.",
  "comparison": {
    "focus": "Explaining a contemporary system through imagined nineteenth-century machinery",
    "mechanism": "Exposed gears and gauges, brass and leather materials, engraved fine lines",
    "cost": "Detail fails at small sizes and the subject fit is narrow"
  },
  "sources": [
    {
      "id": "steampunk-wikipedia",
      "title": "Wikipedia · Steampunk",
      "url": "https://en.wikipedia.org/wiki/Steampunk",
      "claim": "The article defines steampunk as a science-fiction subgenre whose retro-futuristic technology and aesthetics are prominently inspired by nineteenth-century industrial steam-powered machinery and design, often set in an alternative history of the Victorian era or the American frontier where steam power remains mainstream, and distinguished from Neo-Victorianism by showing technology as people in the nineteenth century might have envisioned it. This entry paraphrases the visual description from it; the interface guidance is editorial.",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://en.wikipedia.org/wiki/Steampunk",
        "status": "unconfirmed",
        "checkedAt": "2026-09-16T13:05:00.882Z",
        "error": "error:not-found",
        "jobId": "spn2-b5ba057fa57fa31e77b319a0c4dbb3929122cbf1"
      }
    }
  ],
  "relations": [
    {
      "target": "skeuomorphism",
      "kind": "related",
      "condition": "The interface borrows physical form to explain function",
      "reason": "Skeuomorphism borrows objects users have actually seen to explain purpose, while steampunk borrows machines that never existed, so its explanatory force comes from metaphor rather than experience.",
      "basis": "editorial"
    },
    {
      "target": "retro-computing",
      "kind": "alternative",
      "condition": "A nostalgic technological visual language is needed",
      "reason": "Retro computing remembers early computer interfaces that really existed; steampunk imagines a mechanical path that never happened. They are nostalgic for different things.",
      "basis": "editorial"
    },
    {
      "target": "contrast-legibility",
      "kind": "conflicts_when",
      "condition": "Brass-colored text sits on deep brown or leather-textured grounds",
      "reason": "Metallic color renders as a mid tone on screen, and over texture the resulting body-text contrast is often insufficient.",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "Mechanical elements such as gears and gauges appear beside functions",
      "instruction": "Use them only where they really correspond to a state or an action; keep purely decorative mechanical parts away from buttons and inputs so they are not mistaken for controls.",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "Engraving-style fine-line illustration has to shrink to icon or list size",
      "instruction": "Prepare a simplified version with heavier strokes and fewer details, and check recognisability at the real minimum size.",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "visual": {
    "tokens": {
      "surface": "#2b2119",
      "ink": "#efe2cd",
      "accent": "#b98b3e",
      "radiusPx": 4,
      "shadow": "0 4px 16px rgba(0, 0, 0, 0.35)"
    },
    "tokenScope": "This sample recipe — deep brown ground, warm white ink, brass accent — sketches one reading of the material direction. Real work should re-pick values for its brand context and verify contrast for brass-colored text separately."
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "This entry has no runnable specimen; the illustration is an editorial sketch of how the materials and mechanical motifs combine, not a verified implementation. Before shipping, confirm that mechanical elements are not mistaken for controls and measure contrast for brass-colored elements.",
  "image": {
    "src": "/images/steampunk.webp",
    "alt": "A fictional FIELDNOTES cover on deep brown: exposed brass gears, rivets, and a pressure gauge around a Victorian display title, engraving-style fine-line ornament at the edges, and warm white placeholder text bars below."
  },
  "searchTerms": [
    "齿轮",
    "黄铜",
    "维多利亚",
    "复古未来",
    "机械"
  ]
}