NostalgiaUI

NostalgiaUI

A design system that renders any interface in the style of a past design era, using colour palettes drawn from popular VS Code themes. Built on Base UI, shipped with an MCP server.

Terminal / CRT (1970s to 80s)

Profile

How you appear to other people.

Two independent axes

Every rendered component is the product of two choices.

Era controls shape and feel

Border radius, border style, bevels, shadows, gradients, typography, spacing density and motion. An era never sets a colour.

Palette controls colour

Surfaces, text, accent and status colours, taken from a VS Code theme. A palette never sets a shape.

Because the axes are independent, any palette works in any era, and the demo above changes a single attribute on one wrapper element when you scrub. Nothing re-renders differently; the browser resolves a different set of custom properties.

Era effects that need extra colours, such as a 90s bevel highlight or a glossy highlight band, are derived in OKLCH from the palette's semantic colours rather than hand picked. That is what keeps 6 eras and 5 palettes from becoming 30 hand maintained themes.

Start here

pnpm add @nostalgiaui/react @nostalgiaui/tokens
import { Button, NostalgiaRoot } from '@nostalgiaui/react';
import '@nostalgiaui/tokens/tokens.css';
import '@nostalgiaui/react/styles.css';

<NostalgiaRoot era="frutiger-aero" palette="nord">
  <Button variant="solid">Click me</Button>
</NostalgiaRoot>

The packages are not on npm yet. Until they are, clone the repo and use the workspace.