Fluent Design 流畅设计体系（Fluent Design）
Fluent Design is Microsoft's design language for Windows: calm, flat surfaces of light gray lifted by two signature materials — acrylic, a subtly blurred translucency with a fine noise texture reserved for app chrome, and mica, an opaque surface tinted once from the desktop wallpaper — plus soft depth shadows, 8px rounded corners, and one system accent color on an otherwise neutral palette. Announced at Build 2017 as Metro's successor, it matured into the quiet, layered look of Windows 11.
流畅设计体系（Fluent Design）是微软为 Windows 打造的设计语言：浅灰色的平静扁平表面，由两种招牌材质提亮 —— 亚克力（acrylic），一种带细腻噪点颗粒的轻模糊半透明，只留给应用外壳；云母（mica），一种只从桌面壁纸取一次色的不透明表面 —— 再加上柔和的纵深阴影、8px 圆角，以及中性配色之上唯一的系统强调色。2017 年在 Build 大会上作为 Metro 的继任者发布，在 Windows 11 里成熟为安静、分层的观感。
Scope: Covers Microsoft's Fluent Design System (2017–) as it appears in Windows 10's acrylic apps and Windows 11. The flat tile language it replaced is Flat Design (Metro); Microsoft's glossy Vista/7 glass is Windows Aero; frosted content cards over colorful web wallpapers are Glassmorphism.
范围：覆盖微软 Fluent Design 体系（2017 年至今）在 Windows 10 亚克力应用和 Windows 11 中的样貌。它取代的早期扁平磁贴语言见扁平设计（Metro）；微软在 Vista/7 时代的光泽玻璃见 Windows Aero；彩色网页壁纸上叠磨砂内容卡片的做法是玻璃拟态。
标本可交互 —— 点点看。Specimen is live — try it.
If you called it…如果你管它叫……
Full style DNA完整风格 DNA
-
Acrylic app chrome亚克力应用外壳 surface defining定义特征
Title bars, nav panes, and flyouts use acrylic: a ~60–70% opaque light-gray fill over a subtle backdrop blur with a fine noise grain — translucency with texture, never glossy or rainbow-tinted.
标题栏、导航窗格和浮出控件使用亚克力（acrylic）：约 60–70% 不透明度的浅灰填充，叠在轻微的背景模糊上，带细腻的噪点颗粒 —— 有纹理的半透明，绝不油亮、不泛彩色。
-
Mica opaque base不透明的云母基底 surface defining定义特征
The window background is solid and near-gray (#f3f3f3 light, #202020 dark), tinted once from the desktop wallpaper — it never live-blurs what sits behind the window.
窗口背景是纯色的近灰色（浅色 #f3f3f3，深色 #202020），只从桌面壁纸取一次色 —— 绝不实时模糊窗口背后的东西。
-
One system accent color唯一系统强调色 color defining定义特征
Surfaces, text, and controls are neutral gray; exactly one system accent (default #0067c0 blue) marks primary actions, selection, toggles, and progress.
表面、文字和控件都是中性灰；有且仅有一个系统强调色（默认 #0067c0 蓝）标记主要操作、选中态、开关和进度。
-
Soft functional shadows柔和的功能性阴影 depth defining定义特征
Flyouts and windows cast wide, low-opacity shadows (0 8px 24px rgba(0,0,0,.14) over a 1–2px contact shadow) — quiet elevation, not illustration.
浮出控件和窗口投下宽泛、低透明度的阴影（0 8px 24px rgba(0,0,0,.14) 叠一层 1–2px 的接触阴影）—— 安静的海拔高度，不是插画。
-
8px/4px rounded corners8px/4px 圆角 geometry defining定义特征
Windows and cards round to 8px, buttons and inputs to 4px, edged with a 1px light border (rgba(255,255,255,.4–.7) in light mode) that separates stacked layers.
窗口和卡片圆角 8px，按钮和输入框 4px，边缘勾一条 1px 浅色边（浅色模式下 rgba(255,255,255,.4–.7)），把层叠的表面分开。
-
Segoe-family clean typeSegoe 系清爽字体 typography supporting辅助特征
Segoe UI (Variable) at 12–14px, regular-to-semibold weights; near-black #1b1b1b primary text with secondary text stepped to ~60% opacity.
Segoe UI（Variable）12–14px，常规到半粗字重；主文字近黑 #1b1b1b，次要文字降到约 60% 不透明度。
-
Reveal-highlight hoverReveal 高亮悬停 motion supporting辅助特征
Hovering lights a control's 1px border and background with a soft light that follows the cursor — illumination, not a color swap, signals interactivity.
悬停时用一团跟随指针的柔光点亮控件的 1px 边框和背景 —— 用「照亮」而不是换颜色来表示可交互。
-
Vivid wallpaper bleeding through鲜艳壁纸渗色 color avoid避免
If saturated gradient or photo color floods every panel and becomes the palette, that is glassmorphism — Fluent mutes whatever is behind the window to a whisper.
如果饱和的渐变或照片颜色灌满每一块面板、成了配色主体，那是玻璃拟态 —— Fluent 会把窗口背后的东西压成耳语般的弱音。
Often confused with: Glassmorphism最容易混淆：玻璃拟态
Fluent Design流畅设计体系（Fluent Design）
Glassmorphism玻璃拟态
This is Fluent Design because the translucency is functional app chrome — an acrylic title bar or nav pane with subtle, grainy blur over a muted desktop — while the content area stays opaque mica and the palette stays neutral gray with one accent.
这是流畅设计体系（Fluent Design），因为这里的半透明是功能性的应用外壳 —— 亚克力标题栏或导航窗格，带颗粒感的轻微模糊，衬在素净的桌面上 —— 内容区保持不透明的云母底，配色保持中性灰，只留一个强调色。
It would become glassmorphism if the frosted treatment became the content itself — translucent cards floating over a loud colorful gradient wallpaper whose saturated hues bleed through every panel as the main attraction.
如果磨砂处理蔓延成内容本身 —— 半透明卡片漂浮在喧闹的彩色渐变壁纸上，饱和色渗进每一块面板成为主角 —— 就变成玻璃拟态了。
In code — optional starting points代码写法 —— 可选起点
The acrylic chrome recipe (with noise grain)
background: rgba(243,243,243,.7); background-image: radial-gradient(rgba(0,0,0,.05) .6px, transparent .6px); background-size: 3px 3px; backdrop-filter: blur(18px) saturate(1.25); border: 1px solid rgba(255,255,255,.6); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.08);The one accent: primary button states
background: #0067c0; color: #fff; border-radius: 4px; /* hover: #1a72c9, pressed: #005a9e, focus: 2px solid outer ring */Mica card with reveal edge
bg-[#f3f3f3] rounded-lg border border-black/5 shadow-[0_8px_24px_rgba(0,0,0,0.14)] text-[#1b1b1b]Style brief — paste into your agent风格 Brief —— 粘贴给你的代理
Create the surface using Microsoft's Fluent Design (Windows 11 era). Defining signals: the base window is opaque mica — solid #f3f3f3, tinted once from the desktop, never live-blurred; acrylic translucency is reserved for chrome (title bar, nav pane, flyouts): background: rgba(243,243,243,.7) + backdrop-filter: blur(18px) saturate(1.25) with fine noise grain and a 1px rgba(255,255,255,.6) top edge; corners round to 8px on windows, 4px on controls; soft depth — box-shadow: 0 8px 24px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.08); a restrained neutral palette (surfaces #f3f3f3, text #1b1b1b, secondary rgba(27,27,27,.6), hairlines rgba(0,0,0,.06)) with exactly ONE system accent #0067c0 on primary actions, selection, and progress (hover #1a72c9, pressed #005a9e); Segoe-UI-like clean sans, 12–14px. Do not drift into glassmorphism: no vivid wallpaper, no saturated color bleeding through frosted content cards — the blur stays quiet, grained, on the chrome; content stays opaque. Preserve 4.5:1 text contrast, visible 2px focus outlines, and a solid-mica fallback for prefers-reduced-transparency.
用微软的流畅设计体系（Fluent Design，Windows 11 时代）创建这个界面。决定性信号：基础窗口是不透明的云母底 —— 纯色 #f3f3f3，只从桌面取一次色，绝不实时模糊；亚克力半透明只留给外壳（标题栏、导航窗格、浮出控件）：background: rgba(243,243,243,.7) + backdrop-filter: blur(18px) saturate(1.25)，带细腻噪点颗粒和 1px rgba(255,255,255,.6) 的顶缘亮边；窗口圆角 8px，控件 4px；纵深柔和 —— box-shadow: 0 8px 24px rgba(0,0,0,.14), 0 1px 2px rgba(0,0,0,.08)；配色是克制的中性色（表面 #f3f3f3，文字 #1b1b1b，次要文字 rgba(27,27,27,.6)，发丝线 rgba(0,0,0,.06)），有且仅有一个系统强调色 #0067c0 用于主要操作、选中态和进度（hover #1a72c9，pressed #005a9e）；字体用 Segoe UI 式的清爽无衬线，12–14px。不要滑向玻璃拟态：不要鲜艳壁纸，不要让饱和色透过磨砂内容卡片渗出来 —— 模糊要保持安静、带颗粒、只待在外壳上，内容保持不透明。保证 4.5:1 文字对比度、清晰可见的 2px 焦点框，并为 prefers-reduced-transparency 提供纯色云母降级方案。
Accessibility & misuse可访问性与误用
Acrylic chrome sits over unpredictable content, so keep all text on the opaque mica base or measure worst-case contrast — and honor the OS 'reduce transparency' and prefers-reduced-transparency settings by swapping acrylic for solid surfaces, exactly as Windows itself does.
亚克力外壳垫在不可预测的内容之上，所以文字要全部放在不透明的云母基底上，或者对着最坏情况实测对比度 —— 并响应系统的「降低透明度」和 prefers-reduced-transparency 设置，把亚克力换成纯色表面，Windows 自己就是这么做的。
A palette this restrained can blur the line between static text and controls — reserve the accent color strictly for interactive elements, pair the hover reveal with a visible 2px :focus-visible ring, and never let the subtle 1px reveal border be the only state indicator.
配色克制到这个程度，静态文字和控件的界线容易模糊 —— 强调色要严格只给可交互元素，hover 的 reveal 高亮要搭配清晰可见的 2px :focus-visible 焦点框，永远别让那条 1px 的 reveal 细边成为唯一的状态指示。
Reveal-highlight light effects and depth animations should quiet down under prefers-reduced-motion, and backdrop-filter acrylic is GPU-expensive on low-end hardware — provide the solid-mica fallback so the layout never depends on the blur.
Reveal 高亮光效和纵深动画要在 prefers-reduced-motion 下安静下来；backdrop-filter 的亚克力在低端硬件上很耗 GPU —— 提供纯色云母降级方案，布局永远不能依赖那层模糊。
Origin起源
Microsoft unveiled the Fluent Design System at Build 2017 (its preview codename was Project Neon) as the successor to Metro, organized around five pillars — Light, Depth, Motion, Material, Scale — and shipped its acrylic material with the Windows 10 Fall Creators Update later that year. Windows 11 in 2021 matured the system: mica became the default window material, corners rounded to 8px, and Segoe UI Variable became the default typeface.
微软在 Build 2017 大会上发布 Fluent Design 体系（预览阶段代号 Project Neon），作为 Metro 的继任者，围绕五大支柱 —— Light（光）、Depth（纵深）、Motion（动效）、Material（材质）、Scale（尺度）—— 组织，同年晚些时候随 Windows 10 Fall Creators Update 推出了亚克力材质。2021 年的 Windows 11 让这套体系成熟：云母成为默认窗口材质，圆角加大到 8px，Segoe UI Variable 成为默认字体。