Windows 95 System UI

---
name: windows-95-system
description: Apply the Windows 95 System UI visual design system when building or restyling websites and UI. Use whenever the user asks to build, theme, restyle, or "make it look like" Windows 95 System UI, mentions windows 95, win95 ui, windows 98, or describes silver #c0c0c0 surfaces, raised and sunken 2px bevels, navy-to-blue title bar gradient — even if they don't name the style explicitly. Do NOT use for non-visual tasks or when another named design system is requested.
license: MIT
---

# Windows 95 System UI Design System

The Windows 95/98 desktop GUI reproduced faithfully on the web: #c0c0c0 silver chrome, 3D bevels built from stacked inset box-shadows instead of borders, navy title bars with a gradient to dialog blue, bitmap-flavored type, and zero animation. Every control looks pressable because light literally falls on it from the top-left.

Apply this system holistically: colors, type, spacing, radius, borders, shadows, and motion together produce the look. Token values come from the officially published token set. When in doubt, match the reference sites listed at the end.

## When to use

- Building a new page or component that should read as Windows 95 System UI.
- Restyling existing UI to this aesthetic.
- The user names the style, an alias (windows 95, win95 ui, windows 98, 98.css, retro os gui, beveled gui), or describes its traits: silver #c0c0c0 surfaces; raised and sunken 2px bevels; navy-to-blue title bar gradient; pixel-crisp bitmap type; dotted focus rectangles; no rounded corners, no animation.

## Design tokens

### Color palette

- Window and page surface — the canonical Win95 silver (98.css --surface): `#c0c0c0` (--color-bg)
- Desktop teal behind windows; use for page backdrop outside the main window frame: `#008080` (--color-desktop)
- Primary text (98.css --text-color): `#222222` (--color-text)
- Disabled text and engraved labels only — never body copy: `#808080` (--color-text-muted)
- Dialog/title-bar navy and selection background (98.css --dialog-blue): `#000080` (--color-accent)
- Right stop of the active title-bar gradient (98.css --dialog-blue-light): `#1084d0` (--color-accent-light)
- Hyperlink blue (98.css --link-blue): `#0000ff` (--color-link)
- Inner light bevel of raised controls (98.css --button-face): `#dfdfdf` (--color-button-face)
- Outer top-left highlight of raised controls (98.css --button-highlight): `#ffffff` (--color-button-highlight)
- Inner dark bevel (98.css --button-shadow): `#808080` (--color-button-shadow)
- Outermost dark edge of every control (98.css --window-frame): `#0a0a0a` (--color-window-frame)

### Typography

- Display / headings: Silkscreen (fallback: Tahoma, MS Sans Serif, sans-serif) (ideal: Pixelated MS Sans Serif (the 98.css bitmap webfont), premium — use Silkscreen as the free substitute)
- Body: Tahoma (fallback: MS Sans Serif, Segoe UI, Arial, sans-serif) (ideal: Pixelated MS Sans Serif (the 98.css bitmap webfont), premium — use Tahoma as the free substitute)
- Mono / data: Courier Prime (fallback: Courier New, monospace) (ideal: Fixedsys, premium — use Courier Prime as the free substitute)
- Type scale: 1.2 ratio, base 14px — computed steps: 14px / 17px / 20px / 24px / 29px / 35px (body / h5 / h4 / h3 / h2 / h1; scale further for display sizes)
- Headings: weight 700, line-height 1.2, letter-spacing 0
- Body: line-height 1.45, letter-spacing 0

### Spacing, radius, border

- Spacing scale (px): 2, 4, 6, 8, 12, 16, 24, 32 — Dense and utilitarian, matching 98.css spacing tokens: 8px between elements, 6px between grouped elements, 4px between grouped buttons. Dialogs are tight; nothing breathes on purpose.
- Border radius: none 0px — Absolutely no rounded corners anywhere — every pixel is on the grid.
- Border treatment: none — Edges are never CSS borders. All chrome comes from the stacked inset box-shadow bevel recipes, exactly as 98.css publishes them.

### Shadows

- raised: `inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf` — Default buttons, toolbars, and any clickable raised chrome (98.css border-raised outer+inner)
- sunken: `inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080` — Pressed buttons and active states — the raised bevel flipped
- window: `inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff` — Window and dialog frames (98.css border-window outer+inner)
- field: `inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a` — Text inputs, selects, and any sunken white field (98.css --border-field)

### Layout

- Max content width: 1024px
- The page is a desktop: content lives inside window frames with title bars, sat on the teal desktop color
- Windows can overlap slightly and be offset like a real session
- Toolbars and status bars run edge-to-edge inside their window
- Group related fields with fieldset-style grooved outlines

### Effects

