Visual style reference · web UI aesthetic
Aqua
Apple's glossy, gel-like interface language introduced with macOS 10.0 Cheetah — pinstriped window backgrounds, reflective gel buttons, and liquid progress bars.
Back to the visual style atlas01 · CSS hints
How to build it in CSS
radial-gradient overlays for glossy reflections; pinstripe background patterns; gradient-filled buttons with inset white highlights for a gel look; blue-tinted scroll bars; soft pill-shaped progress bars.
02 · Coding-agent prompt
What to tell your agent
Recreate Apple's Aqua aesthetic with glossy gel buttons using radial-gradient highlights, pinstriped window backgrounds, reflective progress bars, and soft blue accent tones. Target the macOS 10.0-10.4 look.
03 · When to use
Good fits for Aqua
Retro Mac-themed projects; music-production plugins mimicking early-2000s software; design-history reference implementations; nostalgic app redesigns.
04 · When to avoid
Skip Aqua when…
Production web apps where modern expectations differ; accessibility-critical interfaces where glossy reflections harm readability; any project targeting current macOS design language.
References
Sources
Frequently asked questions
Aqua: common questions
Direct answers based on the reviewed behavior contract above.
What is the Aqua visual style?
Apple's glossy, gel-like interface language introduced with macOS 10.0 Cheetah — pinstriped window backgrounds, reflective gel buttons, and liquid progress bars. It is one of 13 reviewed web UI visual aesthetics in this reference set.
How do I tell my coding agent to use this style?
Copy the prompt snippet above and paste it into your agent. The key CSS properties are: radial-gradient overlays for glossy reflections; pinstripe background patterns. Adjust colors and values to match your brand.
When should I avoid using Aqua?
Production web apps where modern expectations differ; accessibility-critical interfaces where glossy reflections harm readability; any project targeting current macOS design language. Always verify that the visual style serves the user task before committing to an aesthetic.
Name the UI element too