{
  "_description": "Generated from data/ — edit the sources, not this file. The agent access guide explains the evidence boundary of every field.",
  "schemaVersion": "1.0.0",
  "kind": "entry",
  "locale": "en",
  "id": "retro-computing",
  "name": {
    "zh": "复古计算机风格",
    "en": "Retro Computing Aesthetic"
  },
  "page": "https://designvocabulary.com/en/entries/retro-computing/",
  "self": "https://designvocabulary.com/en/entries/retro-computing.json",
  "alternates": {
    "zh-CN": "https://designvocabulary.com/zh/entries/retro-computing.json",
    "en": "https://designvocabulary.com/en/entries/retro-computing.json"
  },
  "site": {
    "catalogSchemaVersion": "0.1.0",
    "entries": 158,
    "index": "https://designvocabulary.com/en/entries/index.json",
    "query": "https://designvocabulary.com/api/query?lang=en",
    "guide": "https://designvocabulary.com/en/agents/",
    "llms": "https://designvocabulary.com/llms.txt"
  },
  "provenance": {
    "sourceBacked": [
      "entry.definition"
    ],
    "editorial": [
      "entry.boundary",
      "entry.signature",
      "entry.when",
      "entry.when_not",
      "entry.tradeoff",
      "entry.comparison",
      "entry.rules",
      "entry.relations",
      "entry.implementationNote",
      "entry.visual"
    ],
    "scope": "Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.",
    "editorialStatus": "drafted",
    "specimenData": "fictional",
    "specimenNote": "Original fictional specimens. Definitions cite sources; usage advice and recipes are editorial.",
    "sources": [
      {
        "id": "retro-computing-chm-alto",
        "url": "https://www.computerhistory.org/revolution/input-output/14/347",
        "title": "Computer History Museum · Revolution: Xerox Alto",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260916053848/https://www.computerhistory.org/revolution/input-output/14/347",
          "capturedAt": "2026-09-16T05:38:48Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.computerhistory.org/revolution/input-output/14/347"
        }
      },
      {
        "id": "retro-computing-mdn-pixelated",
        "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering",
        "title": "MDN Web Docs · image-rendering",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20251028013621/https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering",
          "capturedAt": "2025-10-28T01:36:21Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering"
        }
      },
      {
        "id": "retro-computing-wcag-contrast",
        "url": "https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html",
        "title": "W3C WCAG 2.1 · Understanding Success Criterion 1.4.3 Contrast (Minimum)",
        "checkedAt": "2026-09-15",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260916053929/https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html",
          "capturedAt": "2026-09-16T05:39:29Z",
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html"
        }
      }
    ],
    "lists": [
      {
        "id": "V-Y",
        "edition": "2026-focus",
        "seat": 4,
        "origin": "issue-1-ledger",
        "page": "https://designvocabulary.com/en/lists/V-Y/",
        "json": "https://designvocabulary.com/en/lists/V-Y.json"
      }
    ],
    "ordered": false,
    "listDisclaimer": "Seat numbers are editorial positions, not scores, rankings, or popularity measurements. A list that is not filled is left as it is."
  },
  "entry": {
    "id": "retro-computing",
    "type": "visual",
    "name": {
      "zh": "复古计算机风格",
      "en": "Retro Computing Aesthetic"
    },
    "aliases": [
      "Retro Terminal UI",
      "复古终端风格",
      "像素风 GUI"
    ],
    "granularity": "experience",
    "intents": [
      "express-brand",
      "organize-content"
    ],
    "tags": [
      "terminal look",
      "pixel type",
      "phosphor palette",
      "early GUI",
      "low-color dithering"
    ],
    "definition": "A style that borrows the visual language of early computers to express nostalgia or a geek sensibility: monospaced terminal type, phosphor green/amber text on black, pixel or bitmap fonts, low-color-depth dithered gradients, and the beveled window chrome and 1-bit icons of early graphical interfaces. Terminal, pixel-art, and early-GUI looks are subtypes of this one overall style, not separate entries.",
    "boundary": "This entry covers the specific visual signature that imitates the look of actual historical computing devices and operating systems: monochrome or low-color-depth display, a monospaced character grid, bitmap icons, and beveled window chrome. It is not the same as skeuomorphism. Skeuomorphism imitates real physical objects (paper texture, leather, switches and dials); Retro Computing Aesthetic imitates the appearance of historical computer screens and systems themselves. The two reference different worlds -- the physical world versus the history of computing technology. Terminal, pixel-art, and early-GUI looks are treated as subtypes within this one entry, not as separate entries.",
    "signature": [
      "Blocks of monospaced terminal text in phosphor green or amber on a black background",
      "Pixelated or bitmap-style icons and glyphs with visibly jagged edges instead of smooth anti-aliasing",
      "Early-GUI-style beveled window chrome (raised or recessed borders) with low-color-depth dithered backgrounds"
    ],
    "when": [
      "The product targets an audience that shares a memory of early computing history or geek culture, where the nostalgia itself is a meaningful signal",
      "The content or context is itself tied to historical computing devices (emulators, teaching material, an Easter-egg screen inside a developer tool)",
      "The team wants a strongly distinctive brand look and is willing to do the extra work of verifying accessibility and legibility"
    ],
    "when_not": [
      "Pixel or terminal type is used as the only vehicle for body text at small sizes, making long text hard to read",
      "The style is applied as a default skin just because \"retro\" feels appealing, with no matching audience or content context",
      "A low-contrast phosphor palette is used for body text or controls without verifying contrast first"
    ],
    "tradeoff": "The style is highly nostalgic and distinctive, but monospaced and pixel fonts are inherently less legible at small sizes than fonts optimized for modern screens, and phosphor green/amber on black tends to compress contrast. A separate, legible font and a contrast-compliant palette must be reserved for actual content, with the retro elements limited to decoration and mood.",
    "comparison": {
      "focus": "Nostalgic reference to the look of historical computer screens and systems",
      "mechanism": "Monospaced terminal type, pixel/bitmap glyphs, phosphor palette, low-color-depth dithering, beveled window chrome",
      "cost": "Small-size legibility and low-contrast palettes need extra verification, and the style reads as arbitrary when the nostalgia doesn't fit the context"
    },
    "sources": [
      {
        "id": "retro-computing-chm-alto",
        "title": "Computer History Museum · Revolution: Xerox Alto",
        "url": "https://www.computerhistory.org/revolution/input-output/14/347",
        "claim": "This page states that before the Xerox Alto, most terminals of the mainframe era could only display monochrome text in a single monospaced font, with no graphical user interface possible; the Alto then introduced the mouse and a visual graphical interface, marking the turning point. This entry's monospaced/monochrome terminal subtype and the early-GUI subtype's break from plain-text terminals are paraphrased from it.",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.computerhistory.org/revolution/input-output/14/347",
          "status": "available",
          "checkedAt": "2026-09-16T05:37:24.565Z",
          "jobId": "spn2-1c4ad72de1adf7521d2db32de3d45b76b6ffe9e4",
          "url": "https://web.archive.org/web/20260916053848/https://www.computerhistory.org/revolution/input-output/14/347",
          "timestamp": "20260916053848"
        }
      },
      {
        "id": "retro-computing-mdn-pixelated",
        "title": "MDN Web Docs · image-rendering",
        "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering",
        "claim": "This page states that `image-rendering: pixelated` first scales an image using nearest-neighbor or a similar algorithm to the nearest integer multiple of its original size, then applies smooth interpolation to reach the final size, so a \"pixelated\" look is preserved when scaling up without introducing extra scaling artifacts. This entry's technical basis for keeping a hard-edged pixel look in a web implementation is paraphrased from it.",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering",
          "status": "available",
          "checkedAt": "2026-09-22T14:36:12.819Z",
          "jobId": "spn2-fd7e138316cd10330a7c01e4065785139d57a0e1",
          "url": "https://web.archive.org/web/20251028013621/https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering",
          "timestamp": "20251028013621"
        }
      },
      {
        "id": "retro-computing-wcag-contrast",
        "title": "W3C WCAG 2.1 · Understanding Success Criterion 1.4.3 Contrast (Minimum)",
        "url": "https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html",
        "claim": "This page specifies that body text (below 18pt, or below 14pt bold) must reach a contrast ratio of at least 4.5:1 against its background, and large text must reach at least 3:1. This entry's must-rule requiring a compliant contrast ratio for phosphor palettes cites this specific figure.",
        "checkedAt": "2026-09-15",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260915*/https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html",
          "status": "available",
          "checkedAt": "2026-09-16T05:38:03.955Z",
          "jobId": "spn2-1018272037c1df12d57dd726da66a4d147e8f15d",
          "url": "https://web.archive.org/web/20260916053929/https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html",
          "timestamp": "20260916053929"
        }
      }
    ],
    "relations": [
      {
        "target": "skeuomorphism",
        "kind": "related",
        "condition": "Both create familiarity by imitating something from the past, which invites confusion",
        "reason": "Skeuomorphism imitates the texture and structure of real physical objects; Retro Computing Aesthetic imitates the look of historical computer screens and systems themselves. The two reference different things.",
        "basis": "editorial"
      },
      {
        "target": "flat-design",
        "kind": "alternative",
        "condition": "Choosing the primary visual language for the same product",
        "reason": "Flat design pursues an undecorated, textureless, modern, clean interface; Retro Computing Aesthetic deliberately introduces the pixelation, dithering, and beveled-border traces of historical screens. The two point in opposite directions.",
        "basis": "editorial"
      },
      {
        "target": "minimalism",
        "kind": "alternative",
        "condition": "Choosing the primary visual language for the same product",
        "reason": "Minimalism relies on whitespace and restraint to express order; Retro Computing Aesthetic relies on specific historical technical traces (scanlines, dithering, bitmap glyphs) to create nostalgia. The two rarely coexist well.",
        "basis": "editorial"
      }
    ],
    "rules": [
      {
        "when": "Displaying body content at small sizes",
        "instruction": "Pixel or monospaced terminal fonts must not be the only vehicle for small-size body text; a separately verified, clearly legible modern font must be kept for body content, with pixel/terminal fonts limited to headings, decoration, or short labels.",
        "strength": "must",
        "basis": "editorial"
      },
      {
        "when": "Using a low-contrast retro palette such as phosphor green or amber on black",
        "instruction": "Text-to-background contrast must meet the applicable text contrast requirement (see the WCAG 1.4.3 figures in the sources); legibility must not be sacrificed for mood, and the palette must not be used for body text or controls until it has been verified to comply.",
        "strength": "must",
        "basis": "editorial"
      },
      {
        "when": "Deciding whether to adopt the Retro Computing Aesthetic",
        "instruction": "Use the style where the nostalgia is genuinely meaningful to the audience, not as a default skin; confirm the audience and content context first, then decide whether to layer this visual language on top.",
        "strength": "recommend",
        "basis": "editorial"
      }
    ],
    "visual": {
      "tokens": {
        "surface": "#0b0f0c",
        "ink": "#33ff99",
        "accent": "#ffb347",
        "radiusPx": 0,
        "shadow": "inset 0 0 0 2px #4a5a4f"
      },
      "tokenScope": "A recipe for this specimen showing one adaptation of a phosphor palette and beveled border; it is not a standard token set for any historical operating system or terminal."
    },
    "demo": null,
    "version": "0.1.0",
    "editorialStatus": "drafted",
    "requirements": [],
    "demoCapabilities": [],
    "implementationNote": "This entry has no interactive specimen yet; the illustration is an editorial sketch. Applying it to a product still requires verifying, on real pages, whether the phosphor palette meets text contrast requirements against real backgrounds, whether small-size body text still uses a legible font rather than pixel/terminal type, and whether the style genuinely matches the audience's nostalgic context.",
    "image": {
      "src": "/images/retro-computing.webp",
      "alt": "A fictional FIELDNOTES interface rendered as an early computer window: raised beveled window chrome, 1-bit dithered icons, a block of monospaced text on a dark phosphor-green-tinted panel, with a faint scanline hint. The palette is muted and consistent, with phosphor green as the only accent color."
    },
    "searchTerms": [
      "终端风",
      "像素字体",
      "磷光配色",
      "早期 GUI",
      "低色调抖动"
    ]
  }
}