Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/neon-retro-web/llms.txt
Use this file to discover all available pages before exploring further.
Neon Retro Web is themed through two complementary layers: a set of custom Tailwind color tokens that map the Y2K neon palette to semantic names, and a handful of hand-crafted CSS utility classes that deliver the retro visual effects — scanlines, glowing text, a custom cursor, and dot-grid backgrounds. Both layers are compiled into assets/main.css. Changing a token value ripples through every bg-, text-, and border- class that references it across all components.
tailwind.config.js is not included in the public repository. Neon Retro Web ships as a pre-built static site — assets/main.css is the compiled Tailwind output. To customise color tokens, font families, or keyframe animations you need the original source project (which contains tailwind.config.js and the source CSS entry file). Edits made directly to assets/main.css will work for one-off tweaks but will be overwritten if you ever rebuild from source.
Color Tokens
Eight custom color tokens form the complete Y2K design palette. In the source project they are registered under theme.extend.colors in tailwind.config.js, which makes every Tailwind utility class (bg-, text-, border-, from-, via-, to-) gain a matching Y2K variant automatically. In the compiled assets/main.css you can see them used directly as values like rgb(5 5 13), rgb(6 182 212), etc.
// tailwind.config.js (source project only — not in public repo)
module.exports = {
theme: {
extend: {
colors: {
"y2k-bg": "rgb(5 5 13)", // #05050d — near-black page background
"y2k-panel": "rgb(10 10 26)", // #0a0a1a — dark card / panel background
"y2k-teal": "rgb(6 182 212)", // #06b6d4 — primary neon accent
"y2k-turquoise": "rgb(34 211 238)", // #22d3ee — lighter teal highlight
"y2k-magenta": "rgb(236 72 153)", // #ec4899 — hot-pink / magenta accent
"y2k-lime": "rgb(163 255 18)", // #a3ff12 — neon lime green
"y2k-violet": "rgb(167 139 250)", // #a78bfa — soft violet
"y2k-orange": "rgb(255 140 0)", // #ff8c00 — retro orange
},
},
},
};
How each token is used
| Token | Hex | Primary use |
|---|
y2k-bg | #05050d | bg-y2k-bg on <body> and full-bleed page wrappers |
y2k-panel | #0a0a1a | bg-y2k-panel on cards, modal windows, sidebar panels |
y2k-teal | #06b6d4 | border-y2k-teal, text-y2k-teal, scrollbar track/thumb, glow effects |
y2k-turquoise | #22d3ee | text-y2k-turquoise hover states, gradient endpoints, dot-grid fill |
y2k-magenta | #ec4899 | text-y2k-magenta, selection highlight, custom cursor border |
y2k-lime | #a3ff12 | border-y2k-lime, text-y2k-lime for status badges and alerts |
y2k-violet | #a78bfa | text-y2k-violet, retro box-shadow accents on windows |
y2k-orange | #ff8c00 | text-y2k-orange, border-y2k-orange for warning states |
Changing the primary accent color
To swap the primary accent from teal to, say, a neon green, update the y2k-teal token value and optionally the y2k-turquoise highlight in the source project’s tailwind.config.js:
// tailwind.config.js (source project only — not in public repo)
colors: {
"y2k-teal": "rgb(57 255 20)", // #39ff14 — neon green replaces teal
"y2k-turquoise": "rgb(100 255 80)", // #64ff50 — lighter neon green highlight
// ... rest of tokens unchanged
},
npm run build), every bg-y2k-teal, text-y2k-teal, border-y2k-teal, and gradient class in the project updates automatically — including the scrollbar, focus rings, and glow utilities that hard-reference #06b6d4 in the CSS (update those manually too).
The .crt-overlay Utility
The .crt-overlay class adds a CRT monitor effect — horizontal scanlines and an RGB channel separation tint — using a ::before pseudo-element layered over its host element.
/* assets/main.css */
.crt-overlay {
position: relative;
}
.crt-overlay::before {
content: " ";
display: block;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background:
linear-gradient(
#12101000 50%,
#00000040 50%
),
linear-gradient(
90deg,
#ff00000f,
#00ff0005,
#0000ff0f
);
z-index: 10;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
pointer-events: none, so it never blocks clicks or keyboard events.
To disable the CRT effect on a specific element, simply remove the crt-overlay class from that element’s JSX. To remove it site-wide, find every usage in the component tree and delete the class name from each result. No CSS changes are required.
The Custom Cursor
The site sets cursor: crosshair on body and supplements it with a 24 px circular DOM tracker that uses mix-blend-mode: difference to invert colors beneath it. The tracker expands on hover.
/* assets/main.css — custom cursor states */
.custom-cursor {
width: 24px;
height: 24px;
border: 2px solid #ec4899; /* y2k-magenta */
border-radius: 50%;
position: fixed;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: width 0.2s, height 0.2s, background-color 0.2s;
mix-blend-mode: difference;
}
.custom-cursor.hovering {
width: 40px;
height: 40px;
background-color: #ec489933; /* y2k-magenta at ~20% opacity */
border-color: #22d3ee; /* y2k-turquoise */
}
border color in .custom-cursor and the border-color in .custom-cursor.hovering in assets/main.css.
To disable the custom cursor entirely, remove the <CustomCursor /> component from your root layout and delete the cursor: crosshair rule from the body styles so the browser default arrow cursor is restored:
/* Remove or comment out in assets/main.css */
body {
/* cursor: crosshair; */ /* delete this line */
}
The .scrollbar-retro Utility
The .scrollbar-retro class styles the WebKit scrollbar track, thumb, and arrow buttons to match the Y2K teal palette. The scrollbar is 16 px wide with a #0a0a1a (y2k-panel) track and a #06b6d4 (y2k-teal) thumb and border.
/* assets/main.css */
.scrollbar-retro::-webkit-scrollbar {
width: 16px;
background: #0a0a1a;
border-left: 1px solid #06b6d4;
}
.scrollbar-retro::-webkit-scrollbar-thumb {
background: #06b6d4;
border: 2px solid #0a0a1a;
}
.scrollbar-retro::-webkit-scrollbar-button:single-button {
background-color: #0a0a1a;
display: block;
border-style: solid;
height: 16px;
width: 16px;
}
/* Up arrow */
.scrollbar-retro::-webkit-scrollbar-button:single-button:vertical:decrement {
border-width: 0 8px 8px 8px;
border-color: transparent transparent #06b6d4 transparent;
}
/* Down arrow */
.scrollbar-retro::-webkit-scrollbar-button:single-button:vertical:increment {
border-width: 8px 8px 0 8px;
border-color: #06b6d4 transparent transparent transparent;
}
The .bg-dots-pattern Utility
.bg-dots-pattern tiles a 20 × 20 px dot grid using a radial gradient. The dots are filled with turquoise at 15% opacity, creating a subtle depth texture for hero sections and panel backgrounds.
/* assets/main.css */
.bg-dots-pattern {
background-image: radial-gradient(
circle,
rgba(34, 211, 238, 0.15) 1px,
transparent 1px
);
background-size: 20px 20px;
}
Body Background and Selection Colors
The page background and text-selection highlight are set directly on body in the compiled CSS:
/* assets/main.css */
body {
overflow-x: hidden;
background-color: rgb(5 5 13); /* y2k-bg — #05050d */
font-family: Space Grotesk, sans-serif;
color: rgb(229 231 235); /* gray-200 */
cursor: crosshair;
}
body *::selection,
body::selection {
background-color: rgb(236 72 153); /* y2k-magenta */
color: rgb(255 255 255);
}
background-color value inside ::selection with any other Y2K token color value. If you have access to the source project, rebuild after changing the token; otherwise edit assets/main.css directly for a one-off tweak.
For runtime theme switching (for example, toggling between a teal and magenta accent), consider promoting your Y2K token values to CSS custom properties and referencing them from the Tailwind config via var(). This lets JavaScript update document.documentElement.style.setProperty('--color-y2k-teal', '#39ff14') without a rebuild::root {
--color-y2k-teal: rgb(6 182 212);
--color-y2k-magenta: rgb(236 72 153);
}
// tailwind.config.js (source project only — not in public repo)
colors: {
"y2k-teal": "var(--color-y2k-teal)",
"y2k-magenta": "var(--color-y2k-magenta)",
}