Digital Domain: Win98 Design Tokens, Colors, and Shadows

Digital Domain’s visual identity is built on a custom Tailwind CSS theme that faithfully recreates the Windows 98 desktop aesthetic — complete with beveled borders, a teal-checkered desktop background, CRT scanlines, and pixel-perfect scrollbars. Every color token, shadow utility, and font choice is deliberately chosen to evoke the era of dial-up modems and <marquee> tags, while remaining a fully functional React 18 SPA.

Color Palette

All custom colors are registered as Tailwind theme extensions and are available as text-{name}, bg-{name}, and border-{name} utilities throughout the codebase.

Retro Colors
Body Background

Token	Hex Value	Tailwind Classes	Usage
`retro-purple`	`#4B0082`	`text-retro-purple`, `bg-retro-purple`	Page headings, `<h1>` / `<h2>` with VT323 font
`retro-pink`	`#FF1493`	`text-retro-pink`, `bg-retro-pink`	Accents, hover states, guestbook button, drop shadows
`retro-teal`	`#008B8B`	`text-retro-teal`, `bg-retro-teal`	Sub-headings, section labels
`retro-turquoise`	`#00CED1`	`text-retro-turquoise`	Winamp player text, decorative drop shadows
`retro-yellow`	`#FFFF00`	`text-retro-yellow`, `bg-retro-yellow`	Marquee ticker text, stack-badge labels, guestbook title
`win-gray`	`#C0C0C0`	`bg-win-gray`, `border-win-gray`	All Windows 98 window chrome, title bars, taskbar
`titlebar`	`navy → #1084d0`	`bg-titlebar`	Win98-style gradient title bar (linear-gradient 90deg)

/* From main.css — custom body and background */
body {
  background-color: #00ced1;
  background-image: var(--retro-bg); /* SVG checkered pattern */
  font-family: Comic Neue, cursive;
}

The body uses #00CED1 (dark turquoise) as its base color, with a tiled SVG checkered pattern overlay defined in the :root CSS variable. The SVG draws two squares per 32×32 tile in #008B8B at 20% opacity, replicating the classic Windows 98 teal desktop.

