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 pursues two complementary aesthetics: the chrome and silver geometry of Windows 98’s desktop UI, and the garish, maximalist energy of late-1990s / early-2000s personal web pages. Every design decision — from the teal header and bevelled window panels to the sparkle cursor and scrolling webring banner — is intentional. The compiled Tailwind CSS in assets/main.css encodes all of these choices as reusable utility tokens and component classes.
Color palette
All custom colors are registered as Tailwind tokens and available via the standard bg-*, text-*, and border-* utility prefixes.
| Color Name | Tailwind Class | Hex Value | Usage |
|---|
| Windows Teal | bg-win-teal / text-win-teal | #008B8B | Header background, borders |
| Teal Light | border-win-teal-light | #00CED1 | Accents, sparkle particles, notebook ruled lines |
| Teal Mid | text-win-teal-mid | #20B2AA | Secondary teal text accents |
| Navy Blue | bg-win-blue / text-win-blue | #000080 | Win98 titlebar gradient start, loading bar |
| Silver Gray | bg-win-gray / border-win-gray | #C0C0C0 | Window chrome, buttons, scrollbar |
| Cream | bg-win-cream | #FAF6E7 | Page background, notebook paper base |
| Hot Pink | bg-y2k-pink / text-y2k-pink | #FF69B4 | Text selection highlight, sparkle particles, notebook margin line |
| Lime Green | text-y2k-lime / border-y2k-lime | #9AE600 | Visitor counter digits |
Typography
Three Google Fonts are loaded via the @import at the top of assets/main.css and mapped to Tailwind font-family utilities:
| Tailwind Class | Font Family | Use Cases |
|---|
font-pixel | Press Start 2P | Pixel-art headers, visitor counter label, retro UI text |
font-comic | Comic Neue | Casual body copy, informal sections |
font-courier | Courier Prime | Monospace code sections, terminal-style text |
font-times | Times New Roman | Default body font (set on <body> globally) |
<body> element uses font-times by default, matching the typical browser default of the late 1990s web. Override individual sections by applying one of the other font classes directly on an element.
Win98 CSS classes
Five semantic component classes are defined in the compiled CSS and applied throughout the app.
| Class | Description |
|---|
win98-window | Full window panel with silver (#C0C0C0) background and an outset bevel box shadow — the outer raised border of a Windows 98 dialog |
win98-titlebar | Navy-to-blue gradient bar (navy → #1084d0) with bold white text; includes minimize, maximize, and close buttons |
win98-content | White inner panel with a shadow-bevel-inset box shadow — the recessed content area inside a window |
win98-button | Silver raised button with Times New Roman text and an active press state that inverts the bevel shadows to simulate physical depression |
notebook-paper | Cream background with a repeating-linear-gradient of teal (#00CED1) horizontal rules every 25 px, and a semi-transparent pink (#ff69b480) vertical margin line at left: 1.5rem |
Bevel shadow system
The three-dimensional raised/lowered appearance of Win98 widgets is replicated entirely with inset box shadows — no border images or pseudo-elements for the bevel effect itself.
shadow-bevel-outset — used on win98-window and win98-button to produce a raised surface:
box-shadow:
inset -2px -2px #0a0a0a, /* bottom-right dark edge */
inset 2px 2px #ffffff, /* top-left highlight */
inset -3px -3px #808080, /* inner bottom-right mid */
inset 3px 3px #dfdfdf; /* inner top-left light */
shadow-bevel-inset — used on win98-content and progress/input fields to produce a sunken surface:
box-shadow:
inset -1px -1px #ffffff, /* bottom-right highlight */
inset 1px 1px #0a0a0a, /* top-left dark edge */
inset -2px -2px #dfdfdf, /* inner bottom-right */
inset 2px 2px #808080; /* inner top-left mid */
All color tokens, font families, and the bevel shadow utilities are compiled into assets/main.css from the Tailwind configuration. To add new custom tokens (e.g. a y2k-yellow accent or an 8bit font) you need the original Tailwind config and must rebuild with vite build. Editing main.css directly is possible for one-off overrides but will be overwritten by any future build.