Nostalgia Design System Reference

Nostalgia — Browser-based Windows 9x OS simulator at

Platform: Vanilla JS + Custom Web Components (no framework)
CSS Layers: reset, theme, components, layout, utility
Themes: Win95 base + Nostalgia magenta/cyan/lime custom theme
Rendering: Nostalgia-perfect, anti-aliasing disabled, image-rendering: nostalgiaated
Single site: The marketing site IS the product (no separate app/portal)

Boot Screen

Black background with lime-green monospace text. Font: TomoBios at 10px, line-height 13.333px. Blinking block cursor.

Nostalgia [Version 2.6.1693523839065] (c) Nostalgia. All rights reversed. C:\Nostalgia> Loading system... C:\Nostalgia>

ANSI Color Brushwork (16 colors)

black

#232634

brBlack

#616673

red

#ff5c57

brRed

#f0562c

green

#5af78e

brGreen

#00ff9a

yellow

#f3f99d

brYellow

#ffd751

blue

#57c7ff

brBlue

#2a9bff

magenta

#ff6ac1

brMagenta

#b280f6

cyan

#9aedfe

brCyan

#0ff

white

#f1f1f0

brWhite

#c3ff00

Nostalgia Theme Colors

The Nostalgia custom theme overrides the default Win95 system colors with a vibrant magenta/cyan/lime brushwork.

ActiveTitle

rgb(255,0,255)

GradientActiveTitle

rgb(0,255,255)

Desktop

rgb(131,125,255)

Highlight

#c3ff00

Abc

Screen FG

#c3ff00

MenuHilight

rgb(0,128,203)

Desktop Gradient

