Documentation Index
Fetch the complete documentation index at: https://mintlify.com/apursley2012/neon-retro-sys-admin/llms.txt
Use this file to discover all available pages before exploring further.
NeonRetro Sys_Admin’s visual identity comes from a tightly controlled set of neon color tokens, three purpose-built font families, and a handful of CSS animations that produce the CRT scanline, rainbow gradient, and ticker-tape effects. All of these are defined in two places: the Tailwind configuration (which registers the y2k-* color tokens as utility classes) and assets/main.css (which loads the fonts and defines the keyframe animations). Understanding how these two files work together lets you retheme the portfolio from deep-space black and hot-pink magenta to any palette you choose.
Color tokens
The Y2K palette is registered as custom Tailwind colors under the y2k namespace. Every token generates the full set of bg-, text-, and border- utility classes used throughout the component tree.
| Token | Utility prefix | Hex value | Primary usage |
|---|
y2k-black | bg/text/border-y2k-black | #050505 | App background, modal backgrounds |
y2k-gray | bg/text/border-y2k-gray | #1a1a1a | Borders, card surfaces, scrollbar track |
y2k-lightgray | bg/text/border-y2k-lightgray | #2a2a2a | Subtle backgrounds, hover states |
y2k-cyan | bg/text/border-y2k-cyan | #00ffff | Secondary accent, stable-state indicators |
y2k-magenta | bg/text/border-y2k-magenta | #ff00ff | Primary accent, selection highlight, scrollbar thumb |
y2k-lime | bg/text/border-y2k-lime | #39ff14 | Call-to-action elements, focus rings |
y2k-purple | bg/text/border-y2k-purple | #8a2be2 | Tertiary accent, RetroWindow purple variant |
main.css, each token appears as a Tailwind CSS custom property, for example:
.bg-y2k-magenta {
--tw-bg-opacity: 1;
background-color: rgb(255 0 255 / var(--tw-bg-opacity, 1));
}
.text-y2k-cyan {
--tw-text-opacity: 1;
color: rgb(0 255 255 / var(--tw-text-opacity, 1));
}
.border-y2k-lime {
--tw-border-opacity: 1;
border-color: rgb(57 255 20 / var(--tw-border-opacity, 1));
}
theme.extend.colors block and rebuild. All components that reference the token will pick up the new value automatically.
// tailwind.config.js (in the original source project)
module.exports = {
theme: {
extend: {
colors: {
'y2k-black': '#050505',
'y2k-gray': '#1a1a1a',
'y2k-lightgray': '#2a2a2a',
'y2k-cyan': '#00ffff',
'y2k-magenta': '#ff00ff',
'y2k-lime': '#39ff14',
'y2k-purple': '#8a2be2',
}
}
}
}
Retro drop-shadow variants
Each RetroWindow color variant pairs a border-y2k-* class with a matching shadow-retro-* class to produce the hard, offset drop-shadow that defines the Y2K window aesthetic. These are also registered as Tailwind custom box-shadow utilities:
| Shadow utility | Hex value | Paired border |
|---|
shadow-retro-magenta | 4px 4px 0px 0px #ff00ff | border-y2k-magenta |
shadow-retro-cyan | 4px 4px 0px 0px #00ffff | border-y2k-cyan |
shadow-retro-lime | 4px 4px 0px 0px #39ff14 | border-y2k-lime |
shadow-retro-purple | 4px 4px 0px 0px #8a2be2 | border-y2k-purple |
shadow-retro-gray | 4px 4px 0px 0px #333333 | border-y2k-gray |
shadow-retro-white | 4px 4px 0px 0px #ffffff | border-white |
color="magenta" on a <RetroWindow> component, it applies border-y2k-magenta and shadow-retro-magenta together. To add a new color variant, register both the border token and the shadow token in the Tailwind config.
Fonts
Three typefaces are imported from Google Fonts at the top of assets/main.css. Each serves a distinct typographic role in the interface:
/* assets/main.css — line 1 */
@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Silkscreen:wght@400;700&family=VT323&display=swap";
| Family | Utility class | Role |
|---|
Silkscreen | .font-display | All headings (h1–h6), window title bars, section labels |
VT323 | .font-mono | Terminal text, code blocks, <code> and <pre> elements |
Inter | .font-sans | Body copy, descriptions, form inputs — readable at small sizes |
Silkscreen and VT323 are the two fonts that define the Y2K aesthetic; Inter ensures the longer reading passages remain comfortable. The h1–h6 elements are globally set to font-family: Silkscreen, cursive in main.css, so all heading elements in the app inherit it automatically.
Swapping a font: Replace the family name in the @import URL and update the corresponding CSS declaration. For example, to swap Silkscreen for Press Start 2P:
/* Step 1 — update the @import in assets/main.css */
@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Press+Start+2P&family=VT323&display=swap";
/* Step 2 — update the heading rule */
h1, h2, h3, h4, h5, h6 {
font-family: 'Press Start 2P', cursive;
letter-spacing: 0.05em;
}
Animations
Four keyframe animations drive the signature visual effects. All are defined in assets/main.css.
@keyframes rainbow — cycling gradient text
Animates background-position across a 200% wide gradient to produce a continuously cycling neon rainbow on any element with the .rainbow-text utility class.
.rainbow-text {
background: linear-gradient(90deg, #ff00ff, #00ffff, #39ff14, #8a2be2, #ff00ff);
background-size: 200% auto;
color: transparent;
-webkit-background-clip: text;
background-clip: text;
animation: rainbow 3s linear infinite;
}
@keyframes rainbow {
0% { background-position: 0% center; }
100% { background-position: 200% center; }
}
@keyframes scanline — CRT scanline overlay
Translates a semi-transparent gradient strip vertically from -100vh to 100vh over the entire viewport, simulating the refresh line of an old CRT monitor. Applied via the .scanline class on the fixed overlay element.
.scanline {
width: 100%;
height: 100px;
position: absolute;
pointer-events: none;
background: linear-gradient(0deg, transparent, rgba(255,255,255,0.1), transparent);
opacity: 0.1;
animation: scanline 10s linear infinite;
}
@keyframes scanline {
0% { transform: translateY(-100vh); }
100% { transform: translateY(100vh); }
}
opacity value (up to about 0.15) to make the scanline more visible. Lower it toward 0.05 for a subtler effect.
@keyframes marquee — news ticker
Slides an element from 100% (fully off-screen right) to -100% (fully off-screen left) at a constant speed. The .animate-marquee class applies it with a 25s linear infinite timing.
@keyframes marquee {
0% { transform: translate(100%); }
100% { transform: translate(-100%); }
}
.animate-marquee {
animation: marquee 25s linear infinite;
}
25s duration. A higher value scrolls more slowly; a lower value scrolls faster. The ticker pauses on hover via .hover:[animation-play-state:paused].
@keyframes flicker — subtle opacity flicker
Oscillates opacity between 0.95 and 1.0 to simulate the gentle flicker of a CRT or neon tube. It is defined in main.css for optional use on neon text elements.
@keyframes flicker {
0% { opacity: 0.95; }
50% { opacity: 1; }
100% { opacity: 0.98; }
}
Body background
The app background combines two layered gradients on the body element: a radial vignette that fades from #141414 at center to #050505 at the edges, and a repeating linear grid of near-invisible rgba(0,255,255,0.03) lines that give the impression of a scan grid without dominating the content.
body {
background-image:
radial-gradient(circle at 50% 50%, #141414, #050505),
repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(0, 255, 255, 0.03) 2px,
rgba(0, 255, 255, 0.03) 4px
);
background-attachment: fixed;
}
rgba(0, 255, 255, 0.03) alpha to 0.06 for a more visible grid, or swap 0deg to 90deg for vertical lines.
The assets/main.css and assets/main.js files in this repository are compiled Vite output — they are not editable source files. To make lasting theme changes, you need access to the original source project that contains tailwind.config.js, the uncompiled component .jsx files, and the pre-build src/main.css (or equivalent). Changes made directly to the compiled assets/main.css will be overwritten on the next npm run build.