Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/y2k-web/llms.txt

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

y2k-web ships with four Tailwind font-family utilities and six custom color tokens that together define its Y2K aesthetic. The font stacks combine a web-loaded pixel font with system typefaces that were ubiquitous on late-90s computers — Comic Sans, Impact, and Times New Roman — while the color palette is drawn from the saturated primaries and Windows chrome grays of the era. This page is the complete reference for both sets of tokens, including how and where each is typically used in the project.

​
Font stacks

All four font utilities are compiled into assets/main.css from tailwind.config.js under theme.extend.fontFamily, and can be applied anywhere Tailwind’s font-* utilities are valid.
UtilityFont stackUse case
font-pixel”Press Start 2P”, cursiveHeadings, UI labels, error messages
font-comicComic Sans MS, Comic Sans, cursiveBody text, guestbook messages, casual content
font-impactImpact, Charcoal, sans-serifHero titles, section headings, badges
font-timesTimes New Roman, Times, serifLong-form body text, blog posts, about text
font-pixel is the only web-loaded font; the other three rely on fonts that ship with every Windows and macOS installation. Press Start 2P is imported at the very top of assets/main.css via Google Fonts: 
@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap";
Press Start 2P is only available in a single regular weight — there are no bold, italic, or thin variants in the Google Fonts release. Applying font-bold or italic to font-pixel text will have no visual effect; the browser cannot synthesise a bolder or slanted version of a bitmap pixel font.

​
Color reference

The six custom Tailwind color tokens are compiled into assets/main.css and are available as text, background, border, ring, and any other Tailwind color utility.
TokenHexTypical usage
retro-blue#0000EEHeadings, borders, primary links
retro-pink#FF1493Accents, hover states, sparkle trail
retro-lime#00FF00Marquee text, terminal green
retro-cyan#00FFFFGradient starts, secondary accents
win-gray#C0C0C0Button backgrounds, navbar, window chrome
win-blue#000080Window title bars, active elements
Here is how to combine the font and color tokens in JSX to produce the typical y2k-web component styles: 
<h1 className="text-retro-blue font-impact text-4xl">My Portfolio</h1>
<p className="text-retro-pink font-pixel text-xs">NEW!</p>
<div className="bg-win-gray shadow-win-out p-2">
  <span className="text-retro-lime font-pixel">ONLINE</span>
</div>
  • The first line pairs font-impact with text-retro-blue for a bold, high-contrast page title.
  • The second uses the tiny font-pixel size with text-retro-pink for inline badge labels — a common pattern for “NEW!” or “HOT!” callouts.
  • The third wraps content in a win-gray panel with the shadow-win-out raised-button shadow, then uses text-retro-lime on font-pixel for a classic “ONLINE” status indicator.

​
Scrollbar styling

y2k-web includes custom WebKit scrollbar styles to extend the Windows 98 chrome aesthetic to the browser’s own scrollbar. The styles are defined in assets/main.css using the non-standard ::-webkit-scrollbar pseudo-element family: 
::-webkit-scrollbar { width: 16px; background: silver; border-left: 1px solid #000; }
::-webkit-scrollbar-thumb { background: silver; box-shadow: inset 1px 1px #fff, inset -1px -1px #000; }
::-webkit-scrollbar-button { background: silver; box-shadow: inset 1px 1px #fff, inset -1px -1px #000; height: 16px; }
The 16 px width matches the scrollbar width used by Windows 95/98. The inset box-shadow on the thumb and buttons recreates the same raised-chrome effect as shadow-win-out, making the scrollbar visually continuous with the rest of the Windows-style UI elements on the page.
WebKit scrollbar styling is a non-standard extension and only applies in Chrome, Edge, and Safari. Firefox uses the standardised scrollbar-color and scrollbar-width CSS properties instead — add those alongside the WebKit rules if consistent cross-browser scrollbar appearance is important:
/* Firefox */
* {
  scrollbar-color: #C0C0C0 #808080;
  scrollbar-width: auto;
}

Build docs developers (and LLMs) love

Get started for freeTalk to us