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 styling is a hybrid of Tailwind CSS utility classes and a small set of hand-crafted CSS rules that Tailwind’s @layer components and @layer utilities cannot replicate purely through composition. Tailwind handles layout, spacing, and color — a custom palette maps Windows 98’s iconic greys, teals, and navies to named tokens. The bevel border illusion that makes every button and window look physically raised or sunken is defined in main.css as three reusable classes. CRT effects, scrollbar chrome, and animation keyframes round out the retro feel.
Color palette
All Windows 98 brand colors are registered as Tailwind custom colors in tailwind.config.js and compiled into the utility namespace (e.g. bg-win-teal, text-win-navy, border-win-gray):
| Token | Hex | Usage |
|---|
win-teal | #008080 | Desktop background (bg-win-teal) |
win-navy | #000080 | Title bars, selected items, Start menu header |
win-silver | #C0C0C0 | Window chrome, button backgrounds, toolbar backgrounds |
win-gray | #808080 | Borders, dividers, inner bevel shadow |
win-cyan | #00CED1 | Accent color — welcome heading, skill badge highlights |
win-pink | #FF1493 | Hover state accent, guestbook submit button text |
win-light | #DFDFDF | Light silver — inner highlight of bevel, hover row tint |
Bevel utilities
The three-dimensional raised/sunken look of Windows 98 UI elements comes from a 2 px asymmetric border trick: light colors on the top-left edges simulate a light source from the upper-left, dark colors on the bottom-right simulate shadow. An inner box-shadow adds a second layer of depth.
.win98-outset — raised element (window chrome, buttons)
Used on RetroWindow outer shells, the Taskbar container, and RetroWindow title bars’ surrounding frame.
.win98-outset {
border-width: 2px;
border-top-color: #ffffff;
border-left-color: #ffffff;
border-bottom-color: #000000;
border-right-color: #000000;
background-color: #C0C0C0;
box-shadow: inset 1px 1px #dfdfdf, inset -1px -1px gray;
}
.win98-inset — sunken element (input fields, address bar)
The inverse of win98-outset. Used on form inputs in ContactWindow and the address bar in RetroWindow.
.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 — button style
Extends win98-outset with pixel-font styling and a pressed state (:active) that inverts the border direction to simulate physical depression:
.win98-btn {
/* inherits win98-outset bevel */
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;
background-color: #C0C0C0;
box-shadow: inset 1px 1px gray, inset -1px -1px #dfdfdf;
/* padding shifts content 1 px right/down to reinforce press feel */
padding: 5px 7px 3px 9px;
}
Typography
RetroWin uses four font families, loaded from Google Fonts via @import at the top of main.css. Each is mapped to a Tailwind font-* utility:
| Class | Font family | Typical use |
|---|
font-pixel | Pixelify Sans | Button labels, icon labels, system UI text |
font-vt323 | VT323 | Retro section headings (e.g. “WELCOME 2 MY WEBSITE!!!1!”) |
font-mono | IBM Plex Mono | Code blocks, terminal-style output in SkillsWindow |
font-sans | Inter | Body text, form labels, window content paragraphs |
Animation classes
| Class | Type | Effect |
|---|
.crt-flicker | @keyframes flicker | Subtle opacity oscillation (0.85 → 1.0) on a 4 s cycle, applied to CRTOverlay. Disabled when prefers-reduced-motion: reduce is set. |
.scanlines | background | Repeating 4 px linear-gradient stripes (transparent 50% / rgba(0,0,0,0.1) 50%) layered over the CRT overlay to mimic cathode-ray scan lines. |
.animate-marquee | @keyframes marquee | Translates an element from 100% to -100% over 10 s linearly, used by Marquee.js for the scrolling status ticker. |
.animate-bounce | Tailwind built-in | Infinite vertical bounce (translateY(-25%) ↔ 0) on a 1 s ease curve, used on the mascot. |
.animate-pulse | Tailwind built-in | Fades opacity to 50% and back on a 2 s cubic-bezier curve, used on the “UNDER CONSTRUCTION” banner and the skills heading. |
Custom scrollbar
main.css replicates the Windows 98 scrollbar chrome using webkit pseudo-element selectors. All scrollable containers inside RetroWindow (which uses overflow-auto) automatically pick these up:
/* Track */
::-webkit-scrollbar {
width: 16px;
height: 16px;
background: #dfdfdf;
}
/* Arrow buttons */
::-webkit-scrollbar-button:single-button {
background-color: silver;
height: 16px;
width: 16px;
border-style: solid;
border-width: 2px;
border-color: white black black white; /* outset bevel */
}
/* Thumb */
::-webkit-scrollbar-thumb {
background-color: silver;
border-width: 2px;
border-style: solid;
border-color: white black black white;
}
background-image to render the up/down caret glyphs without any image assets.
To add a new color to the palette, register it in tailwind.config.js under theme.extend.colors. For example, "win-purple": "#800080" would generate bg-win-purple, text-win-purple, and border-win-purple utilities automatically after the next build.