Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/retrowin/llms.txt

Use this file to discover all available pages before exploring further.

RetroWin’s visual identity is built on two layers: a custom Tailwind color palette that maps semantic Win98 names to exact hex values, and a small set of hand-crafted CSS utility classes that reproduce the classic beveled-border look. Together they give you a single source of truth — change a token in tailwind.config.js and the update ripples through every window chrome, button, and title bar in the app.

​
Color palette

Every color in RetroWin is registered under the win-* namespace in the Tailwind config. This keeps them distinct from Tailwind’s built-in palette and makes their purpose obvious at a glance.
TokenHexTailwind classPrimary usage
win-teal#008080bg-win-tealDesktop background
win-navy#000080bg-win-navyTitle bars, active selections
win-silver#C0C0C0bg-win-silverWindow chrome, button faces
win-gray#808080border-win-grayBorders, inset shadow layer
win-cyan#00CED1bg-win-cyanAccent highlights
win-pink#FF1493text-win-pinkHover states
win-light#DFDFDFbg-win-lightLight border / outset shadow layer

​
Changing the desktop background

The root App component applies bg-win-teal to its outermost div. To swap the desktop color, replace that class with any other win-* token — or a standard Tailwind color:
assets/main.js
// Teal desktop (default)
<div className="w-screen h-screen bg-win-teal selection:bg-win-navy selection:text-white">

// Navy desktop
<div className="w-screen h-screen bg-win-navy selection:bg-win-navy selection:text-white">

​
Custom CSS utilities

RetroWin ships three @layer components utility classes that reproduce the Win98 beveled-border system using border colors and layered box-shadow. You can apply them to any element with a plain class name — no Tailwind variant syntax required.

​
.win98-outset

Used for raised surfaces: window frames, panels, and anything that should look like it’s pressing out of the screen. Top and left edges are white (highlight), bottom and right are black (shadow), with an inner #DFDFDF / gray shadow pair. 
.win98-outset {
  border-width: 2px;
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  border-bottom-color: #000000;
  border-right-color: #000000;
  background-color: #c0c0c0; /* win-silver */
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px gray;
}

​
.win98-inset

Used for sunken surfaces: input fields, address bars, and text areas. The border colors are inverted compared to .win98-outset, and the background switches to white to signal an editable region. 
.win98-inset {
  border-width: 2px;
  border-top-color: #000000;
  border-left-color: #000000;
  border-bottom-color: #ffffff;
  border-right-color: #ffffff;
  background-color: #ffffff;
  box-shadow: inset 1px 1px gray, inset -1px -1px #dfdfdf;
}

​
.win98-btn

A self-contained button style that combines the outset bevel with the pixel font and compact padding. It also handles the :active state — when pressed, the border colors flip to inset and padding shifts by 1px to simulate physical depression. 
.win98-btn {
  border-width: 2px;
  border-top-color: #ffffff;
  border-left-color: #ffffff;
  border-bottom-color: #000000;
  border-right-color: #000000;
  background-color: #c0c0c0; /* win-silver */
  box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px gray;
  padding: 0.25rem 0.5rem;
  font-family: Pixelify Sans, sans-serif;
  font-size: 0.875rem;
}

.win98-btn:active {
  border-top-color: #000000;
  border-left-color: #000000;
  border-bottom-color: #ffffff;
  border-right-color: #ffffff;
  box-shadow: inset 1px 1px gray, inset -1px -1px #dfdfdf;
  padding: 5px 7px 3px 9px; /* shift content down-right on press */
}

.win98-btn:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 1px #000000;
}

​
Typography

Four font families are imported from Google Fonts in assets/main.css and mapped to Tailwind utility classes:
Tailwind classFont familyBest for
font-pixelPixelify SansButtons, labels, taskbar text
font-vt323VT323Page headings, large display text
font-monoIBM Plex MonoCode blocks, terminal output
font-sansInterBody copy, paragraphs
The Google Fonts @import lives at the top of assets/main.css:
assets/main.css
@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Inter:wght@400;600;700&family=Pixelify+Sans:wght@400;600;700&family=VT323&display=swap";

​
Swapping a font

To replace VT323 with a different retro font (e.g. Press Start 2P):
  1. Update the @import URL in assets/main.css to include the new family.
  2. Change the fontFamily mapping in tailwind.config.js:
tailwind.config.js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        vt323: ['"Press Start 2P"', 'monospace'],
      },
    },
  },
}
Any element using font-vt323 will immediately pick up the new family.

​
Adding a new color

Need a color that doesn’t exist in the default palette? Add it to the Tailwind config in three steps.
1

Open tailwind.config.js

Find the theme.extend.colors object. All win-* tokens are declared here.
2

Add your token

Append a new key following the win-* naming convention:
tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'win-teal':   '#008080',
        'win-navy':   '#000080',
        // Add your own:
        'win-purple': '#800080',
      },
    },
  },
}
3

Use it anywhere in your JSX

The new token is immediately available as a background, text, or border class:
<div className="bg-win-purple text-white">
  Custom purple window
</div>
You can also pair it with hover and focus variants: hover:bg-win-purple, border-win-purple, text-win-purple.
The desktop background is the single biggest influence on the overall feel of the site. win-teal (#008080) is the authentic Windows 98 default, but swapping it to a Luna-style blue like #245EDC instantly evokes Windows XP — no other changes needed. Try bg-[#245EDC] on the root div for a quick before/after comparison.

Build docs developers (and LLMs) love

Get started for freeTalk to us