Windows XP Luna

Summary

Windows XP Luna (codename Luna; officially “Windows XP style,” 2001) is the default consumer OS chrome of the early broadband era: wet plastic title bars, rounded corners, saturated blue/olive/silver skins, a green Start button, red Close, multi-stop vertical gradients, and Charles O’Rear’s Bliss hill-and-sky wallpaper as the emotional default. It is skeuomorphic OS polish — soft plastic, glow, mouseover “light-up” — not glass.

Place in the braid: Luna sits between late Y2K plastic–metallic cool and full Frutiger Aero / Windows 7 Aero glass. Nature wallpaper + optimistic consumer OS is the Frutiger-adjacent hinge (calm hills, friendly color, “fresh / desirable / colorful / simple” per MS Visual Guidelines). Royale / Energy Blue (XP Media Center Edition 2005) pushes Luna glossier and brighter — often cited as a paleo-Aero / early Frutiger bridge — without DWM glass.

WinXP Luna ≠ Win7 Aero. Luna = opaque plastic gradients + Bliss. Aero = translucent blurred glass + live previews. Steal Luna for plastic chrome / Start-green CTAs / nature wallpaper romance; steal Aero for frosted shells (Windows 7 Aero).

Confidence: High on schemes (Blue / Olive Green / Silver), chrome cues (green Start, red Close, rounded title bars, Trebuchet captions), Bliss lore, and MS guideline adjectives. High on guideline hex samples paraphrased from the 2001 Windows XP Visual Guidelines. Medium on any single “brand-official” hex as the title-bar stop (gradients are multi-stop; recreations synthesize). Low on pixel-perfect luna.msstyles bitmaps without side-by-side OS captures.

Visual language

Color

Three Luna color schemes (MS Visual Guidelines + Wikipedia visual styles):

Scheme	Codename	Mood (MS copy)	Steal for
Default Blue	—	Fresh, vivid, engaging — “signature of the product”	Primary product chrome, energetic blue frames
Olive Green	Homestead	Comforting, natural, home — softer / neutral	Calm sidebars, “homestead” personal surfaces
Silver	Metallic	Metallic, precision-sculpted, neutral	Cool chrome accents adjacent to Y2K silver