:root {
  --retro-bg: url('data:image/svg+xml;utf8,<svg width="32" height="32"
    xmlns="http://www.w3.org/2000/svg">
    <path d="M0 0h16v16H0zM16 16h16v16H16z"
      fill="%23008B8B" fill-opacity="0.2"/>
  </svg>');
}

body {
  background-color: #00ced1;
  background-image: var(--retro-bg);
}

{/* Example: Win98 title bar in JSX */}
<div className="bg-titlebar text-white px-2 py-1 font-comic font-bold">
  index.html - Notepad
</div>

Win98 Shadow Utilities

The four custom box-shadow classes are the backbone of every window, button, and input field in the UI. They precisely mimic the 1990s 3-D border rendering used in Windows 98, using layered inset box shadows with hard #fff, #dfdfdf, #808080, and #000 stops.

Class Reference
Usage Examples

Class	Effect	CSS Value
`shadow-win-out`	Raised / outer window border	`inset -2px -2px #000, inset 2px 2px #fff, inset -4px -4px #808080, inset 4px 4px #dfdfdf`
`shadow-win-in`	Sunken / inner inset border	`inset -2px -2px #fff, inset 2px 2px #000, inset -4px -4px #dfdfdf, inset 4px 4px #808080`
`shadow-win-btn`	Unpressed button (raised)	`inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf`
`shadow-win-btn-active`	Pressed button (depressed)	`inset -1px -1px #fff, inset 1px 1px #000, inset -2px -2px #dfdfdf, inset 2px 2px #808080`

{/* A raised Win98 window panel */}
<div className="bg-win-gray shadow-win-out p-1">
  <div className="bg-titlebar text-white px-2 py-1 font-comic font-bold">
    My Window - Notepad
  </div>
  <div className="bg-white shadow-win-in p-4 m-1">
    Window content goes here
  </div>
</div>

{/* A button that switches shadow on active press */}
<button
  className="
    bg-win-gray shadow-win-btn
    active:shadow-win-btn-active
    active:translate-x-[1px] active:translate-y-[1px]
    px-4 py-1 font-comic
  "
>
  Click Me
</button>

{/* A sunken text input field */}
<input
  className="
    w-full border-2 border-win-gray shadow-win-in
    p-1 focus:outline-none focus:bg-yellow-50
  "
/>

The active:translate-x-[1px] active:translate-y-[1px] classes are paired with shadow-win-btn-active to simulate the physical 1-pixel downward shift that Windows 98 buttons exhibited when clicked.

Typography

Digital Domain loads three Google Fonts families, each assigned a Tailwind utility class for consistent use across components.

Comic Neue

Class: font-comicUsage: Body copy, labels, navigation buttons, all general prose text.Comic Neue is a humanist upgrade to Comic Sans that maintains its playful character while being legible at small sizes. It is also set as the default font-family on body.

VT323

Class: font-vt323Usage: Page titles, section headings, terminal-style counters, the Winamp player display, and the guestbook header.VT323 is a monospace pixel font modeled on early CRT terminal displays, lending every heading an authentic retro-computing feel.

Courier Prime

Class: font-courierUsage: The Notepad / CAREER.TXT typewriter view — anywhere verbatim text output is rendered in a fixed-width style.Courier Prime is a refined version of Courier designed specifically for extended reading, used wherever the UI simulates a text editor or terminal output.

All three families are loaded via a single Google Fonts @import at the top of main.css:

@import "https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,400;0,700;1,400;1,700
  &family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700
  &family=VT323
  &display=swap";

Scanlines Overlay

A fixed, full-viewport div.scanlines is rendered as the first child of the Layout shell. It sits above all page content at z-index: 9999 with pointer-events: none so it never intercepts clicks.

.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(
    to bottom,
    #fff0,
    #fff0 50%,
    #0000001a 50%,
    #0000001a
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 9999;
  opacity: .3;
}

The 4px background-size creates alternating transparent / 10%-black horizontal stripes at a 50/50 split, producing the classic cathode-ray tube horizontal line effect at 30% overall opacity.

{/* In Layout.tsx — first child of the root div */}
<div className="min-h-screen flex flex-col">
  <div className="scanlines" />
  {/* ... rest of shell */}
</div>

Scrollbar Styling

The ::-webkit-scrollbar pseudo-element family is overridden to render a native-looking Windows 98 scroll bar. The scrollbar width and height are both set to 16px — the pixel-perfect dimension of a Win98 scroll bar.

::-webkit-scrollbar {
  width: 16px;
  height: 16px;
  background: #dfdfdf;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
}

::-webkit-scrollbar-thumb {
  background: silver;
  box-shadow:
    inset -1px -1px #000,
    inset  1px  1px #fff,
    inset -2px -2px gray,
    inset  2px  2px #dfdfdf;
}

::-webkit-scrollbar-button:single-button {
  background: silver;
  display: block;
  height: 16px;
  width: 16px;
  box-shadow:
    inset -1px -1px #000,
    inset  1px  1px #fff,
    inset -2px -2px gray,
    inset  2px  2px #dfdfdf;
}

::-webkit-scrollbar-button:single-button:active {
  box-shadow:
    inset -1px -1px #fff,
    inset  1px  1px #000,
    inset -2px -2px #dfdfdf,
    inset  2px  2px gray;
}

The increment and decrement buttons display inline SVG arrow icons via background-image to match the original Win98 scroll-bar arrows.

Retro HR Divider

A custom .retro-hr class replaces the standard <hr> rule with a horizontally repeating row of pink star icons, drawn using an inline SVG background-image.

.retro-hr {
  border: 0;
  height: 20px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"
    width="20" height="20" viewBox="0 0 24 24" fill="none"
    stroke="%23FF1493" stroke-width="2" stroke-linecap="round"
    stroke-linejoin="round">
    <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02
      12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>
  </svg>');
  background-repeat: repeat-x;
  background-size: contain;
  margin: 2rem 0;
}

{/* Usage — drop anywhere to add a star-pattern divider */}
<hr className="retro-hr" />

The stars are stroked in retro-pink (#FF1493) and tile horizontally to fill the full container width, creating an eye-catching section separator that echoes the decorative GIF dividers common on 2000s personal homepages.

Getting Started

Core Concepts

Digital Domain: Win98 Design Tokens, Colors, and Shadows

Color Palette

Win98 Shadow Utilities

Typography

Comic Neue

VT323

Courier Prime

Scanlines Overlay

Scrollbar Styling

Retro HR Divider

Build docs developers (and LLMs) love

Getting Started

Core Concepts

Documentation Index

​Color Palette

​Win98 Shadow Utilities

​Typography

Comic Neue

VT323

Courier Prime

​Scanlines Overlay

​Scrollbar Styling

​Retro HR Divider

Build docs developers (and LLMs) love

Color Palette

Win98 Shadow Utilities

Typography

Scanlines Overlay

Scrollbar Styling

Retro HR Divider