radial-gradient(ellipse at center, #f0f, #0ff)

Default Win95 System Colors

The base Windows 95 color brushwork. All UI chrome derives from these system colors.

ButtonFace

rgb(212,208,200)

ButtonLight

rgb(223,223,223)

ButtonHilight

rgb(255,255,255)

ButtonShadow

rgb(128,128,128)

ButtonDkShadow

rgb(64,64,64)

ActiveTitle

rgb(10,36,106)

GradientActiveTitle

rgb(166,202,240)

Window

rgb(255,255,255)

WindowFrame

rgb(0,0,0)

InfoWindow

rgb(254,255,224)

Background

rgb(0,128,128)

rgb(212,208,200)

Scrollbar

rgb(212,208,200)

Hilight

rgb(10,36,106)

Abc

HilightText

rgb(255,255,255)

Named Design Brushwork

20 named colors used across the system for UI accents, themes, and decorative elements. Defined in HSL.

black

hsl(0,0%,0%)

gray

hsl(0,0%,50%)

stone

hsl(30,5%,50%)

red

hsl(0,70%,50%)

pink

hsl(330,70%,60%)

purple

hsl(280,60%,50%)

violet

hsl(260,60%,60%)

indigo

hsl(230,60%,50%)

blue

hsl(210,70%,50%)

cyan

hsl(190,80%,50%)

teal

hsl(170,60%,40%)

green

hsl(130,60%,40%)

lime

hsl(80,80%,50%)

yellow

hsl(50,90%,50%)

orange

hsl(30,90%,55%)

choco

hsl(20,50%,35%)

brown

hsl(20,40%,30%)

sand

hsl(40,40%,65%)

camo

hsl(80,30%,40%)

jungle

hsl(150,40%,25%)

Semantic Status Colors

Used in toast notifications, alerts, and system messages.

Info: System update available. Check Control Panel for details.
bg: #f8ffff / text: #276f86 / border: #a9d5de

Warning: Disk space is running low on C:\ drive.
bg: #fff6e9 / text: #8c4300 / border: #c9ba9b

Error: Application has performed an illegal operation and will be shut down.
bg: #fff6f6 / text: #9f3a38 / border: #e0b4b4

Success: File copied successfully to A:\ drive.
bg: #fcfff5 / text: #2c662d / border: #a3c293

Typography

Nostalgia fonts with anti-aliasing disabled. All text uses -webkit-font-smoothing: none for crisp nostalgia rendering.

sserife (Primary UI Font)

sserife / 12px / line-height: 1.333 (16px)

        The quick brown fox jumps over the lazy dog.

        ABCDEFGHIJKLMNOPQRSTUVWXYZ 0123456789

        File   Edit   View   Help   OK   Cancel   Apply

Tomo (Monospace / Terminal)

Tomo / 12px / line-height: 1.167 (14px)

        C:\Nostalgia> dir /w

        C:\Nostalgia> narrator "Hello World"

        README.TXT   SYSTEM.INI   WIN.COM

TomoBios (Boot Screen)

TomoBios / 10px / line-height: 13.333px

        Nostalgia BIOS v2.6

        Memory Test: 640K OK

        Loading Nostalgia...

Key Rules

Anti-aliasing disabled: -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset;
Image rendering: image-rendering: nostalgiaated;
No subnostalgia rendering for authentic nostalgia-font look
Title bar text: white with text-shadow: 1px 1px 0 rgba(0,0,0,0.3)
Desktop icon labels: white with all-side text-shadow for readability

Spacing Scale

Nostalgia-based spacing. No rem units — everything is exact nostalgia values for the retro aesthetic.

xxxs / 1px

xxs / 2px

xs / 4px

sm / 6px

md / 8px

lg / 12px

xl / 16px

xxl / 26px

xxxl / 40px

Z-Index Scale

Layer	Usage	Value
focused	Focused window (brought to front)	1000
dialog	Modal dialogs, alerts	10000
popup	Context menus, dropdowns	100000
balloon	Tooltips, notification balloons	110000
cursor	Custom cursor overlay	120000

Shadow System

Hard-edge drop shadows. No blur radius — nostalgia-perfect offset shadows only.

Brushwork Shadow

Dialog Shadow

Balloon Shadow

Brushwork: 3px 3px 0 rgba(51,51,51,0.27)

Dialog: 3px 3px 0 rgba(51,51,51,0.2)

Balloon: drop-shadow(2px 2px 1px rgba(51,51,51,0.33))

Window / Dialog Component

The core UI element. Title bar gradient, 3D chrome border, content well, and footer buttons.

Active Window (Nostalgia Theme)

■ My Computer

─

□

This window uses the Nostalgia magenta-to-cyan title bar gradient. Title text is white with text-shadow.

Content area has white background with sunken 3D border (inset).

Active Window (Classic Win95 Theme)

■ Control Panel

─

□

Classic Win95 blue-to-light-blue title bar gradient.

Inactive Window

■ Notepad

─

□

Inactive windows have a gray gradient title bar.

Anatomy

Outer border: 2px, white top-left / dark-shadow bottom-right
Inner shadow: inset 1px light / inset -1px shadow (4-color 3D effect)
Title bar: linear-gradient(90deg, ActiveTitle, GradientActiveTitle)
Title text: white, bold, 12px, padding 3px 4px
Title buttons: 16x14px, ButtonFace background, 3D outset border
Content area: white background, sunken 3D border, 4px margin from chrome
Footer: right-aligned buttons, 8px padding
Drop shadow: 3px 3px 0 rgba(51,51,51,0.2)

3D Border System

The signature Win95 beveled border is built from 4 colors applied to border + box-shadow. This creates the illusion of depth with a light source from the top-left.

2px Borders (Standard)

Outset
(raised)

Buttons, panels, window chrome

Inset
(sunken)

Text fields, content wells, pressed buttons

1px Borders (Shallow)

Outset 1px

Subtle raised elements

Inset 1px

Subtle sunken elements

Screentone / Dither Pattern

repeating-conic-gradient(ButtonFace 0% 25%, ButtonLight 0% 50%) 50% / 2px 2px

Used for scrollbar tracks, disabled areas, and the classic Win95 dithered background pattern.

Border Color Map

Position	Outset (raised)	Inset (sunken)
Border top/left	ButtonHilight (#fff)	ButtonDkShadow (#404040)
Border bottom/right	ButtonDkShadow (#404040)	ButtonHilight (#fff)
Inset top/left shadow	ButtonLight (#dfdfdf)	ButtonShadow (#808080)
Inset bottom/right shadow	ButtonShadow (#808080)	ButtonLight (#dfdfdf)

Button System

All buttons use the 3D border system on ButtonFace background. States change border direction.

Button States

Outset border

Inset border

+ black outline

Gray + white shadow

Footer Dialog Buttons

Footer buttons: min-width 75px, padding 3px 12px, 6px gap

Button CSS Spec

Background: var(--ButtonFace) — rgb(212,208,200)
Font: system UI, 12px
Padding: 3px 12px
Min-width: 75px (dialog/footer buttons)
Border: 2px solid, 4-color 3D system
Pressed: border colors reversed, content shifts 1px down-right
Default: additional 1px solid black outline at -4px offset
Disabled: color: ButtonShadow, text-shadow: 1px 1px 0 ButtonHilight

Desktop

The Nostalgia desktop is a purple/magenta/cyan radial gradient with a grid of 32x32 icons.

💻

My Computer

📁

My Documents

🌐

Internet Explorer

⚙

Control Panel

📰

Notepad

🎨

Paint

💾

Floppy (A:)

🖶

Recycle Bin

Desktop Spec

Background: radial-gradient(ellipse at center, #f0f, #0ff) over base rgb(131,125,255)
Icon size: 32x32px
Icon grid cell: 68px wide
Icon gap: 2px
Label font: 10px, white, text-shadow on all 4 sides for outline effect
Label text-shadow: 1px 1px 1px #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000

Taskbar

Fixed at the bottom of the viewport. Outset top border, Start button, window dock, and clock.

Start

■ My Computer

■ Notepad

12:34 AM

Taskbar Spec

Height: ~30px
Background: ButtonFace
Top border: 2px solid ButtonHilight (outset top edge)
Start button: outset 3D border, bold text, Win93 gradient logo icon
Dock buttons: inset (pressed) 3D border, 11px text, min-width ~100px
Clock: inset border, monospace font, right-aligned
Padding: 2px 4px internal, 4px gap between elements

Scrollbar

▲

▼

Scrollbar Spec

Track width: 20px
Track background: screentone dither pattern
Thumb: ButtonFace, outset 3D border, min 8px height
Arrow buttons: 18px tall, outset 3D border, centered arrow glyph
Border: 1px solid ButtonDkShadow on track outer edge

Icon System

Nostalgia uses 32x32 nostalgia icons arranged in a 68px grid. Icons are rendered as <img> elements or CSS backgrounds.

💻

Computer

📁

Folder

📄

File

🌐

Internet

🎵

Media

⚙

Settings

Icon Spec

Default size: 32x32px
Grid area: 68px cells
Gap: 2px between icons
Rendering: image-rendering: nostalgiaated (no smoothing)
Desktop labels: white text with black outline text-shadow
Explorer labels: black text, no shadow
Selected state: blue highlight rectangle, white text, dithered icon overlay

Web Components

Nostalgia is built on custom HTML elements registered as web components. Each encapsulates a Win95-style UI pattern.

<ui-dialog>

<ui-folder>

<ui-icon>

<ui-dock>

<ui-tabs>

<ui-knob>

<ui-volume>

<ui-picto>

<ui-toast>

<ui-toaster>

<ui-workspaces>

<ui-menu>

<ui-tooltip>

<ui-notif>

Component	Purpose
`<ui-dialog>`	Draggable window with title bar, 3D chrome, resizable. Core container for all apps.
`<ui-folder>`	File explorer window showing directory contents as icons or list view.
`<ui-icon>`	Desktop/folder icon with 32x32 image, label, double-click action, context menu.
`<ui-dock>`	Taskbar window list. Shows open windows as pressed/unpressed buttons.
`<ui-tabs>`	Win95-style tabbed interface (like Properties dialogs).
`<ui-knob>`	Rotary knob control (audio apps, settings).
`<ui-volume>`	Volume slider control for audio mixer.
`<ui-picto>`	Pictogram / icon renderer using sprite sheets.
`<ui-toast>`	Single toast notification message.
`<ui-toaster>`	Toast container / notification manager.
`<ui-workspaces>`	Virtual desktop switcher (multiple desktops).
`<ui-menu>`	Context menu and menubar dropdown with separators and submenus.
`<ui-tooltip>`	InfoWindow-colored tooltip (yellow #fefee0 background).
`<ui-notif>`	System tray notification bubble.

CSS Variables — Copy-Paste Block

Complete token set for implementing the Nostalgia design system. Includes both the Win95 base and the Nostalgia theme overrides.

/* ============================
   Win95 Base System Colors
   ============================ */
--ButtonFace: rgb(212,208,200);
--ButtonLight: rgb(223,223,223);
--ButtonHilight: rgb(255,255,255);
--ButtonShadow: rgb(128,128,128);
--ButtonDkShadow: rgb(64,64,64);
--ActiveTitle: rgb(10,36,106);
--GradientActiveTitle: rgb(166,202,240);
--Window: rgb(255,255,255);
--WindowFrame: rgb(0,0,0);
--InfoWindow: rgb(254,255,224);
--Background: rgb(0,128,128);
--Menu: rgb(212,208,200);
--Scrollbar: rgb(212,208,200);
--Hilight: rgb(10,36,106);
--HilightText: rgb(255,255,255);

/* ============================
   Nostalgia Theme Overrides
   ============================ */
--w93-ActiveTitle: rgb(255,0,255);
--w93-GradientActiveTitle: rgb(0,255,255);
--w93-Desktop: rgb(131,125,255);
--w93-Highlight: #c3ff00;
--w93-ScreenFG: #c3ff00;
--w93-MenuHilight: rgb(0,128,203);

/* ============================
   Spacing Scale
   ============================ */
--space-xxxs: 1px;
--space-xxs: 2px;
--space-xs: 4px;
--space-sm: 6px;
--space-md: 8px;
--space-lg: 12px;
--space-xl: 16px;
--space-xxl: 26px;
--space-xxxl: 40px;

/* ============================
   Shadows
   ============================ */
--shadow-brushwork: 3px 3px 0 rgba(51,51,51,0.27);
--shadow-dialog: 3px 3px 0 rgba(51,51,51,0.2);
--shadow-balloon: drop-shadow(2px 2px 1px rgba(51,51,51,0.33));

/* ============================
   Z-Index Scale
   ============================ */
--z-focused: 1000;
--z-dialog: 10000;
--z-popup: 100000;
--z-balloon: 110000;
--z-cursor: 120000;

/* ============================
   Semantic Status Colors
   ============================ */
--status-info-bg: #f8ffff;
--status-info-text: #276f86;
--status-warning-bg: #fff6e9;
--status-warning-text: #8c4300;
--status-negative-bg: #fff6f6;
--status-negative-text: #9f3a38;
--status-positive-bg: #fcfff5;
--status-positive-text: #2c662d;

/* ============================
   ANSI Terminal Colors
   ============================ */
--ansi-black: #232634;
--ansi-brBlack: #616673;
--ansi-red: #ff5c57;
--ansi-brRed: #f0562c;
--ansi-green: #5af78e;
--ansi-brGreen: #00ff9a;
--ansi-yellow: #f3f99d;
--ansi-brYellow: #ffd751;
--ansi-blue: #57c7ff;
--ansi-brBlue: #2a9bff;
--ansi-magenta: #ff6ac1;
--ansi-brMagenta: #b280f6;
--ansi-cyan: #9aedfe;
--ansi-brCyan: #0ff;
--ansi-white: #f1f1f0;
--ansi-brWhite: #c3ff00;

/* ============================
   3D Border Mixins (outset)
   ============================ */
/* border: 2px solid;
   border-color: var(--ButtonHilight) var(--ButtonDkShadow)
                 var(--ButtonDkShadow) var(--ButtonHilight);
   box-shadow: inset 1px 1px 0 var(--ButtonLight),
               inset -1px -1px 0 var(--ButtonShadow); */

/* ============================
   3D Border Mixins (inset)
   ============================ */
/* border: 2px solid;
   border-color: var(--ButtonDkShadow) var(--ButtonHilight)
                 var(--ButtonHilight) var(--ButtonDkShadow);
   box-shadow: inset 1px 1px 0 var(--ButtonShadow),
               inset -1px -1px 0 var(--ButtonLight); */

/* ============================
   Typography
   ============================ */
--font-ui: "sserife", "MS Sans Serif", Arial, sans-serif;
--font-mono: "Tomo", "Consolas", "Courier New", monospace;
--font-bios: "TomoBios", monospace;
--font-size-ui: 12px;
--font-size-bios: 10px;
--line-height-ui: 1.333;
--line-height-mono: 1.167;
--line-height-bios: 13.333px;

/* ============================
   Screentone / Dither
   ============================ */
/* background: repeating-conic-gradient(
     var(--ButtonFace) 0% 25%,
     var(--ButtonLight) 0% 50%
   ) 50% / 2px 2px; */

Scope	Recipe	Class Pattern	Notes
Website	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Website	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
Website	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.

Nostalgia Design System Reference

Boot Screen

ANSI Color Brushwork (16 colors)

Nostalgia Theme Colors

Desktop Gradient

Default Win95 System Colors

Named Design Brushwork

Semantic Status Colors

Typography

sserife (Primary UI Font)

Tomo (Monospace / Terminal)

TomoBios (Boot Screen)

Key Rules

Spacing Scale

Z-Index Scale

Shadow System

Window / Dialog Component

Active Window (Nostalgia Theme)

Active Window (Classic Win95 Theme)

Inactive Window

Anatomy

3D Border System

2px Borders (Standard)

1px Borders (Shallow)

Screentone / Dither Pattern

Border Color Map

Button System

Button States

Footer Dialog Buttons

Button CSS Spec

Desktop

Desktop Spec

Taskbar

Taskbar Spec

Scrollbar

Scrollbar Spec

Icon System

Icon Spec

Web Components

CSS Variables — Copy-Paste Block

Tailwind Mapping