Skip to main content

Documentation Index

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

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

Player One uses a deliberate two-font system drawn entirely from the Google Fonts library. Press Start 2P handles every heading and high-impact label, delivering the hard-edged pixel letterforms of classic 8-bit arcade cabinets. VT323 handles body copy and secondary text, providing a softer monospace terminal feel that remains legible at conversational sizes. Both fonts are served from Google Fonts via a single @import and never require local installation.

​
Press Start 2P

Press Start 2P is applied globally to all heading elements (h1 through h6) and to any element carrying the .font-pixel utility class. Its design replicates the ROM-based bitmap fonts found in late-1970s and early-1980s arcade hardware, where each glyph is constructed from a fixed-size pixel grid. 
<h2 className="font-pixel text-arcade-lime">SELECT STAGE</h2>

<span className="font-pixel text-glow-magenta text-arcade-magenta text-xs">
  PRESS START
</span>
Press Start 2P renders at pixel-perfect clarity only at integer multiples of its design grid. At text-xs (12 px) it closely matches the character size used on real arcade cabinet overlays and is the recommended minimum for labels. Avoid fractional or sub-12 px sizes — use VT323 for small body copy instead.
Google Fonts page: fonts.google.com/specimen/Press+Start+2P

​
VT323

VT323 is the default body font, set on the body element and inherited by all child elements that do not override it. Its design is modeled after the character generator ROM of the DEC VT220 terminal — a fixed-width display face that reads cleanly on screen at body sizes while retaining an unmistakably digital character. 
body {
  font-family: VT323, monospace;
  color: #a3ff12;
}
The .font-vt323 utility class applies VT323 explicitly to any element that needs to opt into the body font while nested inside a heading or otherwise inheriting Press Start 2P: 
<p className="font-vt323 text-xl text-arcade-cyan">
  INSERT COIN TO CONTINUE
</p>

<div className="font-vt323 text-sm text-arcade-orange">
  CREDITS: 03
</div>
Google Fonts page: fonts.google.com/specimen/VT323

​
Font Loading

Both fonts are loaded in a single Google Fonts request at the top of main.css. The display=swap parameter ensures text renders immediately in the system fallback font while the custom files download, eliminating layout shifts on first load. 
@import "https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap";
The @import must appear as the very first statement in main.css, before any other rules or @tailwind directives. Placing it after other declarations causes some CSS parsers to silently ignore the import.
The font stacks used throughout the project are: 
/* Headings and pixel labels */
.font-pixel,
h1, h2, h3, h4, h5, h6 {
  font-family: "Press Start 2P", cursive;
}

/* Body and terminal text */
body,
.font-vt323 {
  font-family: VT323, monospace;
}

​
Font Size Scale

Player One uses a subset of Tailwind’s default type scale. The table below maps each class to its computed size and the component context where it appears most often.
ClassSizeCommon Use
text-[8px]8 pxSmallest icon labels, HUD corner indicators
text-xs12 pxHUD labels, badges, cabinet metadata
text-sm14 pxNavigation items, tag pills
text-xl20 pxSection sub-headings, card titles
text-2xl24 pxPage titles on mobile
text-3xl30 pxSection headings
text-4xl36 pxHero title base size
md:text-6xl60 pxHero title on desktop viewports
{/* Responsive hero heading — 36px mobile, 60px desktop */}
<h1 className="font-pixel text-arcade-lime text-glow-lime text-4xl md:text-6xl glitch" data-text="PLAYER ONE">
  PLAYER ONE
</h1>

{/* Section heading */}
<h2 className="font-pixel text-arcade-cyan text-3xl">
  STAGE SELECT
</h2>

{/* Navigation item */}
<span className="font-pixel text-arcade-lime text-sm">
  HIGH SCORES
</span>

{/* Body / flavour text */}
<p className="font-vt323 text-xl text-arcade-lime">
  USE ARROW KEYS TO NAVIGATE. PRESS ENTER TO SELECT.
</p>
Press Start 2P at sizes below 12 px can become difficult to read, especially on non-retina screens where sub-pixel antialiasing cannot compensate for the dense pixel grid. Reserve text-xs and smaller exclusively for decorative labels or single-character tokens. For any body copy, descriptions, or multi-line text, use VT323 which retains strong legibility all the way down to text-sm.

​
Default Text Color

The global default text color is arcade-lime (#a3ff12), set directly on body. This means all VT323 body text reads as lime green against the arcade-black background without any additional class — matching the characteristic green phosphor of early vector-display arcade hardware. Override with text-arcade-cyan, text-arcade-magenta, or text-arcade-orange for semantic color differentiation.

Build docs developers (and LLMs) love

Get started for freeTalk to us