Vendor design language
Aqua
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.'
Defining Signals
- Candy-gel controls — buttons look like translucent gel drops with a bright specular highlight across the top and an inner glow beneath
- Pinstriped surfaces — window backgrounds and title bars carry fine alternating light stripes; the signature Aqua wallpaper
- Gumdrop window controls — close/minimize/zoom as glossy red, yellow, and green candy spheres in the title bar's top-left corner
- Luminous water blue — the palette centers on saturated, water-lit blue for default buttons, selection, scrollbars, and progress
Overview
What makes this style what it is.
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.
Style brief — paste into your agent
Build the UI using Aqua (Apple's Mac OS X design language). Controls are rendered as translucent candy gel — buttons look like translucent gel drops with a bright specular highlight across the top and an inner glow beneath. Surfaces are pinstriped — window backgrounds and title bars carry fine alternating light stripes; the signature Aqua wallpaper. Window controls are gumdrops — close/minimize/zoom as glossy red, yellow, and green candy spheres in the title bar's top-left corner. The palette centers on luminous water blue — saturated, water-lit blue for default buttons, selection, scrollbars, and progress. CSS starting points: - Gel button: background: linear-gradient(180deg, #7ec8f8 0%, #1a7fd4 50%, #4da6e8 51%, #7ec8f8 100%); border-radius: 20px; border: 1px solid #1565a8; box-shadow: inset 0 2px 4px rgba(255,255,255,0.8), 0 2px 8px rgba(0,0,0,0.3); - Pinstripe background: background: repeating-linear-gradient(0deg, #e8e8e8, #e8e8e8 1px, #f0f0f0 1px, #f0f0f0 2px); - Gumdrop controls: width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 1px 2px rgba(255,255,255,0.6), 0 1px 2px rgba(0,0,0,0.2); - Close: background: radial-gradient(circle at 30% 30%, #ff6b6b, #cc0000); - Minimize: background: radial-gradient(circle at 30% 30%, #ffd93d, #cc9900); - Zoom: background: radial-gradient(circle at 30% 30%, #6bff6b, #00cc00); - Title bar: background: linear-gradient(180deg, #d4d4d4 0%, #b8b8b8 100%); border-bottom: 1px solid #999; Do not drift into Y2K: Aqua is one vendor's complete, systematic OS language — the same gel buttons, pinstripes, and gumdrops on every Mac. Y2K is freelance futurism — liquid chrome, lens flares, techno type — without a specific system behind it. Do not drift into Windows Aero: Aqua's material is candy gel — opaque luminous color with gloss, sitting on pinstripes. Windows Aero is transparent blurred glass window frames showing the desktop through them. Preserve 4.5:1 text contrast on gel buttons, provide visible focus rings, and ensure the pinstripes don't interfere with content legibility.
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.
Often Confused With
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. Vs Windows Aero: the material is candy gel — opaque luminous color with gloss, sitting on pinstripes. It would become Windows Aero if the candy turned to transparent blurred glass window frames showing the desktop through them.
Related Styles
Explore connected design movements.