Retro Computing Aesthetic

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.

{
  "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."
}

{
  "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": "unconfirmed",
        "checkedAt": "2026-09-16T05:37:24.610Z",
        "error": "error:gateway-timeout",
        "jobId": "spn2-fd7e138316cd10330a7c01e4065785139d57a0e1"
      }
    },
    {
      "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",
    "低色调抖动"
  ]
}