Skip to main content

Documentation Index

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

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

Dev Nexus separates typographic responsibility across three purpose-built typefaces. Inter keeps prose readable at any weight. Syne brings display-level personality to headings with its geometric, wide-set forms. JetBrains Mono grounds UI labels and code blocks in the developer aesthetic that runs through the whole project.

​
Font Role Reference

RoleFamilyWeights LoadedTailwind ClassDefault HTML Elements
Body / proseInter300, 400, 500, 600(base, no class needed)body, p, span, li
Display / headingsSyne400, 500, 600, 700, 800.font-displayh1, h2, h3, h4, h5, h6
Code / UI labelsJetBrains Mono400, 500, 700.font-monocode, pre
The base font-family stack in main.css: 
/* Body — applied globally via html/body */
font-family: Inter, sans-serif;

/* Display — applied via .font-display and h1–h6 defaults */
font-family: Syne, sans-serif;

/* Mono — applied via .font-mono, code, pre */
font-family: 'JetBrains Mono', monospace;

​
How Fonts Are Loaded

All three families are pulled from Google Fonts via a single @import at the top of assets/main.css. No separate <link> tags are needed in index.html: 
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;700&family=Syne:wght@400;500;600;700;800&display=swap');
The display=swap parameter means the browser renders text in a fallback system font immediately and swaps to the loaded font once it arrives — preventing invisible text during load and keeping the Lighthouse performance score stable.

​
Letter-Spacing Patterns

Dev Nexus uses letter-spacing deliberately to separate typographic layers:
ContextTailwind ClassValueWhere Used
Monospace UI labelstracking-widest0.1emSection identifiers, tag labels, skill category headings
Navigation itemstracking-wider0.05emTop-nav link text
Home page subtitletracking-[0.2em]0.2emThe // SUBTITLE line beneath the hero heading
The tracking-[0.2em] value uses Tailwind’s arbitrary value syntax. It is intentionally wider than any preset to give the home page subtitle a distinct visual rhythm against the Syne display heading above it: 
<h1 class="font-display text-5xl font-bold text-moonlight text-glow-violet">
  VOID WALKER
</h1>
<p class="font-mono text-xs text-electric-violet tracking-[0.2em] uppercase">
  // FULL-STACK ENGINEER
</p>

​
Font Usage in Components

The pattern used consistently throughout Dev Nexus combines a Syne display heading with a JetBrains Mono subtitle line. The subtitle uses a // prefix to lean into the code-comment aesthetic: 
<h1 className="font-display text-4xl font-bold text-moonlight">
  TITLE
</h1>
<p className="font-mono text-xs text-electric-violet tracking-widest">
  // SUBTITLE
</p>
Practical variations seen across pages: 
{/* Section heading with violet glow */}
<h2 className="font-display text-3xl font-bold text-moonlight text-glow-violet">
  PROJECTS
</h2>

{/* Skill category label — mono + mint accent */}
<span className="font-mono text-xs text-ghost-mint tracking-widest uppercase">
  // FRONTEND
</span>

{/* Body prose — Inter with reduced opacity for hierarchy */}
<p className="text-moonlight/70 leading-relaxed">
  A paragraph of body copy rendered in Inter at 70% moonlight opacity.
</p>

{/* Card metadata — small mono in subdued moonlight */}
<time className="font-mono text-xs text-moonlight/50 tracking-wider">
  2024-03
</time>

​
Changing Fonts

To swap any of the three typefaces: Step 1 — Update the Google Fonts import URL in assets/main.css. Replace the family name and weight list with your chosen font: 
/* Before */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&...');

/* After — swap Syne for Space Grotesk */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&...');
Step 2 — Update the CSS font-family declarations in main.css wherever the old family name appears — for example on h1–h6 and the .font-display selector: 
h1, h2, h3, h4, h5, h6,
.font-display {
  font-family: 'Space Grotesk', sans-serif; /* was Syne */
}
No component files need to change — because every heading already uses the .font-display class, updating the CSS declaration propagates the new family everywhere automatically.

Build docs developers (and LLMs) love

Get started for freeTalk to us