Fluent 2¶

Windows 11, 2021 to present; WinUI 2.6 to 2.8 and WinUI 3. This is the current Windows design language, and the reference point the older eras on these pages are compared against.

There was never a separate "Windows 11 Fluent" and "Fluent 2". Windows 11's design language shipped in WinUI 2.6 (June 2021) and WinUI 3 1.0 under the plain name Fluent. Fluent 2 is the name Microsoft gave that same language, together with its web, iOS and Android siblings, in May 2023. It was a rebrand and a cross-platform unification. The shared color file carries 237 keys across that seam with zero value drift, and the corner radii, elevation ladder, button padding and motion tiers are identical. So this page treats 2021 to today as one era and calls out the few places where the launch build differs. The genuinely different predecessor is Windows 10's Fluent.

Principles¶

The Five Windows Principles¶

Two principle sets exist. The four cross-platform Fluent 2 principles ("Natural on every platform", "Built for focus", "One for all, all for one", "Unmistakably Microsoft") were added above the Windows ones in 2023.³ The five Windows 11 principles from 2021 are the ones the shipped values actually implement, so they are the ones to design against.⁴

Calm is the one that matters most for a reimplementation. Most ways a copy of this look ends up subtly wrong are ways of being louder than Fluent 2 intends: a shadow under a resting button, an opaque fill where the system uses a 70 % alpha one, or accent color on more than one element.

Windows 11 also replaced Windows 10's pillars wholesale rather than relabeling them. The old "Light, Depth, Motion, Material, Scale" became seven signature experiences: color, elevation and layering, iconography, materials, shapes and geometry, typography, and motion. Color and iconography are promotions: neither was a pillar in Windows 10. Reveal, which was the whole "Light" pillar, is gone.

Two Layers¶

Windows 11 apps are built from exactly two layers.⁵ The base layer carries menus, commands and navigation (NavigationView, CommandBar, MenuBar, TabView) and is what the window's Mica shows through. The content layer holds the app's central experience, either as one contiguous surface or as cards. Elevation values, which surfaces get acrylic and where a shadow is allowed all follow from which layer a thing belongs to.

Rounding¶

Three levels of rounding, chosen by what is being rounded and what it touches:⁶

Where two elements touch, the touching edges are square: the two halves of a SplitButton, or the side of a flyout attached to the control that opened it. WinUI does this with corner-radius filter converters that zero one side of a single control radius, so an implementation needs "one radius, per-corner derived", not four independent radius properties. The entire app-overridable vocabulary is two resources, ControlCornerRadius (4) and OverlayCornerRadius (8).

The written "bars get 4 epx" rule is not what ships: ProgressBarCornerRadius is 1.5 and ProgressBarTrackCornerRadius 0.5 in the Tier 1 dictionary.

Spacing Between Things¶

Published composition gaps, for app authors rather than controls:⁷

Page margins split into 56 epx for cohesive, media-rich layouts (Photos, Settings) and 12 epx for utility and editing surfaces (Notepad, Terminal).

Foundations¶

Color¶

