Aqua Aqua

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)。

Midnight Drive
Neon Coast
1:123:48

标本可交互 —— 点点看。Specimen is live — try it.

If you called it…如果你管它叫……

“the old mac buttons that looked like blue candy”「老 Mac 上那种像蓝色糖果的按钮」“gel buttons you wanted to lick”「让人想舔一口的凝胶按钮」“pinstripe windows from early mac os x”「早期 Mac OS X 的细条纹窗口」“the gumdrop red yellow green window buttons”「软糖一样的红黄绿窗口按钮」“glossy blue scroll bars on old macs”「老 Mac 上亮闪闪的蓝色滚动条」“the save button that pulsed like it was breathing”「那个像呼吸一样一鼓一鼓的保存按钮」

Full style DNA完整风格 DNA

  1. 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.

    按钮和滚动条滑块看起来像半透明的凝胶滴:顶部一道亮高光,下面透着内发光,颜色像从里面点亮。

  2. Pinstriped surfaces细条纹表面 surface defining定义特征

    Window backgrounds and title bars carry fine alternating light stripes — the signature Aqua wallpaper-of-the-chrome.

    窗口背景和标题栏上有细细的明暗交替条纹 —— 堪称 Aqua 窗口装饰层的招牌壁纸。

  3. 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.

    关闭/最小化/缩放三键做成亮面的红、黄、绿糖果圆球,排在标题栏左上角。

  4. Luminous water blue莹亮的水蓝 color defining定义特征

    The palette centers on Aqua's namesake: saturated, water-lit blue for default buttons, selection, scrollbars, and progress.

    配色的中心就是 Aqua 名字的由来:饱满的、像被水照亮的蓝,用在默认按钮、选中态、滚动条和进度条上。

  5. 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 —— 动效把水的比喻坐实了。

  6. 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 从未有过的纵深。

  7. 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 数字美学

Midnight Drive
Neon Coast
1:123:48

AquaAqua

CYBER DISC・2000
Midnight Drive
Neon Coast
1:123:48

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 硬件互为呼应。

See also相关词条