- Active title bar: linear-gradient(90deg, #000080, #1084d0) with white bold text and pixel window buttons
- Dotted 1px focus rectangle inset inside focused controls
- Selection state: navy background with white text
- Optional dithered checkerboard pattern for disabled surfaces

### Motion

- Easing: steps(1, end); durations 0ms / 0ms / 120ms
- No transitions: state changes are instant, like GDI repaints
- Windows appear and close with no animation
- The only acceptable 'loading' affordance is a segmented progress bar filling in blocks

## CSS variables (drop-in)

```css
:root {
  --color-bg: #c0c0c0;
  --color-desktop: #008080;
  --color-text: #222222;
  --color-text-muted: #808080;
  --color-accent: #000080;
  --color-accent-light: #1084d0;
  --color-link: #0000ff;
  --color-button-face: #dfdfdf;
  --color-button-highlight: #ffffff;
  --color-button-shadow: #808080;
  --color-window-frame: #0a0a0a;
  --radius-none: 0px;
  --shadow-raised: inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  --shadow-sunken: inset -1px -1px #ffffff, inset 1px 1px #0a0a0a, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
  --shadow-window: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #ffffff;
  --shadow-field: inset -1px -1px #ffffff, inset 1px 1px #808080, inset -2px -2px #dfdfdf, inset 2px 2px #0a0a0a;
  --border-default: none;
  --font-display: Silkscreen, Tahoma, "MS Sans Serif", sans-serif;
  --font-body: Tahoma, "MS Sans Serif", "Segoe UI", Arial, sans-serif;
  --font-mono: "Courier Prime", "Courier New", monospace;
  --text-base: 14px;
  --leading-heading: 1.2;
  --leading-body: 1.45;
  --tracking-heading: 0;
  --tracking-body: 0;
  --ease: steps(1, end);
  --duration-fast: 0ms;
  --duration-base: 0ms;
  --duration-slow: 120ms;
}
```

Google Fonts: `<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&family=Courier+Prime:wght@400;700&display=swap" rel="stylesheet">`

## Component recipes

- **Nav:** A window title bar: navy-to-blue gradient, bold white app title on the left, pixel minimize/maximize/close buttons (raised bevel squares) on the right; below it an optional raised menu bar with File / Edit / Help items that invert to navy on hover.
- **Hero:** A large dialog window centered on the teal desktop: title bar, an icon on the left (32px, hard-edged), bold heading and short body text, and a row of raised OK / Cancel buttons bottom-right.
- **Card:** A raised panel with the window bevel, optional grooved fieldset border and a small caption label breaking the groove line top-left; content sits on flat #c0c0c0.
- **Button (primary):** Raised bevel on #c0c0c0, 12px bold text, min-width 75px; default button gets an extra 1px #0a0a0a outline; press flips to the sunken bevel and nudges the label 1px down-right.
- **Button (secondary):** Identical raised chrome without the default outline — Win95 buttons do not vary by color, only by outline and position.
- **Form fields:** Sunken white field (field shadow recipe), 1-2px padding tightening, black text and a navy selection; labels sit to the left or above in plain 12-14px text with no bold.

Where this spec is silent (footers, responsive breakpoints, empty states), derive the treatment from the tokens above and the Do/Don't rules — never fall back to generic defaults. Every interactive element needs a visible keyboard focus state consistent with the style (use the accent color or the border treatment, not the browser default).

## Signature element

The four-shadow bevel: raised chrome drawn as inset -1px -1px #0a0a0a, inset 1px 1px #ffffff, inset -2px -2px #808080, inset 2px 2px #dfdfdf — inverted to sunken on press, exactly as published in 98.css. Spend boldness here; keep everything else quiet.

## Do

- Copy the four box-shadow bevel recipes verbatim — they are the entire style
- Keep everything on a hard pixel grid with zero border-radius and zero blur
- Use the navy title-bar gradient and white bold title as the top of every major container
- Batch content into windows, dialogs, fieldsets, and status bars like a real desktop

## Don't

- Don't add soft drop shadows, rounded corners, or hover fades — nothing about Win95 is soft
- Don't use #808080 gray for body copy; it is a disabled-state color
- Don't smooth the fonts into large modern sans headings; keep type small, dense, and utilitarian
- Don't animate window chrome — instant repaints only

## Accessibility notes

- text-muted #808080 on #c0c0c0 is about 2.2:1 — authentic but failing; use it strictly for decorative disabled states and keep real secondary copy at #222222.
- Authentic 11-12px UI type is small; these tokens raise base size to 14px, and body copy should not go below that.
- The dotted focus rectangle is faithful but faint — pair it with the sunken state or add a 2px navy outline for keyboard users.

## Reference sites

- 98.css — the published Win98 CSS token set: https://jdan.github.io/98.css/
- 98.css source (jdan/98.css): https://github.com/jdan/98.css
- Windows 98 icon archive: https://win98icons.alexmeub.com/

For the exhaustive machine-readable spec, see references/tokens.md and tokens.json in this skill folder.

Install this skill

unzip windows-95-system.zip -d ~/.claude/skills/

npx shadcn add https://claude-design-skills.convoke.software/r/windows-95-system.json

Settings → Capabilities → Skills → Upload skill → windows-95-system.zip