Skip to main content

Documentation Index

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

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

Typography in the Windows XP Portfolio is split between two complementary typefaces: the classic system-font stack anchored by Lucida Grande for body copy (evoking the exact rendering of macOS 10.0–10.9 and Windows XP’s Tahoma), and Nunito for display headings — a rounded humanist sans-serif that bridges the Frutiger Aero softness with modern readability. Both are declared in assets/main.css and mapped to Tailwind utility classes via a custom fontFamily configuration.

​
Font families

​
Body — font-sans

font-family: Lucida Grande, system-ui, sans-serif;
The Tailwind .font-sans utility resolves to this three-token stack. The body element also applies a longer fallback chain (Lucida Grande, Segoe UI, Tahoma, Geneva, Verdana, sans-serif) directly via CSS — but when you reach for the utility class in JSX, this is what you get. Used for all paragraph text, labels, and UI copy.

​
Display — font-display

font-family: Nunito, sans-serif;
Loaded from Google Fonts. Nunito’s rounded terminals and generous x-height give headings a friendly, bubbly quality that complements the glossy Aqua aesthetic. Used for page titles, window titles, card names, and any text that needs visual hierarchy.

​
Monospace — font-mono

font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
             'Liberation Mono', 'Courier New', monospace;
Standard Tailwind monospace stack, used for code snippets and technical labels.

​
Google Fonts import

Both variable-weight Nunito and Press Start 2P are loaded at the top of assets/main.css: 
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=Press+Start+2P&display=swap');
Press Start 2P is imported but not currently applied to any UI element — it was likely intended for a retro 8-bit accent style (score counters, Easter eggs, or a loading screen). The four Nunito weights (400, 600, 700, 800) cover all heading and display needs in the current design.

​
Tailwind font utility classes

ClassResolves toPurpose
.font-sansLucida Grande, system-ui, sans-serifBody text, UI copy
.font-displayNunito, sans-serifHeadings, names, window titles
.font-monoui-monospace, SFMono-Regular, Menlo, …Code, technical labels

​
Heading usage patterns

The project applies consistent Tailwind class combinations for each typographic level:
ContextClass string
Page titlefont-display text-4xl font-bold text-white drop-shadow-md
Window titlefont-display text-sm font-bold tracking-wider (inside xp-titlebar)
Card namefont-display text-xl font-bold text-slate-800
Body textfont-sans (inherits base text-slate-800)

​
Text shadow

The xp-titlebar class applies a hard text shadow directly in CSS to ensure the white label remains legible against the bright blue gradient: 
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
Page-level <h1> titles use Tailwind’s drop-shadow-md filter instead, which composites correctly over the transparent Frutiger background without a separate CSS rule.

​
Usage example

<!-- Display heading (page title) -->
<h2 class="font-display text-4xl font-bold text-white drop-shadow-md">
  My Projects
</h2>

<!-- Body text -->
<p class="font-sans text-slate-600 leading-relaxed">
  Frontend developer building nostalgic interfaces.
</p>

<!-- Window title (inside xp-titlebar) -->
<span class="font-display text-sm font-bold tracking-wider text-white">
  New Message
</span>

Build docs developers (and LLMs) love

Get started for freeTalk to us