NostalgiaUI

An open source design system that renders any interface in the style of a past design era, using color palettes drawn from popular VS Code themes. Built on Base UI and shipped with an MCP server so AI coding agents can use it directly.

Status: milestone 4 complete. Six eras, five palettes, five components, a VS Code theme importer, an MCP server, a docs site at nostalgiaui.sylvester.works, and all four packages published to npm.

The two axes

Every rendered component is the product of two independent choices.

Era controls shape and feel: border radius, border style, bevels, shadows, gradients, textures, typography, spacing density, and motion.

Palette controls color, and nothing else. Palettes come from VS Code themes.

Because the axes are independent, any palette works in any era. Dracula in Classic Windows. Solarized Light in Frutiger Aero. The same settings page can be dragged across twenty years of design history without rewriting a single component.

Era  (shape)  x  Palette (color)  =  rendered component

Keeping the axes apart is the central constraint of the project. Era effects that need extra colors, such as a 90s bevel highlight or a Web 2.0 gradient stop, are derived from the semantic tokens with OKLCH color math rather than hand picked per palette. Otherwise every new palette would mean touching every era.

Token layers

Eras read only from semantic tokens. No component ever uses a raw color value.

Eras

Eight so far, in chronological order: Terminal / CRT, Early Mac, Classic Windows, Web 1.0, Frutiger Aero, Flat / Metro, Neumorphism, and Neubrutalism. Web 2.0, Skeuomorphism, Material, and Glassmorphism are still to come.

Palettes

Dracula, Nord, Solarized Light, Catppuccin Mocha, and One Dark Pro, each with its source theme and licence recorded in packages/tokens/palettes/<name>/SOURCE.md. One light palette has been included from day one so that light mode never becomes an afterthought. One Dark Pro was produced by running the importer on the theme's own file, which was its first real-world test.

Repo layout

packages/tokens      era and palette definitions, built to CSS variables, Tailwind config, DTCG JSON
packages/react       Base UI components styled via tokens, with stories beside each component
packages/importer    VS Code theme JSON to NostalgiaUI palette
packages/mcp         MCP server
apps/storybook       Storybook, the local development surface, with era and palette toolbars
apps/docs            docs site for nostalgiaui.sylvester.works (milestone 4)
docs/decisions       architecture decision notes

Usage

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>;

Changing either prop changes one attribute. Nothing re-renders differently and no markup changes: the whole visual difference is CSS resolving a different set of custom properties.

NostalgiaRoot is also what portalled parts render into. Base UI sends Dialog to document.body by default, which would escape the token scope entirely.

Development

Requires Node 22 or newer and pnpm 11.

pnpm install
pnpm check      # lint, typecheck, test, build
pnpm dev        # Storybook on http://localhost:6006, hot reloads component edits

Individual tasks: pnpm lint

... View full README on GitHub