Design skill preview

Open full screen

Nostalgia design skill for AI agents

Overview

Nostalgia is a retro desktop-OS design system skill file for AI coding assistants. It creates interfaces with toasted-cream surfaces, espresso-brown ink, glowing orange accents, crisp taupe borders, fixed menu bars, window-like panels, folder-style icons, and warm directional shadows.

The system turns generated UI into a vintage operating-system workspace. It is playful and familiar, but still precise: every surface has a border, every panel has chrome, and every interaction should feel like a tangible desktop control.

Design Tokens

Color Palette

Nostalgia uses warm cream, brown, rust, and orange tones in light mode, then shifts into a CRT-like terminal atmosphere at night.

Token Value Purpose
Surface #FFEEDD Toasted-cream desktop and window backgrounds
Secondary Surface #F6E6D6 Window bodies, panels, and secondary surfaces
Brand #FF631A Orange accents, active states, and primary highlights
Brand Strong #D94A00 Stronger calls to action and active chrome
Heading #381C00 Espresso-brown headings
Body #4A3826 Body copy, labels, and UI text

Dark mode moves to deep brown-black surfaces with warm cream text and brighter orange accents. The wallpaper color belongs behind windows, not inside content surfaces.

Typography

Nostalgia uses a literary serif for headings, a clean geometric sans for body and UI copy, and a monospace for code, metadata, terminal readouts, and system labels. The result feels like a sun-faded manual brought into an interactive desktop.

Typography should reinforce the chrome: headings feel editorial, controls feel system-like, and metadata reads as machine output.

Spacing and Shape

The design language is sharp, not soft. Surface and control radius tops out around 3px, while borders are crisp 1px taupe lines. Warm shadows are directional and physical, helping windows sit above the desktop without modern blur-heavy gloss.

Component Language

Primary content containers should be treated as windows with title bars, bordered bodies, and optional control dots. Buttons are flat fills with borders and pressed-key active states. Navigation can use a fixed top menu bar, and content groups can borrow folder, file, and title-bar metaphors.

Best For

Use Nostalgia for retro tools, developer utilities, personal dashboards, archives, portfolio sites, note apps, playful SaaS products, and any generated UI that benefits from a tactile desktop metaphor.

Comments

Sign in to join the conversation.