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.

Every color in the Windows XP Portfolio traces back to one of two visual traditions: the cobalt-blue Luna theme of Windows XP (title bars, taskbar, Start button) and the aquatic teal palette of Apple’s Aqua / Frutiger Aero aesthetic (the sky-to-teal background, gel buttons, and frosted panels). The tokens below capture all named colors found in assets/main.css along with the key gradient recipes that combine them.

​
Brand color tokens

TokenHexUsage
XP Blue#245edbTaskbar, Start button, primary actions
XP Sky Light#3a93ffTaskbar gradient midpoint
XP Dark Navy#0d3270Taskbar gradient base, borders
Aqua Teal#14b8a6Button gradient, icon accents
Aqua Teal Light#2dd4bfButton hover, badge highlights
Frutiger Sky#7fd9ffBackground gradient top
Frutiger Teal#1de9b6Background gradient bottom
Glass Whitergba(255,255,255,0.302)Panel backgrounds (#ffffff4d)
Glass Borderrgba(255,255,255,0.502)Panel borders (#ffffff80)

​
Key gradients

​
Frutiger background

Applied by the frutiger-bg class. A fixed vertical sweep from sky blue to neon teal that covers the entire viewport and never scrolls. 
background: linear-gradient(180deg, #7fd9ff, #1de9b6);
background-attachment: fixed;

​
XP Taskbar

The three-stop gradient used for the bottom taskbar — descends from XP Blue through a lighter mid-blue and back down. 
background: linear-gradient(to bottom, #245edb, #3f8cf3, #245edb);

​
XP Title bar

Applied by the xp-titlebar class. A five-stop gradient that reproduces the subtle banding of the original Luna theme chrome. 
background: linear-gradient(
  180deg,
  #0058e6,
  #3a93ff 8%,
  #288eff 40%,
  #127dff 88%,
  #0366e8
);

​
Aqua Button

Applied by the aqua-button-base class. A four-stop vertical gradient that creates the illusion of a convex gel surface — bright white highlight at the top, transparent mid-section, teal shine, and solid teal base. 
background: linear-gradient(
  180deg,
  rgba(255, 255, 255, 0.902), /* #ffffffe6 */
  rgba(255, 255, 255, 0.2) 40%, /* #fff3 */
  rgba(45, 212, 191, 0.8) 50%, /* #2dd4bfcc */
  #14b8a6
);

​
Start button

The green three-stop gradient used for the XP Start button — matches the original Luna green pill shape. 
background: linear-gradient(to bottom, #3b8c4c, #4cb863, #3b8c4c);

​
Using colors in Tailwind

The project uses Tailwind’s arbitrary value syntax wherever an exact brand color is needed that falls outside Tailwind’s default palette. Common patterns: 
{/* Solid backgrounds */}
<div className="bg-[#245edb]">Taskbar</div>

{/* Gradient from/to */}
<div className="bg-gradient-to-b from-[#0058e6] to-[#0d3270]">
  Title bar
</div>

{/* Border color */}
<div className="border border-[#0040a8]">Window frame</div>

{/* Text color */}
<span className="text-[#4a6b8c]">Subtitle</span>
Standard Tailwind teal tokens (teal-400 = #2dd4bf, teal-500 = #14b8a6) map cleanly onto the Aqua palette and are preferred over arbitrary values when an exact match exists.

Build docs developers (and LLMs) love

Get started for freeTalk to us