Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/neocities-dev/llms.txt

Use this file to discover all available pages before exploring further.

Three font families are loaded from Google Fonts and exposed as Tailwind utility classes. Each family serves a distinct typographic role that reinforces the Y2K aesthetic: a pixel-art display face for headings and labels, a monospaced workhorse for body copy and code, and a clean sans-serif for longer prose passages where readability takes priority over character.

​
Font Families

Tailwind ClassFamily NameCDN SourceUsage Context
font-pixelVT323Google FontsHeadings, nav labels, window title bars, status readouts — gives the retro pixel-art / CRT display feel
font-monoSpace MonoGoogle FontsDefault body font, <code> blocks, terminal output, data readouts, timestamps
font-sansInterGoogle FontsProse paragraphs, form labels, longer descriptive text blocks where readability matters more than aesthetics
Space Mono is the default body font — it is set directly on the body element in main.css. Every component inherits it unless explicitly overridden with font-pixel or font-sans.

​
Font Sizes

The following sizes from Tailwind’s default scale are used across the site:
ClassSizeLine HeightWhere Used
text-7xl4.5 rem1Home hero heading (responsive: applied at md:text-7xl)
text-5xl3 rem1Large feature headings
text-4xl2.25 rem2.5 remPage-level section titles
text-3xl1.875 rem2.25 remSub-section headers
text-2xl1.5 rem2 remCard titles, panel headings
text-xl1.25 rem1.75 remNav items, emphasized labels
text-lg1.125 rem1.75 remLead paragraphs, featured text
text-sm0.875 rem1.25 remSupporting metadata, captions
text-xs0.75 rem1 remBadges, timestamps, tertiary labels
text-[10px]10 px—Smallest decorative labels (arbitrary value)
VT323 works best at larger sizes. The font is designed on a dot-matrix grid and pixelates cleanly at multiples of its base grid — use text-xl and above for crisp rendering. At text-sm or below the letterforms become muddy; switch to font-mono or font-sans for small text.

​
Loading Fonts

Both families are loaded with a single @import at the top of main.css: 
@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Space+Mono:ital,wght@0,400;0,700;1,400&family=VT323&display=swap";
The display=swap parameter ensures text remains visible during font load using the system fallback, then swaps to the web font once it has downloaded — preventing invisible text flashes (FOIT). Loaded weights and styles:
  • Inter — 400 (regular), 600 (semibold)
  • Space Mono — 400 regular, 400 italic, 700 bold
  • VT323 — 400 only (the font has a single weight)

​
Combining Fonts

The most common pattern is a font-pixel heading followed by font-sans or font-mono body copy. The contrast between the pixel display face and the clean body type reinforces the retro-meets-modern visual tone: 
// Heading in VT323, body paragraph in Inter
<section>
  <h2 className="font-pixel text-4xl text-y2k-cyan tracking-wide uppercase mb-2">
    ABOUT_ME.EXE
  </h2>
  <p className="font-sans text-y2k-textMuted leading-relaxed">
    Full-stack developer with a soft spot for early-internet aesthetics,
    generative art, and building tools that feel as good as they work.
  </p>
</section>
For terminal-style readouts and data panels, pair font-mono labels with font-pixel section titles: 
// Status panel — pixel title, mono data rows
<div className="bevel-window p-4">
  <p className="font-pixel text-2xl text-y2k-magenta mb-4">SYS_STATUS</p>
  <ul className="font-mono text-sm space-y-1">
    <li className="text-y2k-lime">▶ CPU_LOAD .............. 12%</li>
    <li className="text-y2k-cyan">▶ MEMORY ............... 4.2 GB</li>
    <li className="text-y2k-textMuted">▶ UPTIME ............... 847 days</li>
  </ul>
</div>

Build docs developers (and LLMs) love

Get started for freeTalk to us