Skip to main content

Documentation Index

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

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

developer.exe layers three typefaces to create a clear visual hierarchy that stays true to the arcade theme without sacrificing readability. “Press Start 2P” provides the chunky pixel-art letterforms used for top-level headings and calls to action. VT323 delivers a narrower, CRT-terminal feel for HUD readouts and score displays. Inter handles all body copy — it is a modern, highly legible sans-serif that keeps longer descriptions easy to read against the dark background. Each typeface maps to a dedicated Tailwind class so the intent is explicit in every JSX component.

​
Font Imports

All three typefaces are loaded from Google Fonts with a single @import declaration at the top of main.css: 
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Press+Start+2P&family=VT323&display=swap');
The display=swap parameter prevents a flash of invisible text by letting the browser render with a fallback font until the custom faces are ready.

​
Font Reference

FontTailwind ClassUse Case
Press Start 2Pfont-pixelPage titles, section headings, call-to-action labels
VT323font-hudHUD readouts, score displays, button labels, stat counters
Interfont-sansBody copy, descriptions, form labels, readable prose
System seriffont-serifQuest-log card style (used in Writing page)
The Tailwind config maps these classes directly to the font stacks declared in main.css: 
.font-pixel { font-family: "Press Start 2P", cursive; }
.font-hud   { font-family: VT323, monospace; }
.font-sans  { font-family: Inter, sans-serif; }
.font-serif { font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; }

​
Using the Font Classes

The three core classes cover the majority of typographic needs across the site: 
// Pixel heading — "Press Start 2P"
<h1 className="font-pixel text-3xl text-neon-yellow">PLAYER SELECT</h1>

// HUD readout — VT323
<span className="font-hud text-2xl text-neon-green">SCORE: 999,999</span>

// Body copy — Inter
<p className="font-sans text-gray-300">Readable description text</p>

​
Responsive Sizing

The site uses Tailwind’s md: breakpoint to scale headings up on larger viewports. The pattern is always a smaller base size paired with a larger md: override: 
<h1 className="font-pixel text-3xl md:text-5xl text-neon-yellow">
  DEVELOPER.EXE
</h1>

<p className="font-hud text-xl md:text-3xl text-neon-green">
  LOADING PORTFOLIO...
</p>
This ensures the pixel font remains legible on mobile without overwhelming the layout at desktop widths.

​
Uppercase Convention

Button labels and HUD text use the uppercase Tailwind class to match the all-caps style of arcade game interfaces. Combine it with tracking-widest for an authentic CRT readout feel: 
<button className="font-pixel text-xs uppercase tracking-widest text-neon-magenta pixel-border">
  CONTINUE
</button>

<span className="font-hud text-xl uppercase tracking-widest text-neon-green">
  LIVES: 03
</span>
Press Start 2P has a large font footprint — use it sparingly for headings only. Long body text in Press Start 2P becomes unreadable at small sizes because the font has very tight internal spacing and a fixed square grid that does not scale gracefully below text-sm.

Build docs developers (and LLMs) love

Get started for freeTalk to us