Aqua Design System: Windows XP Glassmorphism Aesthetics

The Windows XP Developer Portfolio draws its entire visual language from the Frutiger Aero movement — the design era spanning roughly 2001–2013 that gave the world shiny translucent surfaces, vivid sky-to-teal gradients, glowing drop shadows, and the unmistakable glossy sheen of Windows XP’s Aqua chrome. Every component in this portfolio, from the desktop background to the smallest button, is an expression of that aesthetic. Rather than being a strict pixel-perfect recreation, the system distils the feeling of Aqua: glass that catches light, surfaces that breathe, and colours that feel alive against a luminous sky backdrop.

Design philosophy

Frutiger Aero sits at the intersection of natural imagery and digital polish. Its key pillars are:

Glossy surfaces

Elements appear as if cast from thick glass or polished resin, with bright specular highlights on top edges and subtle shadows underneath.

Backdrop blur

Translucent panels blur their backdrop, creating a sense of depth and layering without hiding the vibrant background behind them.

Vivid gradients

The signature XP sky gradient runs from #7fd9ff (sky blue) to #1de9b6 (bright teal), echoing the iconic Bliss wallpaper’s optimism.

Lens flare & sweep

Hover interactions trigger a white-highlight sweep animation across elements, mimicking light catching a glossy surface.

Core CSS classes

The design system is implemented as a set of custom CSS classes defined in assets/main.css. These classes are applied directly by the React components and are not generic Tailwind utilities — they encode specific Aqua visual decisions.

`frutiger-bg`

The root desktop background. Sets the canonical sky-to-teal gradient with fixed attachment so it stays stationary as content scrolls over it.

/* assets/main.css */
.frutiger-bg {
  background: linear-gradient(180deg, #7fd9ff, #1de9b6);
  background-attachment: fixed;
}

The fixed attachment is essential: it means the gradient belongs to the viewport, not the element, so layered glass panels appear to float in front of the sky rather than carrying their own background.

`aqua-glass`

The standard glass panel — the workhorse of the design system. Used by AquaPanel in its default (non-heavy) mode and throughout layout cards.

.aqua-glass {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.5);      /* white/50 */
  background-color: rgba(255, 255, 255, 0.3);  /* white/30 */
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
  backdrop-filter: blur(12px);
}

The faint blue-purple tint in the shadow (rgba(31,38,135,…)) references the classic “frosted glass” shadow colour used throughout Windows Vista’s Aero theme.

`aqua-glass-heavy`

A stronger variant of aqua-glass used for foreground panels, the Start Menu, and modals that need more visual weight.

.aqua-glass-heavy {
  border-width: 1px;
  border-color: rgba(255, 255, 255, 0.6);      /* white/60 */
  background-color: rgba(255, 255, 255, 0.5);  /* white/50 */
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.3);
  backdrop-filter: blur(16px);
}

AquaPanel accepts a heavy boolean prop that switches between the two variants:

// AquaPanel.js — heavy prop selects the stronger glass class
<AquaPanel heavy>
  <p>This panel uses aqua-glass-heavy for more opacity.</p>
</AquaPanel>

`aqua-button-base`

The core button style. The gradient simulates the classic Aqua pill button: a bright white specular highlight at the top, a transparent mid-section, and a solid teal base that evokes the bottom of a translucent lozenge.

.aqua-button-base {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9),
    rgba(255, 255, 255, 0.2) 40%,
    rgba(45, 212, 191, 0.8) 50%,
    #14b8a6
  );
  box-shadow:
    inset 0 2px 3px rgba(255, 255, 255, 0.8),
    inset 0 -2px 5px rgba(0, 0, 0, 0.2),
    0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(45, 212, 191, 0.5);
  font-weight: 700;
  letter-spacing: 0.025em;
  color: rgb(19, 78, 74); /* teal-900 */
  transition: all 0.2s;
}

.aqua-button-base:hover {
  background: linear-gradient(
    180deg,
    #ffffff,
    rgba(255, 255, 255, 0.4) 40%,
    rgba(45, 212, 191, 0.9) 50%,
    #0d9488
  );
  box-shadow:
    inset 0 2px 5px rgba(255, 255, 255, 0.9),
    inset 0 -2px 5px rgba(0, 0, 0, 0.3),
    0 6px 12px rgba(20, 184, 166, 0.3);
  transform: translateY(-0.125rem); /* lift: -2px */
}

.aqua-button-base:active {
  transform: translateY(0.125rem); /* press: +2px */
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.2);
}

`xp-titlebar`

Replicates the Windows XP Luna title bar — the iconic multi-stop blue gradient with a brighter stripe at the top and rich navy at the borders.

