Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dark-retro-webpage/llms.txt

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

Dark Retro Webpage ships with a deliberately curated three-font stack that reinforces the retro-computing aesthetic at every level of the UI. Press Start 2P provides the unmistakable 8-bit pixel lettering used in headings and labels. DM Mono handles all code-adjacent and metadata text. Space Grotesk serves as the default body font — contemporary enough to be readable at length, but with just enough geometric personality to feel at home alongside pixel art. Each family is exposed as a custom Tailwind utility class that overrides the framework’s built-in font-* defaults.

​
Press Start 2P

Utility class: .font-display Press Start 2P is a pixel font that faithfully reproduces the look of 8-bit arcade and home-computer text from the 1980s. It is best reserved for short strings — section headings, window title bars, retro-style labels, and decorative callouts — because its fixed-width pixel grid becomes difficult to read at body-copy lengths. 
// Section heading with pixel font
<h2 className="font-display text-[10px] uppercase tracking-widest text-[#a855f7]">
  Projects
</h2>

// Window title bar label
<span className="font-display text-[8px] text-[#0c0814]">
  C:\PORTFOLIO\ABOUT.EXE
</span>

// Decorative retro callout
<p className="font-display text-xs text-[#a3ff12]">
  LEVEL UP
</p>
Press Start 2P renders at a very small apparent size because each character is built from discrete pixels. Use text-[8px] or text-[10px] for labels, and text-xs / text-sm for slightly larger headings. Avoid text-lg and above unless the design specifically calls for oversized pixel art text.

​
DM Mono

Utility class: .font-mono DM Mono is a clean, highly legible monospace typeface. In this project it serves double duty: it is the default font for all h1–h6 heading elements (applied globally in main.css) and the go-to choice for code snippets, metadata lines, file paths, tag badges, and any UI element that benefits from fixed-width alignment. 
// Metadata line beneath a project card
<p className="font-mono text-xs text-[#94a3b8]">
  last modified: 2024-03-15
</p>

// Tag / badge chip
<span className="font-mono text-[10px] uppercase tracking-wider border border-[#22d3ee] px-2 py-1 text-[#22d3ee]">
  React
</span>

// File path display
<code className="font-mono text-sm text-[#5eead4]">
  src/components/Win98Window.tsx
</code>
Note that headings inherit DM Mono automatically via the global rule in main.css: 
h1, h2, h3, h4, h5, h6 {
  font-family: DM Mono, monospace;
}
You only need the .font-mono class explicitly when applying the monospace style to non-heading elements.

​
Space Grotesk

Utility class: .font-sans Space Grotesk is the default body typeface. It is applied globally on body in main.css and inherited by all elements that do not override it. You rarely need to apply .font-sans explicitly — use it only when you need to reset back to body text inside a .font-display or .font-mono context. 
// Explicit reset inside a mixed-font container
<div className="font-display">
  <span className="text-[8px]">SYSTEM STATUS</span>
  <p className="font-sans text-sm text-[#c0c8d8]">
    All systems operational. No errors detected in the last 24 hours.
  </p>
</div>

// Standard body copy — no class needed, inherited from body
<p className="text-sm leading-relaxed text-[#c0c8d8]">
  Welcome to my corner of the internet.
</p>

​
Google Fonts Import

All three families are loaded from Google Fonts via a single @import statement at the very top of assets/main.css (before any Tailwind directives): 
@import 'https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Press+Start+2P&family=Space+Grotesk:wght@300..700&display=swap';
This import requests:
  • DM Mono — regular and italic, weights 300 / 400 / 500
  • Press Start 2P — single weight (the font has no variants)
  • Space Grotesk — variable weight range 300–700
The display=swap parameter instructs the browser to render fallback text immediately while the font files download, preventing invisible text on first load. To add a new Google Font, append its family= parameter to the same URL: 
@import 'https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Press+Start+2P&family=Space+Grotesk:wght@300..700&family=VT323&display=swap';

​
Tailwind Font Utilities

At the bottom of assets/main.css, after the Tailwind utility layer, three custom component classes override Tailwind’s default font-mono and font-sans utilities and add the new font-display utility: 
/* Custom font utilities — defined after @tailwind utilities */

.font-display {
  font-family: "Press Start 2P", cursive;
}

.font-mono {
  font-family: DM Mono, monospace;
}

.font-sans {
  font-family: Space Grotesk, sans-serif;
}
Because these rules appear after @tailwind utilities, they take precedence over Tailwind’s built-in font-mono (which would otherwise resolve to a system monospace stack) and font-sans (which would resolve to a system sans-serif stack).

​
Changing Fonts

Follow these steps to swap out any of the three typefaces for a different Google Font:
1

Find a replacement on Google Fonts

Browse fonts.google.com and select your replacement font. Click Get font → Get embed code and copy the family= parameter from the generated @import URL.
2

Update the @import URL in main.css

Open assets/main.css and edit the @import line at the top. Replace the family= segment for the font you are swapping. For example, to replace Space Grotesk with Inter:
@import 'https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Inter:wght@300..700&family=Press+Start+2P&display=swap';
3

Update the CSS utility class

Find the corresponding .font-* class at the bottom of main.css and update the font-family value:
/* Before */
.font-sans {
  font-family: Space Grotesk, sans-serif;
}

/* After */
.font-sans {
  font-family: Inter, sans-serif;
}
Also update the body rule if you changed the default body font:
body {
  font-family: Inter, sans-serif;
}
4

Rebuild or reload

In development, Vite will hot-reload the CSS automatically. For a production deployment, run npm run build to regenerate the output bundle with the updated font references.
For better font-loading performance, add <link rel="preconnect" href="https://fonts.googleapis.com"> and <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> inside the <head> of index.html, before the CSS <link> tag. This opens the TCP connection to Google’s servers earlier in the page lifecycle, reducing the time until fonts are available. The display=swap parameter in the import URL is already set, so users will always see text immediately — preconnect just makes the swap happen faster.

Build docs developers (and LLMs) love

Get started for freeTalk to us