Every token follows <Family><Purpose>Color<Variant>. The family says the role, independent of theme; the suffix (Secondary, Tertiary, Quarternary with WinUI's own spelling, Quinary, Senary) is a fixed emphasis or state step inside that family. All values live in Common_themeresources_any.xaml, whose three theme dictionaries are Default, Light and HighContrast. Default is the dark one. That conflation is the single most common misreading of these files.

The values that decide how a control looks, Light and Dark (alpha shown as a percentage):

Five traps hide in these numbers:

• Fills are translucent. A Light button at rest is 70 % white over whatever is behind it, which is what lets Mica tint it. Only ControlFillColorInputActive is opaque, which is why a focused text box visibly lifts off the page.
• Dark's unchecked indicator is a recess. Its rest rung is black-alpha and its hover and press rungs are white-alpha, so the box starts darker than the page and lifts out of it. Light is black-alpha throughout. Disabled is fully transparent in both.
• SurfaceStrokeColorDefault and SmokeFillColorDefault are the same in both themes. Almost nothing else is.
• CardStrokeColorDefault is black-alpha in Dark where the control stroke is white-alpha, so a card edge stays a dark line on a dark page.
• LayerOnMicaBaseAltFillColor* is not the subtle ramp. TabView uses it for its tab hover and press, and its pressed rung (...Default) is a lighter, mostly opaque layer: #B3FFFFFF in Light, #733A3A3A in Dark. So a tab brightens on press where a subtle-fill control darkens.

Four tokens (CardBackgroundFillColorTertiary, ControlFillColorQuarternary, SolidBackgroundFillColorQuinary, SolidBackgroundFillColorSenary) arrived after 2021. Everything else, including the whole SystemFillColor* family, is present in the launch build.

Measured over the base page, the text ramp encodes a rule: Primary and Secondary pass 4.5:1 in both themes, Tertiary passes only in Dark (3.3:1 in Light), and Disabled fails by design in both (2.5:1 Light, 3.3:1 Dark).⁸ So Tertiary is a placeholder token, never a body-text token, and disabled state must never be the only signal that a control is unavailable.

Accent¶

The accent is seven OS-supplied colors, never computed. WinUI asks UISettings::GetColorValue for Accent and the six variants AccentLight1..3 and AccentDark1..3, and uses what comes back verbatim.⁹ The tint and shade algorithm lives in closed shell code and has no published formula. When it cannot ask the OS, WinUI falls back to seven constants, the Windows default blue:

The polarity flips per theme. Dark fills with the Light rungs, Light fills with the Dark ones, so an accent surface always stands out from its page:

GetSysColor(COLOR_HIGHLIGHT) is not the accent: it returns a frozen Windows 10 #0078D7, one digit away from the real default #0078D4, and it returns light values on a dark-mode machine.

An app that overrides SystemAccentColor in its resources shadows exactly that one key. The six variants are fetched separately, so they keep the user's real OS ramp and the accent button stops matching the overridden base. WinUI's own test hook says what its authors would reach for if they wanted a derivation: alpha-blending the accent over white and black.

High Contrast¶

Under a contrast theme every semantic brush is rebound to one of the Win32 system colors, driven by the user's own scheme. Fluent authors no colors for it at all.

The elevation gradients collapse to a flat WindowText stroke, acrylic and Mica become solid Window, and there are no shadows. In the Default and Light dictionaries the system-color brushes are poisoned with magenta #FF00FF, and the HighContrast dictionary's raw Color resources are pure red, so a style bound to the wrong layer shows up at once. Corner radii live outside the theme dictionaries and stay 4 and 8. The OS calls these contrast themes (Aquatic, Desert, Dusk, Night sky, and custom); WinUI branches only on "is one active".¹⁰

Typography¶

One variable font, Segoe UI Variable, with a weight axis (100 to 700) and an automatic optical-size axis whose Small, Text and Display cuts reshape the glyphs per size. Before Windows 11 the resolved family was static Segoe UI, and that font swap is the real type change at the Windows 10 seam. The sizes moved far less.¹¹

• BaseTextBlockStyle is SemiBold, and only Caption, Body and BodyLarge override it back, so every style from Subtitle up is SemiBold by default.
• The line heights are Tier 2. The XAML sets no LineHeight at all and leaves it to the font's metrics with LineStackingStrategy="MaxHeight".
• Bold and italic are not part of the ramp. Emphasis is SemiBold.
• The launch ramp is the other seven rows. BodyLarge was documented from day one and not implemented in WinUI 2.6 to 2.8 XAML, the era's clearest case of guidance and code disagreeing.
• Control text is ControlContentThemeFontSize, 14 epx.
• Icons come from Segoe Fluent Icons, which replaced Segoe MDL2 Assets. Every glyph is drawn as a 1 epx monoline, the codepoints mostly carry over, and the glyph sizes did not change across the seam.¹²

Metrics¶

Everything is in effective pixels (epx). Element sizes, margins and positions sit on a 4 epx grid, because 4 is the smallest unit that stays a whole number of physical pixels at every scale plateau (100, 125, 150, 175, 200, 225, 250, 300, 350 and 400 %).¹³ Control padding deliberately does not: vertical padding is often one pixel off the grid, tuned against the font's baseline.

Note the bottom-heavy padding: ButtonPadding went from 8,5,8,6 and TextControlThemePadding from 10,6,6,5 in Windows 10 to the values above. Two controls flipping the same way in the same release reads as a deliberate "weight sits slightly low" rule.

Elevation and Shadow¶

Each surface class has an elevation value (UIElement.Translation.Z) and a 1 epx contour stroke.⁵ The stroke is the primary depth cue. Shadow is secondary and only switches on higher up the ladder:

Pressing does not lift a control. It presses it in, and elevation drops from 2 to 1. Both are below the shadow threshold, so the only visible change is the contour flattening.

The shadow is two superimposed pure-black drop shadows, an ambient (omnidirectional) and a directional (offset down), from DropShadowRecipe.h, which states it was taken from the shell's own implementation:¹⁴

Elevation = min(64, Translation.Z / 2)

Elevation < 2        no shadow
2 <= E <= 16         ambient alpha 0
                     directional alpha  Light min(E/100 + 0.06, 0.14)   Dark 0.26
E > 16               ambient blur E/3, y-offset 2, alpha  Light 0.15   Dark 0.37
                     directional alpha                    Light 0.19   Dark 0.37

directional blur = E, directional y-offset = E / 2

Light-theme alpha saturates at elevation 8, so a tooltip and a flyout differ only in blur and offset. Dark shadows are much stronger at every elevation, so one theme's values ported to the other look wrong. For windowed popups WinUI replaces the computed insets with hand-tuned ones that bound the visible shadow: 4/1/4/8 for a tooltip, 10/2/10/18 for everything else. WinUI renders the shadow into a nine-grid surface only to work around compositor clipping; a renderer drawing its own shadows can apply the recipe directly.

The Contour Gradient¶

Below the shadow threshold, a control reads as raised through a gradient border:

Three details decide whether a copy looks right:

• The transition happens inside 3 epx, in absolute units, so the stronger stop reads as a hairline along one horizontal edge at any control height. A bounding-box gradient gives a softer, visibly different control.
• The direction flips per theme. A ScaleTransform ScaleY="-1" sits on the neutral brush in the Light dictionary only, and on the accent brush in both. So a plain control's strong edge is its bottom in Dark and its top in Light, while an accent control's is always the bottom.
• Pressed and disabled drop the gradient for a flat ControlStrokeColorDefault (neutral) or a transparent border (accent).

This lift border is a Windows 11 launch signature. The brushes sit in a file both eras merge, but no Windows 10 template ever binds them.

Focus¶

The focus visual is two nested strokes, drawn outside the control:¹⁵

The default FocusVisualMargin is -3, so the pair floats 3 epx outside the bounds. The colors invert between themes, and the contrast between the rings is what keeps focus visible on any background; a single thick ring vanishes on a surface of similar luminance. The ring has no radius of its own: each corner takes the target's CornerRadius adjusted by the average of the two edge margins meeting there, which keeps it concentric. It is drawn only for keyboard or gamepad focus, and only while the window is active. Focus is not a visual state: it composes on top of whatever state the control is in.

Per-control margins deviate for geometry: CheckBox, RadioButton and ToggleSwitch use -7,-3,-7,-3 so the ring wraps glyph and label together, Slider uses -7,0,-7,0, list items 0 or 1, and BreadcrumbBar a positive 1 so neighboring crumbs' rings don't collide.

Interaction States¶

Normal, PointerOver, Pressed and Disabled, with Selected or Checked in a separate group. Three token families supply the fills, and which one a control uses is the whole difference between a standard, an accent and a subtle control:

The foreground follows one step behind: primary text through hover, secondary text when pressed, disabled text when disabled. Nothing moves, offsets or scales on press.

Materials¶

Mica is an opaque material for the base layer of long-lived windows. It samples the desktop wallpaper once and tints it with the theme, and it has a built-in inactive state. Mica Alt is a stronger tint for tabbed title bars. Mica arrived in WinUI 2.7 (2021-09-14), three months after the Windows 11 refresh itself, so a Mica claim dated to the launch build is wrong by a quarter.¹⁶

The internal Mica controller behind WinUI 2's BackdropMaterial is open source and gives the recipe: tint #202020 at 0.8 in Dark and #F3F3F3 at 0.5 in Light, luminosity opacity 1.0, over the blurred wallpaper sample. Its fallback is the tint color itself, i.e. exactly SolidBackgroundFillColorBase. Mica Alt falls back to SolidBackgroundFillColorBaseAlt (#DADADA Light, #0A0A0A Dark). Everything above the material must be transparent for Mica to show, and content layers tint it with LayerFillColorDefault.

Acrylic is a translucent brush: background sample, Gaussian blur, a luminosity blend, a color tint, noise. Background acrylic samples the desktop behind the window (flyouts, context menus); in-app acrylic samples only the app's own content (panes). Both share the same numbers:

Both materials fall back to their solid color under a contrast theme, with transparency effects off, in battery saver, and on low-end hardware. Mica and background acrylic also fall back when the window deactivates. For in-app acrylic the policy is open code: exactly energy saver, "effects not fast" and transparency off, cross-faded over 167 ms. For Mica and background acrylic the policy lives in the closed compositor.

FlyoutPresenter, ToolTip, MenuFlyout and the ComboBox popup all use in-app acrylic in Windows 11 (Windows 10 used background acrylic for flyouts). ContentDialog and a pinned TeachingTip are opaque. Smoke, the modal scrim, is #4D000000 in both themes and needs no material support. Reveal is not part of Fluent 2. Its retreat was gradual: it still ships in WinUI 2.6 to 2.8 behind a type-presence guard, so a re-creation of the 2021 launch may include it and one of today's system should not.

Motion¶

Four principles govern motion: connected, consistent, responsive and resourceful. The shipped dictionaries name exactly four durations and one curve:¹⁷

Other durations are real but unnamed, each pinned by a shipped template or runtime constant:

Entrances run about twice as long as the matching exit. Expander opens in 333 ms on 0,0,0,1 and closes in 167 ms on 1,1,0,1; page transitions are 300 ms in, 150 ms out; implicit geometry is 300 ms and color 150 ms. The "Standard" easing named in the guidance has no published control points; 0.8, 0, 0.2, 1 is the only symmetric curve the runtime ships, so treating it as Standard is an inference.

Page navigation uses four transitions. Page refresh (the Frame default) fades out in 150 ms, then slides new content up about 150 px while fading in over 300 ms; drill scales in from the invoked item; slide moves sibling pages sideways; suppress does nothing. Their storyboards are OS-side, so these numbers are Tier 2. Connected animation is fully Tier 1: the gravity configuration dips the element 80 epx down and 32 epx forward and scales it to 1.1 at 66 % of the move. The shipped code contradicts the docs twice here, and the code wins: the direct configuration runs 200 ms (docs: 150), and an unstarted animation is dropped after 2 s (docs: 3).

Controls¶

Values are epx at 100 % scale. Colors are token names; resolve them with the tables above.

Button¶

Accent button (AccentButtonStyle): AccentFillColor* backgrounds, TextOnAccentFillColor* labels, AccentControlElevationBorderBrush at rest and hover, a transparent border when pressed or disabled. Reserve it for the single primary action in a view.

Subtle button (SubtleButtonStyle): transparent at rest, SubtleFillColorSecondary on hover, ...Tertiary on press, border always the same color as the fill. The style name is post-2021, but the look is not: command-bar buttons bound the same SubtleFillColor* ramp in 2021.

HyperlinkButton: subtle backgrounds with accent text (AccentTextFillColorPrimary, Secondary, Tertiary, Disabled per state), a border that stays transparent, and no underline: HyperlinkUnderlineVisible is False in the shipped dictionary, whatever the guidance says, except under a contrast theme.

CheckBox, RadioButton, ToggleButton¶

Indeterminate mirrors Checked row for row with the dash glyph. The whole box becomes an accent square once checked. The radio dot stays TextOnAccentFillColorPrimary in every state, carries the CircleElevationBorderBrush rim, and its grow and shrink animate on 0,0,0,1 over 250 ms (hover) and 167 ms (press). A checked ToggleButton looks exactly like the accent button; an indeterminate one looks unchecked.

The dot's rim is CircleElevationBorderBrush in all four common states (stops at 0.5 ControlStrokeColorDefault and 0.7 ControlStrokeColorSecondary, never flipped), so the white dot has a faint rim that is stronger at the bottom. The Checked storyboard sets the accent elevation brush instead, but every CommonStates storyboard sets the neutral one back and the last group to start wins. So a checked dot the pointer has touched carries the neutral rim, which makes it the rim a checked radio shows in practice. ToggleSwitchKnobStrokeOn names the same brush, but on a Border without a BorderThickness, so it draws nothing.

The ring is a filled disc under its stroke in both check states (RadioButtonOuterEllipseFill* and ...CheckedFill*): the unchecked ring has the faint ControlAltFill wash from the table above, and a checked radio is an accent disc with a white dot, not an accent dot inside an outline.

ToggleSwitch¶

The knob's horizontal squish on press is a Windows 11 invention; the Windows 10 switch only changed color. Unlike CheckBox, the off track's pressed stroke stays at the default strong stroke.

Slider¶

Text Input¶

TextBox, PasswordBox, RichEditBox, AutoSuggestBox and NumberBox share one vocabulary.

The bottom-only accent underline is the most recognizable Windows 11 text-input signature. Windows 10 thickened the whole border uniformly. State changes here are instant swaps, not fades. Placeholder text is TextFillColorSecondary, selection AccentFillColorSelectedTextBackground.

ComboBox¶

Closed, it is a button: the same fills and elevation border, min height 32, padding 12,5,0,7, and a 12 epx animated chevron with a 0,0,14,0 margin. Its focus visual is its own: a 2 epx flat FocusStrokeColorOuter ring at radius 7, offset 4 outside, not the two-ring visual. An editable ComboBox uses the text box's underline instead. The popup is in-app acrylic, radius 8, up to 15 items. Items are subtle (radius 3, padding 11,5,11,7); the selected one keeps a neutral fill and shows a 3 x 16 accent pill at radius 1.5, the only accent pixel in the row.

Lists and Navigation¶

ListViewItem (min height 40, radius 4) and NavigationViewItem (min height 36) keep their backgrounds in the subtle family: selected rows are SubtleFillColorSecondary, and selection is shown by a separate 3 x 16 accent pill, radius 1.5, at the leading edge. For list rows the pill's geometry is C++ constants, not theme resources: 3 wide, 4 inset, height max(16, row height - 40). ListViewItemSelectedBorderThemeThickness (4) is declared and never consumed, a leftover of the Windows 10 template. GridViewItem shows selection as a 2 epx border instead. NavigationView's pane is 48 compact, its content grid is LayerFillColorDefault with an 8 epx top-left corner facing the pane. TreeViewItem is 28 high. SelectorBar marks selection with a 4 x 3 pill.

A ListViewItem follows ListViewBaseItemChrome's rounded mode:

The SelectorBar pill is a 4 x 3 rectangle that the Selected states scale to 4 times its width (16 epx settled) and fade in, about its center, over 167 ms on 0,0,0,1. Its items never fill: every SelectorBarItemBackground* token is transparent, even selected, and the label walks TextFillColorPrimary, Secondary, Tertiary and Disabled for rest, hover, pressed and disabled.

DataGrid has no WinUI Gallery counterpart. Its values come from TabularSurfaces_themeresources.xaml, the shared source for grid-style rows, headers and gridlines: rows at least 28 high, the header 40, cell padding 12,4,12,4, header cell padding 8,4,8,4, a bottom gridline on every row, and the selected row marked with a subtle background plus a 2 epx accent border instead of the list's leading pill. The header background (#26000000 Light, #26FFFFFF Dark) is bumped from ControlStrokeColorDefault's alpha for contrast over row banding, and the gridline (#29000000, #29FFFFFF) past DividerStrokeColorDefault, which that file calls "too faint at 1px width on alternating rows". So both are tokens of their own, even though the file's comments name the resources they started from.

SplitButton, TabView, SplitView, SwipeControl¶

SplitButton is three columns: the primary part (at least 35 wide), a 1 epx divider in ControlStrokeColorDefault, and the 35 wide secondary part. The primary part is rounded on the left only and the secondary on the right only, each with a border on its three outer sides; this is the square touching edge from Rounding. The chevron is 12 x 12, 12 in from the right edge, in TextFillColorSecondary. SplitButtonPadding (11,6,11,7) is ButtonPadding plus the 1 epx border the inner buttons lack. A checked ToggleSplitButton fills in AccentFillColorDefault with a ControlStrokeColorOnAccentTertiary divider.

The strip is chrome: a hairline rule (TabViewBorderBrush) runs under every tab and the selected tab breaks through it with top corners at OverlayCornerRadius and a bottom that flares 4 epx outward, filled SolidBackgroundFillColorTertiary and stroked CardStrokeColorDefault. Unselected tabs use the LayerOnMicaBaseAlt ramp (see the trap above) and are divided by inset hairlines (margin 0,8,0,8), hidden next to the selected and the hovered tab.

SplitView's pane defaults to SystemControlPageBackgroundChromeLowBrush, and a light-dismiss overlay dims the content with SplitViewLightDismissOverlayBackground (AltMedium, alpha 0x99). The pane slides open over 350 ms and closed over 120 ms on 0.1,0.9,0.2,1 in the overlay modes, and over 200/100 ms on 0,0.35,0.15,1 inline.

SwipeControl items are at least 68 wide and 40 high, a 16 epx icon over a 12 epx label in a 4,4,4,2 margin, on ControlFillColorTertiary with TextFillColorPrimary when unset. An execute item draws in the SwipeItemPreThresholdExecute* brushes until the drag passes 100 epx (or the control's width, if that is less), then in the accent.

Overlays¶

ContentDialog opens with a scale of 1.0 to 1.05 to 1.0 plus a fade, on the named durations. The Enter-key default button becomes an accent button; the dialog has no treatment of its own for it.

InfoBar, InfoBadge, ProgressBar¶

InfoBar is min height 48, a 1 epx CardStrokeColorDefault border, and a severity told by background tint and icon, never by text color:

InfoBadge defaults to the accent fill and is a full pill; its status styles reuse the same colors. ProgressBar is a 1 epx ControlStrongStrokeColorDefault track under a 3 epx accent indicator, radius 1.5, turning caution when paused and critical on error. Its indeterminate animation was redesigned in 2021 from Windows 10's five-dot chase into a two-indicator sweep. ProgressRing strokes 4 epx.

Scroll Bars and Containers¶

WinUI's ScrollBar template has two looks, picked by its ScrollingIndicatorStates group: TouchIndicator, a bare 2 epx panning thumb with no buttons, and MouseIndicator, the full bar. The mouse bar is 12 epx expanded (ScrollBarSize) and collapses to an 8 epx thumb (ScrollBarVerticalThumbMinWidth), radius 3, min thumb length 30. The step buttons are ScrollBarSize square with an 8 epx arrow glyph, and their rows are reserved whether the buttons show or not, so the track is always inset by one button length at each end. The arrow uses the thumb's brush (ScrollBarButtonArrowForeground and ScrollBarThumbFill are both ControlStrongFillColorDefault). The thumb sits flush against the viewport edge in both states: ScrollBarThumbOffset and the thumb's TranslateTransform cancel the Grid centering of the narrower collapsed thumb and add no gap when expanded. The bar expands after 400 ms and contracts after 500 ms, both over 167 ms on 0,0,0,1, and after 2 s without interaction the whole indicator fades out over 83 ms (ScrollBarOpacityChangeDuration). Expander is min height 48, header padding 16,0,0,0, content padding 16, with the control radius split between header and content. The header is at least 96 wide (FlyoutThemeMinWidth). Its hover and press wash covers only the 32 x 32 chevron button, 8 in from the right edge: every CommonStates entry animates the chevron border's background (SubtleFillColorSecondary/Tertiary), and the header's own background stays put. Expanding sets the box to full height at once (the visibility flips at key time 0) and only the content slides, inside a clip. Open and close use their own splines, 0,0,0,1 and 1,1,0,1; running one curve backwards for the close makes it sit still and then snap.

Reproducing It Today¶

Fluent 2 is the current Windows look, so almost none of it has to be approximated. The fonts ship with Windows 11, the values are in open source, and the few pieces that are not live in the OS, where an application can ask for them. The work is getting the details right, and knowing which parts are not drawing at all.

Exact From the Data Above¶

What Needs the OS¶

• The accent ramp. Read all seven values from UISettings::GetColorValue. There is no formula to reimplement, so any derived ramp, including the white/black blend WinUI's own test hook suggests, is an invention that disagrees with Windows on a user-chosen accent. An app that overrides only the base color has no OS ramp for it and has to pick a derivation knowingly.
• Mica. DWM composes it behind the window when asked through DWMWA_SYSTEMBACKDROP_TYPE (Windows 11 22H2 and later); the app extends the frame and draws a transparent page over it. The app never sees the pixels, so it cannot measure or capture the result, and the policy that turns the material off lives in the compositor.
• Background acrylic. It samples the desktop behind the window, which a popup drawn inside the window cannot see. In-app acrylic only samples the app's own content, so it can be implemented from the recipe (blur, luminosity blend, tint, noise). Otherwise draw the documented fallback color: #F9F9F9 Light, #2C2C2C Dark for the default brush. Windows itself draws that fallback often (transparency off, battery saver, inactive window), so it is a correct look in its own right.
• Fonts. Segoe UI Variable and Segoe Fluent Icons ship with Windows 11 and are not redistributable. On Windows 10 the substitutes are static Segoe UI and Segoe MDL2 Assets, which lose the optical-size cuts but keep the codepoints. A renderer also has to decide line heights: WinUI leaves them to the font metrics, and the published 16/20/28/36/52/92 epx values are guidance.
• Page transitions. Their storyboards are OS-side; the published 150 ms, 300 ms and roughly 150 px are the most precise numbers available.

Behavior, Content and Layout¶

Some of what makes a window look like Windows 11 is not a theme value, and a theme alone cannot supply it:

• Focus is drawn only after keyboard or gamepad input and only while the window is active.
• Accent on one element per view, the base/content layer split, Mica only on long-lived windows, and the 8/12/16 epx composition gaps and 56 or 12 epx page margins are app composition.
• Materials fall back to solid colors on transparency, power and hardware conditions, which is a runtime policy, not a color.
• Motion curves describe transitions a control has to run; a static style has no motion.
• Reveal is not part of the current system. It still ships in WinUI 2.6 to 2.8, so a re-creation of the 2021 launch may include it; one of today's system should not.

High Contrast Today¶

The era's contrast mode is fully specified by the user's scheme: every token resolves to a Win32 system color (GetSysColor while SPI_GETHIGHCONTRAST reports a contrast theme), gradients flatten, materials become solid Window, and there are no shadows (see the color table). What stays is geometry: WinUI keeps the 4 and 8 epx radii, the type ramp and the two-ring focus visual, with the rings in WindowText and Window. Hyperlink underlines return. A faithful contrast mode therefore uses the same mechanism as Fluent 2 itself.

The Windows 10 predecessor, with 2/4 radii, a transparent button border and no lift gradient, is Fluent.

Sources¶