Skip to main content

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 is built on a tightly scoped design system: seven Y2K-era color tokens wired into Tailwind’s utility pipeline, three distinct typefaces for display, terminal, and body text, a family of flat offset-shadow utilities that create the illusion of depth without blur, and a small set of hand-authored CSS animations that bring the CRT scanline, rainbow gradient text, and marquee ticker to life. Everything is defined once in assets/main.css and applied uniformly across all components using Tailwind class names.

​
Color tokens

Seven custom colors extend Tailwind’s default palette. They cover the full range of Y2K aesthetics — near-black backgrounds, neon accent colors, and a blueviolet purple for secondary highlights. Every color is available as a bg-*, text-*, border-*, and opacity-modified variant throughout the codebase.
TokenCSS Class PrefixHex ValueUsage
y2k-blackbg-y2k-black / text-y2k-black / border-y2k-black#050505Page background; RetroWindow interiors
y2k-graybg-y2k-gray / border-y2k-gray#1a1a1aSecondary backgrounds; divider lines; skill bar tracks
y2k-lightgraybg-y2k-lightgray#2a2a2aTertiary surface tints (used at /20 and /30 opacity)
y2k-cyantext-y2k-cyan / border-y2k-cyan#00ffffPrimary accent; RetroWindow cyan variant; nav active states
y2k-magentatext-y2k-magenta / border-y2k-magenta#ff00ffSecondary accent; tag highlights; selection background
y2k-limetext-y2k-lime / bg-y2k-lime#39ff14CTA buttons; skill bar fill; marquee text
y2k-purpletext-y2k-purple / border-y2k-purple#8a2be2Tertiary accent; system_status.log window; case study sidebar
Always use the y2k-* token class names instead of raw hex values. Writing text-[#00ffff] bypasses the design system and creates maintenance burden — if a color shifts in a future iteration, only the token needs updating, not every arbitrary value across the codebase.

​
Typography

Three Google Fonts families are loaded at the top of assets/main.css via a single @import from fonts.googleapis.com. Each is mapped to a Tailwind utility class for consistent application: Silkscreen → .font-display Used for headings, page titles, button labels, and all display text. Silkscreen is a bitmap-style font that reads as if it were rendered on a low-resolution screen — perfect for section headers like ABOUT_ME.txt and CHARACTER_STATS.dat. Applied via the font-display class, which maps to font-family: Silkscreen, cursive. VT323 → .font-mono Used for terminal output, metadata, skill bar labels, guestbook names, and any text that should feel like it came out of a command-line interface. VT323 replicates the look of a classic dot-matrix terminal font. Applied via the font-mono class, which maps to font-family: VT323, monospace. It is also the default font for code, kbd, samp, and pre elements in the Tailwind base reset. Inter → .font-sans Used for body prose, article excerpts, project descriptions, and any longer-form text that needs legibility over personality. Inter is the neutral baseline that prevents the design from becoming unreadable. Applied via the font-sans class, which maps to font-family: Inter, sans-serif, and is also the default body font. 
/* Font assignments in main.css */
.font-display { font-family: Silkscreen, cursive; }
.font-mono    { font-family: VT323, monospace; }
.font-sans    { font-family: Inter, sans-serif; }
All heading elements (h1–h6) have font-family: Silkscreen, cursive and letter-spacing: 0.05em applied globally in the base layer, so structural headings automatically render in the display font without an explicit class.

​
Shadow utilities

The retro aesthetic relies on hard offset box shadows — no blur radius, no spread, just a solid 4×4 pixel offset that creates the effect of a raised surface casting a flat shadow. Six named utilities cover all the Y2K accent colors plus white and a dark gray for neutral contexts:
Utility ClassBox Shadow ValueUsed on
.shadow-retro-cyan4px 4px 0px 0px #00ffffCyan RetroWindow chrome; case study panel
.shadow-retro-magenta4px 4px 0px 0px #ff00ffMagenta RetroWindow chrome
.shadow-retro-lime4px 4px 0px 0px #39ff14Lime RetroWindow chrome; CTA buttons
.shadow-retro-purple4px 4px 0px 0px #8a2be2Purple RetroWindow chrome
.shadow-retro-white4px 4px 0px 0px #ffffffWhite RetroWindow chrome
.shadow-retro-gray4px 4px 0px 0px #333333Sticky note / neutral surface elements
Each shadow pairs with a matching hover:shadow-none + hover:translate-y-1 combination on interactive elements (e.g. the ENTER_SYSTEM button on the home page) to simulate a press — the shadow disappears and the element shifts 1px downward on hover.

​
CSS animation utilities

​
.rainbow-text

Applies an animated linear gradient to text using background-clip: text and color: transparent. The gradient cycles through magenta → cyan → lime → purple → magenta over a 3-second loop using a 200% background-size and the rainbow keyframe animation: 
.rainbow-text {
  background: linear-gradient(90deg, #f0f, #0ff, #39ff14, #8a2be2, #f0f);
  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; }
  to  { background-position: 200% center; }
}
Applied to the "I BUILD THINGS." headline on the home page.

​
.scanline

A position: absolute overlay that simulates a CRT monitor’s refresh scanline. A 100-pixel-tall translucent white band — defined as a linear-gradient(0deg, transparent, #ffffff1a, transparent) — travels from the top to the bottom of the viewport over a 10-second loop using the scanline keyframe: 
.scanline {
  width: 100%;
  height: 100px;
  z-index: 9999;
  position: absolute;
  pointer-events: none;
  background: linear-gradient(0deg, transparent, #ffffff1a, transparent);
  opacity: 0.1;
  animation: scanline 10s linear infinite;
}

@keyframes scanline {
  0%  { transform: translateY(-100vh); }
  to  { transform: translateY(100vh); }
}
The pointer-events: none declaration ensures the overlay never intercepts mouse events on interactive elements below it.

​
.animate-marquee

Drives the horizontal scrolling ticker in Marquee.js. The marquee keyframe translates the content element from 100% (off-screen right) to -100% (off-screen left) over 25 seconds at a constant linear pace. The marquee text is repeated four times in the DOM so there is always visible content during the scroll: 
.animate-marquee {
  animation: marquee 25s linear infinite;
}

@keyframes marquee {
  0%  { transform: translate(100%); }
  to  { transform: translate(-100%); }
}
The inner element also carries hover:[animation-play-state:paused], an arbitrary Tailwind variant that pauses the animation when the user hovers over the ticker — useful for actually reading the scrolling text.

​
Background treatment

The body element uses two stacked background images to create the signature dark CRT environment: 
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;
}
The radial-gradient creates a subtle vignette — slightly lighter in the center (#141414) fading to near-black at the edges (#050505). The repeating-linear-gradient layers a very faint (0.03 opacity) cyan horizontal line pattern every 4px, mimicking the horizontal scan lines of a CRT phosphor screen. Both layers are fixed to the viewport so they do not scroll with the page content. The scrollbar is also fully styled: a #050505 track with a 1px solid #333 left border, a #1a1a1a thumb with a 1px solid #ff00ff (magenta) border, and a full magenta fill on :hover.

Build docs developers (and LLMs) love

Get started for freeTalk to us