Skip to main content

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 uses a deliberate three-font system where each typeface carries a distinct visual job: VT323 delivers the chunky bitmap-pixel character for headings, JetBrains Mono provides a clean technical feel for code and terminal snippets, and Space Grotesk handles all body copy with contemporary legibility. Together they layer the Y2K nostalgia with modern readability. All three are loaded from a single Google Fonts @import URL and assigned to HTML elements through global body CSS rules compiled into assets/main.css.
tailwind.config.js is not included in the public repository. Neon Retro Web ships as a pre-built static site. Steps below that reference editing tailwind.config.js require the original source project. If you only have the compiled output, you can edit assets/main.css directly for one-off changes, but those changes will be overwritten if you ever rebuild from source.

​
Font Reference

FontTailwind ClassApplied ToGoogle Fonts Weights
VT323font-displayh1 – h6, .font-display400
JetBrains Monofont-code.font-code400, 700
Space Groteskfont-bodybody, .font-body300, 400, 600, 700

​
Google Fonts Import

All three families are loaded in a single @import at the top of assets/main.css: 
@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Space+Grotesk:wght@300;400;600;700&family=VT323&display=swap";
The display=swap parameter ensures text remains visible in the system fallback font while the custom fonts download, preventing invisible text during load (FOIT).

​
Font Assignments in Global CSS

The compiled CSS applies each font family to the appropriate elements globally so you never need to add classes to every heading or paragraph: 
/* Body and default text — Space Grotesk */
body {
  font-family: Space Grotesk, sans-serif;
}

/* All headings — VT323 bitmap display font */
h1, h2, h3, h4, h5, h6 {
  font-family: VT323, monospace;
  letter-spacing: 0.05em;
}

/* Compiled Tailwind utility classes for explicit overrides */
.font-body    { font-family: Space Grotesk, sans-serif; }
.font-code    { font-family: JetBrains Mono, monospace; }
.font-display { font-family: VT323, monospace; }

​
Swapping a Font

1

Update the Google Fonts @import URL

Replace the family name and weight parameters in the @import statement at the top of assets/main.css. For example, to swap Space Grotesk for Outfit:
@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Outfit:wght@300;400;600;700&family=VT323&display=swap";
2

Update the fontFamily key in tailwind.config.js

If you have the source project, find the fontFamily extension block and update the value for the font you are replacing. The compiled .font-body class in assets/main.css will then be regenerated on the next build:
// tailwind.config.js  (source project only — not in public repo)
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        body:    ["Outfit", "sans-serif"],          // was Space Grotesk
        code:    ["JetBrains Mono", "monospace"],   // unchanged
        display: ["VT323", "monospace"],            // unchanged
      },
    },
  },
};
If you are editing assets/main.css directly, find every occurrence of Space Grotesk and replace with Outfit.
3

Update the body CSS rule

The direct body { font-family: ... } rule in assets/main.css must be updated manually to match:
body {
  font-family: Outfit, sans-serif;
}
4

Rebuild the project (if using source)

npm run build
All .font-body classes and body text will now render in the new typeface.

​
Neon Glow Utilities

Two CSS utility classes apply a layered text-shadow neon glow to any element. They are defined in assets/main.css and available as plain class names — no Tailwind plugin required. 
/* assets/main.css */

/* Teal neon glow — matches y2k-teal (#06b6d4) */
.text-glow-teal {
  text-shadow:
    0 0 5px  #06b6d4,
    0 0 10px #06b6d4;
}

/* Magenta neon glow — matches y2k-magenta (#ec4899) */
.text-glow-magenta {
  text-shadow:
    0 0 5px  #ec4899,
    0 0 10px #ec4899;
}
Usage in JSX: 
<h1 className="font-display text-y2k-teal text-glow-teal">
  HELLO WORLD
</h1>

<span className="text-y2k-magenta text-glow-magenta">
  HOT PINK LABEL
</span>

​
Adding a New Glow Color Variant

To add a lime glow that matches the y2k-lime token, append a new rule to assets/main.css: 
/* New lime neon glow — matches y2k-lime (#a3ff12) */
.text-glow-lime {
  text-shadow:
    0 0 5px  #a3ff12,
    0 0 10px #a3ff12,
    0 0 20px #a3ff1280;  /* optional wider spread at half opacity */
}
Then use it in your components: 
<span className="text-y2k-lime text-glow-lime">NEW</span>
VT323 only ships at weight 400. The font has a single bitmap weight, so applying font-bold (or any Tailwind font-{weight} class) to an element using font-display or any h1–h6 heading has no visual effect — the browser cannot synthesize a bolder cut for a bitmap font. Use text-glow-teal or text-glow-magenta instead of bold to add visual emphasis to display headings.

Build docs developers (and LLMs) love

Get started for freeTalk to us