.xp-titlebar {
  background: linear-gradient(
    180deg,
    #0058e6,
    #3a93ff 8%,
    #288eff 40%,
    #127dff 88%,
    #0366e8
  );
  border-bottom: 1px solid rgb(30, 64, 175);
  font-weight: 700;
  letter-spacing: 0.025em;
  color: white;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

AquaWindow applies this class to its title bar row and pairs it with minimize and maximize buttons that use bg-blue-600, and a close button that uses bg-red-500.

`vista-gadget`

A lighter glass card that references Windows Vista’s sidebar gadgets. It uses a diagonal gradient for a three-dimensional “bevel” feel.

.vista-gadget {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 0.1)
  );
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.8),
    0 4px 15px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(12px);
}

`lens-flare`

A pure-CSS hover animation that sweeps a white diagonal highlight across the element, simulating light catching a glossy surface. Applied automatically to all AquaButton instances.

.lens-flare {
  position: relative;
  overflow: hidden;
}

.lens-flare::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    to bottom right,
    transparent,
    transparent 40%,
    rgba(255, 255, 255, 0.6),
    transparent 60%,
    transparent
  );
  transform: rotate(30deg) translate(-100%, -100%);
  transition: transform 0.6s ease-in-out;
  pointer-events: none;
}

.lens-flare:hover::after {
  transform: rotate(30deg) translate(100%, 100%);
}

The lens-flare CSS sweep is also available as a named @keyframes sweep animation. Components that use hover-group patterns (such as the Work History timeline items) can trigger it via group-hover:animate-[sweep_1s_ease-in-out] on a child element when a parent carries the group class.

Colour palette

All brand colours are used directly as hex literals in the custom CSS classes. The table below maps each semantic name to its value and its role in the system.

Token	Hex	Role
XP Blue	`#245edb`	Start button gradient origin, taskbar accents
Sky	`#7fd9ff`	Top of `frutiger-bg` gradient (desktop)
Teal	`#14b8a6`	Button base colour, skill bar fills
Teal-light	`#2dd4bf`	Button gradient mid-stop, border accents
Navy	`#0d3270`	Taskbar gradient terminus
Aqua-dark	`#0d9488`	Button hover gradient base
XP Blue-dark	`#0058e6`	Title bar gradient top stop
Bright Blue	`#3a93ff`	Title bar gradient highlight stripe

Typography

The portfolio uses two typeface stacks that map directly to Tailwind’s font-sans and font-display utilities.

Role	Stack	Class
Body / UI	`Lucida Grande, Segoe UI, Tahoma, Geneva, Verdana, sans-serif`	`font-sans` (default)
Headings / Display	`Nunito, sans-serif`	`font-display`

Nunito is loaded from Google Fonts (weights 400, 600, 700, 800) alongside Press Start 2P for any retro pixel-text accents. The browser fallback chain for body text deliberately prioritises Lucida Grande (macOS) and Segoe UI (Windows) — the two dominant system fonts of the XP/Vista era — before falling back to universally available sans-serifs.

/* Defined on <body> in assets/main.css */
body {
  font-family: Lucida Grande, Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Nunito, sans-serif;
}

Hover & interaction patterns

Every interactive element in the system follows the same three-state interaction model.

Rest state

Element renders with its default gradient, glass border, and drop shadow. No transform applied.

Hover state

Button lifts translateY(-2px), shadow intensifies and gains a teal glow, gradient brightens slightly. The lens-flare pseudo-element sweeps across from translate(-100%,-100%) to translate(100%,100%) over 0.6 s.

Active / pressed state

Element presses translateY(+2px), the outer shadow collapses to an inset shadow (inset 0 4px 8px rgba(0,0,0,0.2)), giving physical “click” feedback.

AquaButton additionally uses Framer Motion’s whileTap={{ scale: 0.95 }} on top of the CSS :active transform to give a satisfying spring-based squeeze. See Animations for full motion details.

Getting Started

Core Concepts

Aqua Design System: Windows XP Glassmorphism Aesthetics

Design philosophy

Glossy surfaces

Backdrop blur

Vivid gradients

Lens flare & sweep

Core CSS classes

`frutiger-bg`

`aqua-glass`

`aqua-glass-heavy`

`aqua-button-base`

`xp-titlebar`

`vista-gadget`

`lens-flare`

Colour palette

Typography

Hover & interaction patterns

Build docs developers (and LLMs) love

Getting Started

Core Concepts

Documentation Index

​Design philosophy

Glossy surfaces

Backdrop blur

Vivid gradients

Lens flare & sweep

​Core CSS classes

​frutiger-bg

​aqua-glass

​aqua-glass-heavy

​aqua-button-base

​xp-titlebar

​vista-gadget

​lens-flare

​Colour palette

​Typography

​Hover & interaction patterns

Build docs developers (and LLMs) love

Design philosophy

Core CSS classes

`frutiger-bg`

`aqua-glass`

`aqua-glass-heavy`

`aqua-button-base`

`xp-titlebar`

`vista-gadget`

`lens-flare`

Colour palette

Typography

Hover & interaction patterns