Skip to main content

Documentation Index

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

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

Web Surfer’s visual identity is built entirely on Tailwind CSS with a set of custom color tokens and font utilities that map directly to the Windows 98 / Y2K aesthetic. Every teal titlebar, silver button, and hot-pink text selection is driven by these tokens — swap them in one place and the whole site updates together.

​
Color palette

The following custom colors are registered as Tailwind theme tokens and used throughout the component tree. You can reference them with any Tailwind utility (bg-, text-, border-, etc.).
TokenHex valueWhere it’s used
win-teal#008B8BHeader background, window accents
win-teal-light#00CED1Sparkle particles, accent highlights, notebook-paper lines
win-blue#000080Win98 titlebar gradient start, navy elements
win-gray#C0C0C0Window chrome, button backgrounds, scrollbar
win-cream#FAF6E7Page background, notebook-paper base
y2k-pink#FF69B4Text selection highlight, sparkle particles, accents
y2k-lime#9AE600Visitor counter digits, lime accent text and borders

​
How to change colors

The color tokens live in tailwind.config.js at the root of the source project. The pre-built assets/main.css already contains the compiled output, so editing the config only takes effect after you rebuild (see the warning below). Here is the full color block to look for and modify:
tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'win-teal':       '#008B8B',
        'win-teal-light': '#00CED1',
        'win-blue':       '#000080',
        'win-gray':       '#C0C0C0',
        'win-cream':      '#FAF6E7',
        'y2k-pink':       '#FF69B4',
        'y2k-lime':       '#9AE600',
      }
    }
  }
}
Replace any hex value to recolor every component that references that token simultaneously. For example, changing win-teal to #2E8B57 shifts the header from dark cyan to sea green without touching any component file.

​
Fonts

Five font utility classes are available. Three load custom typefaces from Google Fonts; the remaining two fall back to system fonts.
ClassFont familyCharacter
font-pixelPress Start 2PBlocky pixel text — headings, labels
font-comicComic NeueFriendly rounded sans — body copy
font-courierCourier PrimeMonospaced serif — code, terminal output
font-georgiaGeorgia (system)Classic proportional serif — pull quotes, bylines
font-timesTimes New Roman (system)Classic serif — default body
All three Google Fonts are loaded via a single @import at the top of assets/main.css:
assets/main.css
@import "https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,400;0,700;1,400&family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=Press+Start+2P&display=swap";
To swap a font, replace the family name in the @import URL and update the corresponding fontFamily entry in tailwind.config.js, then rebuild.

​
Win98 CSS component classes

These classes are defined in assets/main.css as compiled Tailwind @layer components rules. Drop them on any element to instantly apply the Windows 98 chrome.
ClassWhat it renders
win98-windowSilver (#C0C0C0) panel with a four-layer outset bevel box-shadow
win98-titlebarnavy → #1084d0 horizontal gradient bar with white bold text
win98-contentWhite panel with a four-layer inset bevel box-shadow and 2 px margin
win98-buttonSilver raised button with inset bevel; shifts on :active to appear pressed
notebook-paperCream background with repeating win-teal-light horizontal lines every 25 px and a pink left margin rule
A minimal window built from these classes looks like this: 
<div class="win98-window">
  <div class="win98-titlebar">My Window Title</div>
  <div class="win98-content">
    Window content goes here.
  </div>
</div>
In React, the Win98Window component wraps all of this for you automatically — see Adding Pages for a usage example.

​
Sparkle cursor colors

The animated star particles that trail the cursor are drawn on a <canvas> element by components/SparkleCursor.js. The color array is hardcoded inside that file:
components/SparkleCursor.js
const colors = ['#00CED1', '#FF69B4', '#9AE600'];
These are the same teal, pink, and lime values used elsewhere in the theme. To change them, open SparkleCursor.js in the source repo and replace any of the three hex values, then rebuild.
Changing Tailwind color tokens or font families in tailwind.config.js requires a full CSS rebuild. The pre-built assets/main.css file contains compiled, atomic class names — changes to the config will not be reflected until you run npm run build (or npm run dev for a live dev server). Direct edits to assets/main.css in the built artifact will work but will be overwritten by the next build.

Build docs developers (and LLMs) love

Get started for freeTalk to us