Save your changes to
The blue Save gel pulses — Apple shipped the default button breathing
Aqua
Vendor design language
Apple's official name for Mac OS X's interface, unveiled by Steve Jobs at Macworld in January 2000 — 'we made the buttons on the screen look so good you'll want to lick them.'
also called Aqua interface, Mac OS X Aqua
Aqua is the design language Mac OS X launched with in 2000: controls rendered as translucent candy gel — deep specular highlights over luminous water-blue — on pinstriped surfaces, with gumdrop red/yellow/green window controls, soft drop shadows layering the windows, and fluid animation everywhere (the default button literally pulsed, and windows poured into the Dock through the genie effect). Apple pitched it as an interface with the fluidity and depth of water.
Scope: This entry covers the original 2000s-era Aqua (Mac OS X 10.0 through roughly Tiger). Later macOS flattened and frosted the language step by step — don't blend brushed-metal-era, Yosemite, or today's macOS into it; Apple's current glass language is Liquid Glass.
If you called it…
…you meant Aqua.
What makes it this — the defining signals
- Candy-gel controlsDepth & light
Buttons and scrollbar thumbs look like translucent gel drops: a bright specular highlight across the top, an inner glow beneath, and color that seems lit from inside.
- Pinstriped surfacesSurface & material
Window backgrounds and title bars carry fine alternating light stripes — the signature Aqua wallpaper-of-the-chrome.
- Gumdrop window controlsGeometry & borders
The close/minimize/zoom trio as glossy red, yellow, and green candy spheres in the title bar's top-left corner.
- Luminous water blueColor & contrast
The palette centers on Aqua's namesake: saturated, water-lit blue for default buttons, selection, scrollbars, and progress.
Style brief — paste into your agent
Create the surface using Apple's original Aqua (early Mac OS X) design language. Defining signals: candy-gel controls — luminous water-blue fills with a bright specular highlight across the top half and an inner glow, e.g. layered radial-gradient highlight over linear-gradient(#5f9ff5, #1862d8); fine pinstriped window surfaces (repeating-linear-gradient, ~1px stripes at low contrast); gumdrop red/yellow/green window controls as glossy spheres, top-left; the default button gently pulsing (a slow glow loop, disabled under prefers-reduced-motion); soft deep window shadows. Keep layout and density flexible — this is chrome and controls, not a layout system. Do not drift into generic glassmorphism: Aqua's material is glossy opaque gel on pinstripes, not blurred frosted panels. Preserve 4.5:1 text contrast on gel fills (white text with a subtle down-shadow is period-correct), full keyboard focus states, and reduced-motion alternatives for the pulse.
Often confused with Y2K Digital Aesthetic
The same little app, rendered in both styles — only the style changes, so the difference you see IS the difference.
Welcome back
Pick up where you left off.
Aqua
Welcome back
Pick up where you left off.
Aqua
This is Aqua because it's one vendor's complete, systematic OS language — the same gel buttons, pinstripes, and gumdrops on every Mac.
It would be just Y2K if it were the era's freelance futurism — liquid chrome, lens flares, techno type — without Apple's specific system behind it. (Aqua is the OS-shaped island inside the Y2K sea.)
vs Windows Aero: This is Aqua because the material is candy gel — opaque luminous color with gloss, sitting on pinstripes. It would become Windows Aero if the candy turned to architecture: transparent blurred glass window FRAMES showing the desktop through them.
vs Skeuomorphism: This is Aqua because the gloss is a house material, not an imitation — a gel button doesn't pretend to be any real-world object. It would become skeuomorphism if surfaces started imitating nameable things — leather calendars, paper notepads, brushed-metal players (which Apple indeed layered on top of Aqua later).
Full style DNA
Depth & light
Buttons and scrollbar thumbs look like translucent gel drops: a bright specular highlight across the top, an inner glow beneath, and color that seems lit from inside.
Deep, soft drop shadows float windows in real layers over the desktop — depth Mac OS 9 never had.
A blurred panel without the gel gloss is a different, later idea — that's glassmorphism/vibrancy territory, not Aqua.
Surface & material
Window backgrounds and title bars carry fine alternating light stripes — the signature Aqua wallpaper-of-the-chrome.
Geometry & borders
The close/minimize/zoom trio as glossy red, yellow, and green candy spheres in the title bar's top-left corner.
Color & contrast
The palette centers on Aqua's namesake: saturated, water-lit blue for default buttons, selection, scrollbars, and progress.
Motion
The default button pulses like breathing, and windows minimize through the liquid genie effect — motion sells the water metaphor.
In code — optional starting points
The brief above is framework-neutral; these are concrete handles if your stack matches.
| CSS | background: radial-gradient(120% 90% at 50% -10%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 50%), linear-gradient(180deg, #6aa6f8 0%, #1862d8 55%, #0c4cc0 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.6), inset 0 -3px 6px rgba(255,255,255,.35), 0 1px 3px rgba(0,30,90,.4); border-radius: 999px; | The gel button: specular top, inner glow, pill geometry |
| CSS | background: repeating-linear-gradient(180deg, #f2f4f7 0 2px, #e7eaef 2px 4px); | Pinstripes for window chrome and backgrounds |
| CSS | @keyframes aqua-pulse { 50% { filter: brightness(1.18) saturate(1.15); } } animation: aqua-pulse 1.8s ease-in-out infinite; | The breathing default button — gate behind prefers-reduced-motion |
Accessibility & misuse
- White label text on mid-blue gel hovers near the contrast line — keep the gel's center dark enough for 4.5:1, as Apple's own dark-bottom gradient did.
- The pulsing default button is motion with no information — pause it under prefers-reduced-motion and never make the pulse the only 'default action' cue.
- Pinstripes behind small text add visual noise; drop the stripe contrast (2 to 3 percent) or mask them behind content panels.
Origin
Introduced by Steve Jobs at Macworld San Francisco, January 2000, alongside Mac OS X's public debut; shipped in Mac OS X 10.0 (2001) and defined the Mac's look for the decade, its gel gloss echoing the era's translucent iMac hardware.