Y2K Color Tokens, Borders, and Body Styles — Theming

Retro Cosmic Arcade’s visual identity is built on a compact set of hand-picked color tokens compiled into the stylesheet, and used consistently across every component. This page covers every color token, the pixel border utility classes, the CRT scanline effect, the Win98-inspired chrome button, and global body styles — giving you everything you need to retheme the project without hunting through individual components.

This is a compiled SPA — Tailwind CSS is pre-compiled into assets/main.css. There is no tailwind.config.js to edit at runtime. To change tokens or add new utility classes you must edit the source Tailwind config and rebuild the project.

Color Tokens

All color tokens are defined in the Tailwind source config under theme.extend.colors. Each token is compiled into the bundled assets/main.css as a Tailwind utility class (e.g. bg-y2k-cyan, text-y2k-cyan, border-y2k-cyan). Because the project ships as a compiled SPA, adding or changing a token requires editing the source config and rebuilding.

Token name	Hex value	Tailwind class prefix	Typical use
`y2k-black`	`#060010`	`bg-y2k-black`	Page background, deepest dark surfaces
`y2k-panel`	`#150826`	`bg-y2k-panel`	Card/panel backgrounds, secondary surfaces
`y2k-cyan`	`#4dffff`	`text-y2k-cyan`	Primary accent, borders, glow effects
`y2k-magenta`	`#ff4ad8`	`text-y2k-magenta`	Secondary accent, shadows, selection colour
`y2k-lime`	`#adff2f`	`text-y2k-lime`	Tertiary accent, HP bar fill, highlights
`y2k-silver`	`#d4d0e8`	`text-y2k-silver`	Chrome button top gradient, muted text
`y2k-darkSilver`	`#6b6480`	`text-y2k-darkSilver`	Chrome button bottom gradient, borders

Changing a Color

Retro Cosmic Arcade is a compiled SPA. There is no editable tailwind.config.js in the deployed output — Tailwind has already been compiled into assets/main.css. To change a color token you must edit the Tailwind source config and run vite build (or your build script) to regenerate the stylesheet.

Open the Tailwind source config

In the project source, find tailwind.config.js (or tailwind.config.ts) and locate the theme.extend.colors block.

tailwind.config.js

export default {
  theme: {
    extend: {
      colors: {
        'y2k-black':      '#060010',
        'y2k-panel':      '#150826',
        'y2k-cyan':       '#4dffff',
        'y2k-magenta':    '#ff4ad8',
        'y2k-lime':       '#adff2f',
        'y2k-silver':     '#d4d0e8',
        'y2k-darkSilver': '#6b6480',
      },
    },
  },
}

Update the hex value

Replace the hex string for whichever token you want to change, then rebuild. All Tailwind utility classes that reference that token update automatically in the new compiled output.

Update CSS custom classes if needed

Some utility classes in assets/main.css reference raw hex values directly (e.g. .pixel-border-cyan, .chrome-bg). If you change y2k-cyan you should also update those references to keep the design consistent. See the sections below.

Pixel Border Utility Classes

Three pixel-art border variants are available as global CSS classes. Each pairs a solid 2px border in one accent colour with a flat 4px offset shadow in a contrasting accent, producing a classic chunky pixel look without blur or opacity.

Combine any pixel-border class with Tailwind’s rounded-none utility to guarantee perfectly sharp pixel corners. Many browsers apply a slight radius by default; rounded-none overrides it so the border aligns exactly with the pixel grid.

pixel-border-cyan
pixel-border-lime
pixel-border-magenta
inset-bevel

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

Use this on cards, panels, and interactive elements you want to stand out with the primary cyan accent.

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

Great for skill bars, status panels, and any element where lime-green conveys an “active” or “healthy” state.

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

Ideal for badges, notifications, and call-to-action elements that need the most visual energy.

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

Simulates a pressed-in Win98 inset effect. The dark top/left edges and bright bottom/right edges create the illusion of depth without any box-shadow spread.

CRT Scanline Effect

The .scanlines class renders a CSS-only CRT overlay using a repeating linear gradient of alternating transparent and semi-transparent dark stripes at 4px intervals. It uses pointer-events: none so it sits visually on top without blocking clicks.

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

Component usage: The Polaroid component places a <div className="scanlines absolute inset-0" /> inside each card’s image area to give the preview panel a screen-like texture. Global toggle: The site Footer exposes a toggle button that adds or removes the scanlines class directly on document.body, applying the CRT overlay to the entire viewport. The relevant logic looks like:

document.body.classList.toggle('scanlines');

Applying .scanlines to document.body also overlays fixed-position UI elements such as the cursor trail and the navigation bar. If you add new fixed overlays, test them with the scanline toggle enabled to ensure sufficient contrast.

Chrome Button Style

The .chrome-bg class reproduces the Windows 98 / early-2000s bevel button aesthetic using a silver gradient and asymmetric borders that flip on :active to simulate a physical press.

.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,.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);
}

The gradient runs from y2k-silver (#d4d0e8) at the top to y2k-darkSilver (#6b6480) at the bottom, matching the two silver tokens in the palette. To change the button colour, update both the gradient stops and the corresponding Tailwind tokens.

Global Body Styles

Three global body rules enforce the Y2K aesthetic across the entire page:

Background

background-color: #060010 (y2k-black) — a near-black deep purple that reads as pure black on most monitors but keeps warmth under glow effects.

Cursor

cursor: crosshair on body, overridden to cursor: pointer on <a> tags. The crosshair reinforces the arcade targeting aesthetic site-wide.

Text Selection

::selection background is set to #ff4ad8 (y2k-magenta) with white text, so any text the user highlights flashes with the magenta accent colour.

Site Pages

Customization

Y2K Color Tokens, Borders, and Body Styles — Theming

Color Tokens

Changing a Color

Pixel Border Utility Classes

CRT Scanline Effect

Chrome Button Style

Global Body Styles

Background

Cursor

Text Selection

Build docs developers (and LLMs) love

Site Pages

Customization

Documentation Index

​Color Tokens

​Changing a Color

​Pixel Border Utility Classes

​CRT Scanline Effect

​Chrome Button Style

​Global Body Styles

Background

Cursor

Text Selection

Build docs developers (and LLMs) love

Color Tokens

Changing a Color

Pixel Border Utility Classes

CRT Scanline Effect

Chrome Button Style

Global Body Styles