Skip to main content

Documentation Index

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

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

dev-mode’s type system pairs two Google Fonts that together nail the retro-terminal aesthetic: VT323 brings chunky pixel-art lettering to every heading, while JetBrains Mono provides the crisp, programmer-friendly monospace face used for body copy, descriptions, and code snippets. Both are mapped to short Tailwind utility classes so you never have to leave JSX to apply them.

​
VT323 — Pixel Headings

VT323 is a free Google Font modeled after the character ROM of old IBM-compatible CRT terminals. Its tall, blocky glyphs read as unmistakably “arcade” at large sizes while staying legible down to around 18 px. In dev-mode it is applied globally to every heading level (h1–h6) via the Tailwind font-pixel class.
PropertyValue
Font familyVT323
SourceGoogle Fonts
Tailwind classfont-pixel
Applied toAll h1–h6 headings
Weights loaded400 (the only weight VT323 ships)
{/* Standard arcade heading with CRT aberration */}
<h1 className="font-pixel text-arcade-cyan text-shadow-crt text-6xl">
  WELCOME TO DEV MODE
</h1>

{/* Section label at a smaller size */}
<h2 className="font-pixel text-arcade-magenta text-4xl tracking-wide">
  SKILLS.EXE
</h2>
VT323 only ships a single weight (400). Bold rendering is simulated by the browser through synthetic bolding, which can look blurry. Prefer increasing font-size or adding a text-shadow-glow-* class for emphasis instead of reaching for font-bold.

​
JetBrains Mono — Body & Code

JetBrains Mono is an open-source monospace font designed by JetBrains specifically for developer ergonomics: distinctive letterforms for easily confused characters (0 vs O, l vs 1), generous line spacing, and ligature support for common code constructs. It covers all body text, button labels, skill descriptions, and inline code in dev-mode.
PropertyValue
Font familyJetBrains Mono
SourceGoogle Fonts
Tailwind classfont-mono
Applied toBody text, descriptions, buttons, code
Weights loaded400 (regular), 700 (bold)
{/* Body description */}
<p className="font-mono text-arcade-white leading-relaxed text-base">
  Full-stack developer crafting interfaces that feel as good as they look.
</p>

{/* Bold button label */}
<button className="font-mono font-bold text-arcade-bg bg-arcade-cyan px-6 py-2 rounded">
  DOWNLOAD CV
</button>

{/* Inline code */}
<code className="font-mono text-arcade-lime bg-arcade-purple px-1 rounded text-sm">
  npm run dev
</code>

​
Google Fonts Import

Both fonts are loaded in a single @import at the top of src/assets/main.css. The display=swap parameter ensures the browser renders fallback text immediately and swaps in the custom fonts once downloaded, avoiding invisible text during page load. 
@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=VT323&display=swap";
The Tailwind config then maps the loaded family names to utility classes: 
// tailwind.config.js
export default {
  theme: {
    extend: {
      fontFamily: {
        pixel: ['"VT323"', 'monospace'],
        mono:  ['"JetBrains Mono"', 'monospace'],
      },
    },
  },
}

​
CRT Text Shadow — Chromatic Aberration

The .text-shadow-crt utility deserves its own callout because it is the single biggest contributor to the “old monitor” feel of dev-mode’s headings. It works by casting two offset shadows in opposite directions — magenta to the right and cyan to the left — mimicking the color fringing caused by misaligned electron guns in a real CRT tube. 
.text-shadow-crt {
  text-shadow:  2px 0 0 rgba(255, 43, 214, 0.8),  /* magenta right */
               -2px 0 0 rgba(0, 240, 255, 0.8);   /* cyan left     */
}
Combine it with font-pixel and a large neon color for the full effect: 
<h1 className="font-pixel text-arcade-cyan text-shadow-crt text-7xl">
  GAME OVER
</h1>
For secondary headings where you want a softer glow rather than hard aberration, reach for text-shadow-glow-lime or text-shadow-glow-magenta instead — see Color Palette → Neon Glow Utilities for their definitions.

​
Changing Fonts

To swap either typeface for a different Google Font:
  1. Update the import URL in src/assets/main.css with the new family name and weights from fonts.google.com.
  2. Update tailwind.config.js so the fontFamily mapping points to the new family string.
  3. Tailwind’s utility classes (font-pixel, font-mono) continue to work unchanged — only the underlying font family shifts.
/* Replace VT323 with Press Start 2P */
@import "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Press+Start+2P&display=swap";
Press Start 2P is a popular VT323 alternative that looks even more game-cartridge authentic, but its glyphs are physically smaller at the same font-size. If you switch to it, increase all heading sizes by roughly 25–30% to maintain visual weight.

Build docs developers (and LLMs) love

Get started for freeTalk to us