Aqua 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.
Aqua 是 Mac OS X 在 2000 年问世时搭载的设计语言:控件被渲染成半透明的糖果凝胶 —— 莹亮的水蓝色上压着深深的高光 —— 铺在细条纹表面上,配上软糖般的红黄绿窗口按钮、把窗口分出层次的柔和投影,以及无处不在的流畅动画(默认按钮真的会一下一下地脉动,窗口通过精灵效果像水一样流进 Dock)。苹果把它宣传成一个有着水的流动感与深度的界面。
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.
范围:本条只涵盖 2000 年代的原版 Aqua(Mac OS X 10.0 到大约 Tiger 为止)。之后的 macOS 一步步把这门语言拍平、磨砂 —— 不要把拉丝金属时代、Yosemite 或今天的 macOS 混进来;苹果现在的玻璃语言是液态玻璃(Liquid Glass)。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Candy-gel controls糖果凝胶控件 depth defining定义特征
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 surfaces细条纹表面 surface defining定义特征
Window backgrounds and title bars carry fine alternating light stripes — the signature Aqua wallpaper-of-the-chrome.
窗口背景和标题栏上有细细的明暗交替条纹 —— 堪称 Aqua 窗口装饰层的招牌壁纸。
-
Gumdrop window controls软糖窗口按钮 geometry defining定义特征
The close/minimize/zoom trio as glossy red, yellow, and green candy spheres in the title bar's top-left corner.
关闭/最小化/缩放三键做成亮面的红、黄、绿糖果圆球,排在标题栏左上角。
-
Luminous water blue莹亮的水蓝 color defining定义特征
The palette centers on Aqua's namesake: saturated, water-lit blue for default buttons, selection, scrollbars, and progress.
配色的中心就是 Aqua 名字的由来:饱满的、像被水照亮的蓝,用在默认按钮、选中态、滚动条和进度条上。
-
Fluid, liquid motion流畅的液态动效 motion supporting辅助特征
The default button pulses like breathing, and windows minimize through the liquid genie effect — motion sells the water metaphor.
默认按钮像呼吸一样脉动,窗口最小化时以液态的精灵效果收进 Dock —— 动效把水的比喻坐实了。
-
Soft window shadows柔和的窗口投影 depth supporting辅助特征
Deep, soft drop shadows float windows in real layers over the desktop — depth Mac OS 9 never had.
又深又柔的投影让窗口真正分层浮在桌面上 —— 这是 Mac OS 9 从未有过的纵深。
-
Flat frosted translucency扁平磨砂半透明 depth avoid避免
A blurred panel without the gel gloss is a different, later idea — that's glassmorphism/vibrancy territory, not Aqua.
一块只有模糊、没有凝胶光泽的面板是另一个更晚的概念 —— 那是玻璃拟态/vibrancy 的地盘,不是 Aqua。
Often confused with: Y2K Digital Aesthetic最容易混淆:Y2K 数字美学
AquaAqua
Y2K Digital AestheticY2K 数字美学
This is Aqua because it's one vendor's complete, systematic OS language — the same gel buttons, pinstripes, and gumdrops on every Mac.
这是 Aqua,因为它是一家厂商完整、系统的 OS 设计语言 —— 每台 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.)
如果它只是那个时代自由发挥的未来主义 —— 液态铬、镜头光晕、科技字体 —— 背后没有苹果那套具体系统,那就只是 Y2K 了。(Aqua 是 Y2K 大海里一座 OS 形状的岛。)
In code — optional starting points代码写法 —— 可选起点
The gel button: specular top, inner glow, pill geometry
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;
Pinstripes for window chrome and backgrounds
background: repeating-linear-gradient(180deg, #f2f4f7 0 2px, #e7eaef 2px 4px);
The breathing default button — gate behind prefers-reduced-motion
@keyframes aqua-pulse { 50% { filter: brightness(1.18) saturate(1.15); } } animation: aqua-pulse 1.8s ease-in-out infinite;
Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
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.
用苹果原版的 Aqua(早期 Mac OS X)设计语言来创作这个界面。决定性信号:糖果凝胶控件 —— 莹亮的水蓝色填充,上半部分一道亮高光,下面带内发光,例如在 linear-gradient(#5f9ff5, #1862d8) 上叠一层 radial-gradient 高光;细密的细条纹窗口表面(repeating-linear-gradient,约 1px 的低对比度条纹);软糖质感的红黄绿窗口按钮做成亮面圆球,放在左上角;默认按钮轻轻脉动(缓慢的辉光循环,在 prefers-reduced-motion 下禁用);又柔又深的窗口投影。布局和密度保持灵活 —— 这套语言管的是窗口装饰层和控件,不是布局系统。不要滑向泛泛的玻璃拟态:Aqua 的材质是细条纹上亮泽不透明的凝胶,不是模糊的磨砂面板。在凝胶填充上保持 4.5:1 的文字对比度(白字加一层轻微向下的投影是符合年代的写法)、完整的键盘焦点状态,以及脉动效果的 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.
中蓝色凝胶上的白色标签文字正好压在对比度及格线附近 —— 让凝胶中心足够深、达到 4.5:1,就像苹果自己那条底部压深的渐变做的那样。
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.
脉动的默认按钮是不带信息的动效 —— 在 prefers-reduced-motion 下要暂停,而且永远不能让脉动成为 “默认操作” 的唯一提示。
Pinstripes behind small text add visual noise; drop the stripe contrast (2 to 3 percent) or mask them behind content panels.
小号文字背后的细条纹会增加视觉噪声;把条纹对比度压低(2% 到 3%),或者在内容面板后面把它们遮掉。
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.
2000 年 1 月由 Steve Jobs 在旧金山 Macworld 上与 Mac OS X 的公开亮相一同发布;随 Mac OS X 10.0(2001)正式搭载,定义了此后十年 Mac 的样子,它的凝胶光泽与当时半透明的 iMac 硬件互为呼应。