Y2K Styling System: Tailwind, Tokens, and CRT Effects

Retro Cosmic Arcade’s visual identity is built on a tightly scoped set of custom Tailwind tokens and utility classes that encode the Y2K aesthetic into reusable, composable primitives. Every color, border style, and effect has a named class so components stay declarative and the theme can be updated from a single source of truth. This page documents each layer of the styling system, from raw color values to animated CRT overlays.

Custom Color Tokens

The palette is deliberately limited — seven tokens cover everything from the void-of-space background to the neon accents that define the retro look. All tokens are registered as Tailwind theme extensions so they are available as bg-y2k-*, text-y2k-*, border-y2k-*, and so on.

Token	Hex	Role
`y2k-cyan`	`#4dffff`	Primary accent — link hovers, active nav items, cursor trail
`y2k-magenta`	`#ff4ad8`	Secondary accent — selection highlight, hover glows, warnings
`y2k-lime`	`#adff2f`	Tertiary accent — HP bars, success states, pixel borders
`y2k-black`	`#060010`	Body background — deep cosmic near-black
`y2k-panel`	`#150826`	Panel and card backgrounds — slightly lighter than the body
`y2k-silver`	`#d4d0e8`	Default text color — cool lavender-tinted white
`y2k-darkSilver`	`#6b6480`	Muted/secondary text, disabled states

/* Example: using color tokens in Tailwind utility classes */
.my-panel {
  @apply bg-y2k-panel text-y2k-silver border-y2k-cyan;
}

The three accent colors — cyan, magenta, and lime — map directly to the additive primary colors of a CRT phosphor display, reinforcing the monitor-screen metaphor at the design-language level.

Global Base Styles

Several baseline styles are applied globally to establish the Y2K atmosphere before any component renders:

/* Body: cosmic background + crosshair cursor */
body {
  background-color: #060010; /* y2k-black */
  cursor: crosshair;
  overflow-x: hidden;
}

/* Text selection highlight */
::selection {
  background-color: #ff4ad8; /* y2k-magenta */
  color: #ffffff;
}

The crosshair cursor is a direct reference to late-1990s gaming sites and Flash portals where crosshair cursors were a common power-user signal. The magenta selection highlight ensures even text selection feels on-brand.

Pixel Border Utility Classes

Three pixel-border classes wrap content in a chunky, low-resolution outline that evokes the border styles common in early web design tools like FrontPage and Dreamweaver. Each combines a solid border with an offset box-shadow to create the stacked pixel-edge look:

/* Cyan pixel border */
.pixel-border-cyan {
  border: 2px solid #4dffff;
  box-shadow: 4px 4px #ff4ad8;
}

/* Lime pixel border */
.pixel-border-lime {
  border: 2px solid #adff2f;
  box-shadow: 4px 4px #4dffff;
}

/* Magenta pixel border */
.pixel-border-magenta {
  border: 2px solid #ff4ad8;
  box-shadow: 4px 4px #adff2f;
}

Apply them directly to any element:

<div className="pixel-border-cyan p-4 bg-y2k-panel">
  Bordered content
</div>

Inset Bevel (`.inset-bevel`)

The .inset-bevel class replicates the inset depression effect used heavily in Win98-era dialog boxes and form fields. It uses directional border values — dark on top-left, cyan on bottom-right — to simulate a surface recessed into the panel:

.inset-bevel {
  border-top: 2px solid #060010;
  border-left: 2px solid #060010;
  border-bottom: 2px solid #4dffff;
  border-right: 2px solid #4dffff;
}

Use it on panels, text inputs, and content areas that should appear “pressed into” the surface.

Chrome Bevel Background (`.chrome-bg`)

.chrome-bg reproduces the raised 3D button or window-chrome look from Windows 95/98. It uses a silver-to-dark-silver gradient background with directional borders — white on top-left and dark on bottom-right — to simulate a convex surface catching light:

.chrome-bg {
  background: linear-gradient(to bottom, #d4d0e8, #6b6480);
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #333333;
  border-right: 2px solid #333333;
  color: #000;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
}

.chrome-bg:active {
  border-top: 2px solid #333333;
  border-left: 2px solid #333333;
  border-bottom: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  background: linear-gradient(to bottom, #6b6480, #d4d0e8);
}

This class is used by the ChromeButton component to render buttons that look like genuine Win98 UI widgets. The :active state reverses the borders and gradient to simulate physical depression.

CRT Scanline Overlay (`.scanlines`)

The .scanlines class applies a repeating striped background that simulates the horizontal scan lines of a cathode-ray tube monitor. It is applied directly to the overlay element — not via a pseudo-element:

.scanlines {
  background: linear-gradient(
    to bottom,
    transparent,
    transparent 50%,
    rgba(0, 0, 0, 0.2) 50%,
    rgba(0, 0, 0, 0.2)
  );
  background-size: 100% 4px;
  pointer-events: none;
}

The pointer-events: none rule ensures the overlay does not block any click or hover interactions beneath it. The .scanlines class is toggled at runtime by the Footer component, allowing visitors to enable or disable the effect:

// Footer component toggles the class on <body> or a wrapper element
document.body.classList.toggle("scanlines");

The pointer-events: none rule on .scanlines is critical — without it, the overlay would block all mouse interactions on the page. If you customise the overlay, always preserve this rule.

Typography

Four fonts are loaded from Google Fonts and used for distinct purposes:

Font	Usage
Inter	Body text — clean, modern, readable at small sizes
Major Mono Display	Display headings — monospaced, technical feel
Silkscreen	Labels, badges, UI chrome — authentic pixel/bitmap aesthetic
VT323	Terminal-style text, hit counters, status readouts

/* Google Fonts import (from main.css) */
@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;600
  &family=Major+Mono+Display
  &family=Silkscreen:wght@400;700
  &family=VT323&display=swap";

Applying the Design System

Color tokens
Pixel borders
Chrome button
CRT overlay

// Panel with y2k-panel background and cyan border
<div className="bg-y2k-panel text-y2k-silver pixel-border-cyan p-6">
  <h2 className="font-['Silkscreen'] text-y2k-cyan">SYSTEM STATUS</h2>
  <p className="text-y2k-darkSilver">All systems nominal.</p>
</div>

// Three border variants side by side
<div className="flex gap-4">
  <div className="pixel-border-cyan p-3">CYAN</div>
  <div className="pixel-border-lime p-3">LIME</div>
  <div className="pixel-border-magenta p-3">MAGENTA</div>
</div>

// Win98-style bevel button
<button className="chrome-bg px-4 py-2 font-['Silkscreen'] text-y2k-black">
  EXECUTE
</button>

// Toggle scanlines from the Footer component
function toggleScanlines() {
  document.body.classList.toggle("scanlines");
}

<button onClick={toggleScanlines}>
  [ TOGGLE CRT ]
</button>

Get Started

Architecture

Y2K Styling System: Tailwind, Tokens, and CRT Effects

Custom Color Tokens

Global Base Styles

Pixel Border Utility Classes

Inset Bevel (`.inset-bevel`)

Chrome Bevel Background (`.chrome-bg`)

CRT Scanline Overlay (`.scanlines`)

Typography

Applying the Design System

Build docs developers (and LLMs) love

Get Started

Architecture

Documentation Index

​Custom Color Tokens

​Global Base Styles

​Pixel Border Utility Classes

​Inset Bevel (.inset-bevel)

​Chrome Bevel Background (.chrome-bg)

​CRT Scanline Overlay (.scanlines)

​Typography

​Applying the Design System

Build docs developers (and LLMs) love

Custom Color Tokens

Global Base Styles

Pixel Border Utility Classes

Inset Bevel (`.inset-bevel`)

Chrome Bevel Background (`.chrome-bg`)

CRT Scanline Overlay (`.scanlines`)

Typography

Applying the Design System