Signature accents (Blue Luna): energetic blue chrome · green Start (discoverability) · red Close · amber/yellow highlights · soft beige dialog fills (#ECE9D8-era). Gradients and glows do the dimensionality — not flat fills.

Do: Keep chrome blue/olive/silver; keep wallpaper nature (grass + sky).
Don’t: Call Luna glass, or paint every panel Fisher-Price primary without hierarchy.

Typography

From MS Windows XP Visual Guidelines (2001):

Trebuchet MS Bold ~10pt — window title bars only
Tahoma 8 / 9 / 11 — system default / body
Franklin Gothic Medium — large headers (>14pt); never body
Verdana Bold 8 — tear-off / floating palette titles

For product UI: one humanist sans (Tahoma / Segoe lineage) for body; optional Trebuchet-like bold only on fake “window” captions. Do not ship Franklin Gothic as default body.

Materials & chrome

Wet plastic / soft plastic title bars and taskbar — multi-stop vertical gradients with a thin “reflection band” near the bottom of the caption strip (glossy plastic, not blur glass)
Rounded title-bar corners; caption buttons that light up on hover
Green Start pill + blue taskbar with lighter notification tray
Beveled-but-soft controls: radio, checkbox, scrollbars, command buttons with 1px corner indent
32-bit alpha icons (Iconfactory-era) — soft edges, upper-left light, drop shadow
Dialog surfaces: warm off-white / beige, not pure white SaaS cards

Motifs

Bliss adjacency — rolling green hills + clear blue sky + cirrus (nature stock as OS mood; see lore below)
Start-green CTA — one high-discoverability green control that begins the journey
Red Close / severe actions — color as severity (blue neutral · green start · yellow log-off · red shut-down / close)
Plastic window frame as ornament — optional “OS window” chrome around a card
Royale gloss (optional variant) — same Luna proportions, more vivid / reflective Energy Blue

Motion

Cue	Product guidance
Hover “light-up” on Start / caption buttons	Brief brightness / saturation bump; 100–150ms
Window open/minimize	Soft ease; avoid Flip 3D / Aero peek language
Taskbar grouping	Period OS behavior — not a modern IA requirement

Bliss (wallpaper lore)

Bliss (orig. Bucolic Green Hills) is Charles O’Rear’s Jan 1996 photograph of cleared hills near the Napa–Sonoma county line (phylloxera had removed vineyards). Shot on Mamiya RZ67 + Velvia; O’Rear states he did not Photoshop it. Microsoft bought full rights via Corbis (~2000), renamed it Bliss, and shipped it as Luna’s default wallpaper — freedom / possibility / calm / warmth, green+blue matching XP branding. Later lore: possibly the most-viewed photograph in history; the hill is vineyards again (Goldin+Senneby After Microsoft, 2006/07).

Rights note for Designy: Bliss itself is Microsoft-owned — do not redistribute the wallpaper asset. Use CC / PD nature hills + sky as mood stand-ins, or describe Bliss verbally. Frutiger adjacency is the mood (nature + optimistic consumer OS), not a license to ship Bliss.

Skeuomorph vs Aero (contrast)

	XP Luna	Vista / Win7 Aero
Surface	Opaque glossy plastic	Translucent blurred glass
Engine	Visual styles (`msstyles`) bitmaps	DWM compositing
Wallpaper romance	Bliss hills/sky	Still nature/aurora, but chrome is see-through
Place in braid	Late Y2K → Frutiger-adjacent hinge	Canonical Frutiger Aero UI specimen

Royale (Energy Blue, MCE 2005) — Luna proportions, glossier/vivid blue, Energy Bliss wallpaper; Zune / Royale Noir / Embedded as darker cousins. Useful as “shinier Luna,” still not Aero glass.

Do / Don’t

Do

Treat Luna as plastic chrome vocabulary + nature wallpaper mood — Frutiger-adjacent, not synonym of Frutiger Aero.
Steal green Start / red Close color-as-severity; multi-stop title-bar gradients; rounded soft frames.
Pair with Bliss-mood nature stock (grass + sky), then optionally graduate into Frutiger glass (Windows 7 Aero).
Use Olive for soft personal surfaces; Silver when you want a cool metallic tick toward Y2K.
Optional Royale gloss as a brighter Luna variant — label it Royale, not Aero.

Don’t

Don’t call Luna “Aero glass” or recreate DWM blur and brand it XP.
Don’t redistribute Bliss / proprietary XP bitmaps as product assets.
Don’t mash Fisher-Price primaries + Y2K bevel + Aero glass in one viewport without hierarchy.
Don’t equate Luna with anime-shrine / Nekoweb and plain HTML craft — overlap is era PC romance only.
Don’t ship Trebuchet/Franklin as the whole UI type system.

Iconic references

Attachments/design-xp-luna-napa-hills.jpg Rolling hills, Napa Valley — Bliss-mood stand-in (nature + sky optimism). Not the Microsoft-owned Bliss photograph; same regional landscape language.
Source: Wikimedia Commons — Rolling hills of the Napa valley.jpg · License: CC BY 2.0 (nigelpepper / Flickr)

Attachments/design-xp-luna-titlebar-buttons.png Luna (normal) title-bar caption buttons — blue min/max, red Close highlight. Canonical chrome micro-detail.
Source: Wikimedia Commons — VirtualBox … LUNA NORMAL.png · License: PD-shape (simple geometry) · Screenshot of Windows XP UI hosted on Commons

Attachments/design-xp-luna-firefox-chrome.png Firefox 3 on Windows XP — period desktop with Luna blue window chrome framing a free browser (composition captures era plastic frames + taskbar).
Source: Wikimedia Commons — Mozilla Firefox 3 in MS XP.png · License: free software / CC portions; Caveat: includes proprietary Windows UI elements (Commons de minimis note) — used here for personal vault research of Luna look, same pattern as Windows 7 Aero’s Vista screenshot.

Suggested tokens (directional)

Hexes below mix MS Visual Guidelines 2001 samples (High where cited) with synthesized multi-stop gradient stops for CSS (Medium — not a single official brand book swatch for every pixel).

:root {
  /* Blue Luna — guideline / system samples (High) */
  --luna-blue-deep: #003399;      /* base / welcome navy */
  --luna-blue-frame: #0058E6;     /* ~#0062EA window/taskbar family */
  --luna-blue-glow: #14A5F4;      /* light taskbar / highlight */
  --luna-blue-select: #316AC5;    /* menu highlight */
  --luna-start-green: #31A431;    /* Start family (~#008D00 → #5EDB5E) */
  --luna-start-lit: #5EDB5E;
  --luna-close-red: #E81123;      /* directional Close; MS used saturated reds */
  --luna-dialog: #ECE9D8;         /* classic XP dialog beige (widely observed) */
  --luna-amber: #FFCC00;

  /* Olive / Silver moods (Medium — scheme direction, not pixel-official) */
  --luna-olive: #9CA86C;
  --luna-silver: #C0C4CE;

  /* Title-bar plastic gradient — synthesized multi-stop (Medium) */
  --luna-titlebar: linear-gradient(
    180deg,
    #0997ff 0%,
    #0053ee 8%,
    #0050ee 40%,
    #0066ff 88%,
    #003dd7 96%,
    #003dd7 100%
  );

  --font-caption: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-ui: Tahoma, "Segoe UI", system-ui, sans-serif;
  --radius-window: 8px; /* rounded Luna caption corners — approximate */
}

Confidence on hexes: High for named guideline RGB samples (#003399, #316AC5, #31A431, #FFCC00, etc.). Medium for title-bar multi-stop synthesis and Olive/Silver mood tokens.

Application recipes

Surface	Recipe
Marketing / nostalgia beat	Bliss-mood hills/sky BG + one plastic blue “window” card + green Start-like CTA
App shell	Prefer Frutiger Aero / Windows 7 Aero glass for default product chrome; Luna as Easter egg / shrine frame
Personal / porch	Olive Luna + nature tile or photo; optional fake title bar — keep readable body (Y2K layout if handmade shell)
Accent only	Green Start pill + red close affordance on an otherwise Frutiger page

Sources

http://interface.free.fr/Archives/GUI_Xp.pdf — Windows XP Visual Guidelines (MS Design Team, Aug 2001): schemes, fonts, colors, Start/taskbar copy
https://en.wikipedia.org/wiki/Windows_XP_visual_styles — Luna / Royale / Zune / placeholders
https://en.wikipedia.org/wiki/Bliss_(photograph) — O’Rear / Corbis / Microsoft rights / lore
https://betawiki.net/wiki/Luna · https://betawiki.net/wiki/Royale — build history, Homestead/Metallic, Energy Blue
https://cari.institute/aesthetics/frutiger-aero — Frutiger Aero definition (gloss / skeuomorph / nature macros)
https://frutigeraeroarchive.org/history — Aqua → XP → Aero walkthrough
https://commons.wikimedia.org/wiki/Category:Windows_XP_screenshots — Commons policy caveats on proprietary chrome
Cross-links: Frutiger Aero, Windows 7 Aero, Y2K, Nekoweb and plain HTML