Fluent¶

Windows 10, 2017 to 2021; UWP and WinUI 2 (the _v1 style set).

This is the original Fluent Design System as it shipped on Windows 10: announced at Build in May 2017, shipped in the 1709 Fall Creators Update (17 October 2017), and frozen on 22 February 2021, when WinUI 2 renamed its whole Windows 10 style set to *_v1.xaml to make room for Windows 11. It is the Fluent of Reveal and Acrylic, Segoe MDL2 Assets and an opacity-derived color ramp. Windows 11's refresh, later renamed Fluent 2, is a different design system and has its own page.

Principles¶

Two Framings, Dated¶

There was never one Fluent framing on Windows 10. There were two, and one commit swapped them.

The five blocks that every retrospective quotes were Microsoft's public framing for just under five months¹. They are still the useful framing for a renderer, because each one maps onto a shipped mechanism (RevealBrush, AcrylicBrush, ParallaxView, ConnectedAnimation, later ThemeShadow). The three later principles are product philosophy and have no pixel consequences.

Two details are worth keeping. Acrylic was listed under both Depth and Material, so the five were lenses rather than layers. And Scale ("from 0D to 3D") linked only to the input and device primers, named no shipping feature, and is the one element with nothing behind it. There is nothing to implement for it.

What Fluent on Windows 10 Deliberately Is Not¶

Four absences, each a place where a modern reader silently imports a later era:

• No semantic color tokens. No TextFillColor*, ControlFillColor* or SubtleFillColor*. Color is a 24-entry ramp consumed through about 170 SystemControl* alias brushes, all defined by the OS.
• No elevation border. No ControlElevationBorderBrush, no gradient strokes. State is communicated by fill alone.
• No rounded corners in the OS. ControlCornerRadius and OverlayCornerRadius exist only in the WinUI 2 package, from WinUI 2.2 (2019-08-21). grep -c ControlCornerRadius over the SDK's own generic.xaml returns 0. A UWP app that did not merge WinUI 2's resources was square for the whole era.
• No motion tokens. No Control*AnimationDuration, no *KeySpline resource, zero hits across all 99 _v1 files. Durations are inline literals on storyboards.

The Substrate¶

Fluent sits on UWP's layout model, which is older than Fluent and which Fluent never changed:

• Effective pixels. Sizes are in epx, normalized for pixel density and viewing distance.
• The 4-epx grid. Sizes, margins and positions are multiples of 4, because 4 scales to a whole number at every scaling plateau (4 × 125 % = 5, 4 × 150 % = 6). Text is exempt, which is why the type ramp is irregular.
• The 40-epx target. "All items on the screen align to a 40×40 effective pixels target." Before 1809 it was 44 epx, and the header-to-control margin shrank from 8 to 4 epx in the same release². Fluent on Windows 10 therefore has two sizing regimes, split at 1809.
• Breakpoints. Small ≤ 640 epx (phones and TVs), Medium 641 to 1007, Large ≥ 1008.

Timeline¶

Foundations¶

Color¶

Three Layers¶

Every color resolves through three hops, and every hop switches with the theme independently:

A control style never names a raw color. Plus two families that live in no file: the accent and its six shades, and eight SystemColor*Color high-contrast values, both injected by the framework at runtime. WinUI 2 itself contributes exactly three color resources for this era: two extra accent rungs (0.75 and 0.9) and a compatibility copy of SystemControlTransparentBrush.

That makes Windows 10 Fluent's color system an OS system that WinUI 2 consumes. On Windows 11 it is the other way round.

The Base Ramp¶

The Alt and Base families are black and white at six alphas and nothing else: 19 (10 %), 33 (20 %), 66 (40 %), 99 (60 %), CC (80 %), FF (100 %). Base is black in Light and white in Dark, Alt is its exact inverse. The whole ramp has been byte-identical in every Windows 10 SDK from 1507 to 2104³, so Fluent inherited it unchanged from MDL2.

Only the Chrome* family carries real grays, and it is deliberately not a mirror image:

SystemErrorTextColor is the one hue in the ramp, and the only key in the file written without an alpha byte. SystemChromeAltHighColor is the acrylic tint, and its dark value is the one ramp value that moved inside the era: #1F1F1F in 1709 and 1803, #2D2D2D in 1809, #1C1C1C from 1903 on.

The page is pure white or pure black. ApplicationPageBackgroundThemeBrush is #FFFFFF in Light and #000000 in Dark, not Windows 11's #F3F3F3/#202020. It is the loudest difference between a Windows 10 screenshot and a Windows 11 one, and it costs nothing to get right. ApplicationForegroundThemeBrush is #DE000000 / #DEFFFFFF, an 87 % alpha inherited from Windows 8.

ThemeDictionaries in the era's XAML use three keys, and Default holds the dark theme, not the light one.

Accent¶

The OS generates the accent and six shades (Light1 to Light3, Dark1 to Dark3) with an algorithm that has no era-correct public source. What is verifiable is how the era consumes them, and it is much simpler than Windows 11:

Across the 99 _v1 files Light1 is used 23 times, Dark1 22 times and the other four shades three times each. The accent story is base, Light1, Dark1, applied identically in both themes. Windows 11 instead picks different rungs per theme so accent text stays legible; that selection does not exist here, and the era's own acrylic guidance admits accent text on acrylic is likely to fail contrast at 15 px.

Lists use accent at partial opacity, and dark theme runs 0.2 hotter at every step:

Three Literal Colors¶

Almost nothing in the alias layer carries a hard-coded value. Three keys do:

The transient border is black in both themes: a dark hairline under a dark flyout, never a light one. That is the opposite of the Windows 11 convention and a quick way to date a screenshot.

High Contrast Is Derived, Not Authored¶

An alias key's name is SystemControl[Role][Ramp]Brush, and the role prefix alone decides its high-contrast value⁴:

Applied mechanically to the 99 plain alias brushes, 86 obey the rule, 6 break it and 7 have no role prefix. In high contrast every acrylic and Reveal brush becomes a flat SolidColorBrush, at the resource level, before any runtime policy runs.

ColorPaletteResources is the era's only theming API worth mentioning: overriding one ramp entry in a scope cascades through the alias layer into every control and state in that scope. Windows 11 has no equivalent, because its semantic tokens are values rather than aliases.

Typography¶

Static Segoe UI (not Segoe UI Variable), in five weights across one ramp. The shipped FontFamily is the sentinel XamlAutoFontFamily, which resolves per language. The era docs scope Segoe UI to "English, European languages, Greek, Hebrew, Armenian, Georgian, and Arabic"; other scripts get their own UI face (Yu Gothic UI, Malgun Gothic, Nirmala UI and so on).

The 15 → 14 step happened at 1809, together with the 44 → 40 epx resize, and it also moved ControlContentThemeFontSize (the default control text size) from 15 to 14. This was verified against the UAP XAML of all ten Windows 10 SDKs³.

Details that matter more than they look:

• Large styles get lighter as they grow. Light at 46 and 34, SemiLight at 24, Normal at 20. The 46 epx Light header is the era's most recognizable typographic gesture; Windows 11 drops both Light styles and keeps only Regular and SemiBold.
• Clip, don't ellipsize. TextTrimming is None by default, and the era's guidance says so outright. Windows 11 flips it to CharacterEllipsis.
• No line-height token. TextLineBounds="Full" with LineStackingStrategy="MaxHeight", so line height comes from the font's own metrics.
• WinUI 2.5 grafted three names on (Dec 2020): BodyStrong 14, TitleLarge 40 and Display 68, all SemiBold via BaseTextBlockStyle. On Windows 10, BodyStrong is exactly Base. They live in a _v2.5 file, so a search for _v1 misses them.
• The ramp is not geometric (12, 14, 20, 24, 34, 46) and should not be "fixed".

Metrics¶

Corner Radius¶

4 / 8 is a Windows 11 value. A 2019-dated page of the era docs states 4 / 8 today only because a 2021 rewrite changed its text without touching its ms.date; before that it said 2 px / 4 px, in agreement with the code⁵.

Which controls round (WinUI 2.2 and later):

The era deliberately does not round adjacent parts inside one container (the two halves of a SplitButton), a control housed in another (ScrollBar inside ScrollViewer), or the attached edge of a flyout. The focus rectangle and shadows are never rounded either.

Borders and Padding¶

Focus Visual¶

A two-ring visual, always⁶:

The two rings are opposite so the pair reads on any surface. They are square even around a rounded control, and never accent-colored; only Reveal Focus (an Xbox opt-in) uses the accent. Most chrome controls set FocusVisualMargin="-3", which places the band from 3 epx outside the bounds to flush against them. The renderer subtracts the margin, so a negative value pushes the ring outward. Text controls are the exception: they show focus with the 2 epx border above.

Elevation and Shadow¶

Elevation is Translation.Z in epx, applied to popups, not a named token ladder⁷:

A Button sits at z = 0; there is no Card, Control or Layer rung. ThemeShadow needs 19H1, so early-era surfaces have the ladder without a shadow. Outside a Popup a ThemeShadow casts on nothing until receivers are named, and the scene is capped at five caster/receiver pairs.

Interaction States¶

There are two fill ladders, and a control's alias names say which one it uses.

Hover is lighter than rest. The chrome ladder goes down, then up. That is the era's signature feel and the reverse of every later system, and the button's hover brush is the one literal in its dictionary (SystemBaseHighColor at Opacity="0.1"), because the ramp has no 10 % base rung outside the List family. A disabled button keeps its rest fill and only grays its label. Every button border is transparent in every state, in both themes.

Text fields run the other way: they fill in as you engage with them, rest 40 % to hover 60 % to an opaque focused field, over the inverse of the page color.

Selected list rows are accent at 0.75, never a full accent. Hovering a selected row fades it to 0.6 and pressing deepens it to 0.9. The 0.6 is reached through two different keys: ListViewItemBackgroundSelectedPointerOver names ...ListAccentMediumBrush in the Light dictionary and ...ListAccentLowBrush in the dark one, and because the accent ladder runs 0.2 hotter in Dark, both land on 0.6. It looks like an inconsistency in the file and is a deliberate normalization.

A press is three things at once: the fill change, PointerDownThemeAnimation (a scale tilt, 148 uses across the _v1 files, with OS-internal timings that were never published), and on commanding surfaces the Reveal ripple. Only the first lives in a resource dictionary.

Motion¶

The documented system⁸:

Entering is twice as slow as exiting, on purpose, and Move is a ceiling that scales with distance, not a value. The easing is aggressive by design; softening it is the usual way a reconstruction stops looking like Windows 10.

What actually shipped is different:

• The Standard curve never shipped. 0.8,0,0.2,1 has zero hits in WinUI 2's XAML and in the SDK's themeresources.xaml.
• Decelerate is the workhorse: 120 of 216 KeySpline uses. Four undocumented splines carry the rest: 0.2,0 0,1 (CommandBar), 0.0,0.35 0.15,1.0 (the nav pane slide), 0.4,0,0.6,1 (ProgressBar) and 0.15,0.64,0.25,1 (CalendarView).
• Durations are inline and mostly pre-Fluent: 240, 167 and 467 ms are frame-count values from the Windows 8 animation library. Only CommandBarFlyout follows 150/300. SplitView opens in 200 ms and closes in 100 ms, the same 2:1 ratio at half the scale. The indeterminate ProgressBar loop is 3.917 s.
• Control state changes snap. Every color change in the _v1 Button, CheckBox, RadioButton, ToggleSwitch and Slider templates is an ObjectAnimationUsingKeyFrames at KeyTime="0". Windows 11's 83 ms brush transition does not exist here.

Materials: Acrylic¶

Acrylic is the era's only material. There is no Mica (it ships in WinUI 2.7, 2021-09-14, after the era closes) and no Smoke. The recipe, from AcrylicBrush in WinUI 2⁹:

From 19H1 a second recipe replaces the exclusion blend with a luminosity blend, so shadows stop bleeding through, and compresses the tint opacity by luminosity: a user value of 100 % maps to 45 % for pure white, 90 % for mid gray and 85 % for pure black, canceled out as saturation rises.

Two kinds, chosen by what the surface relates to:

The neutral brushes all tint with SystemChromeAltHighColor and differ only in opacity: 0.8 for general use (and required behind secondary text below 18 px), 0.7 for top navigation and commanding, 0.6 for the vertical navigation pane. Every flyout, menu, drop-down, tooltip and picker is background acrylic at 0.8 with the black transient hairline, falling back to SystemChromeMediumLowColor.

The fallback color is a designed state, not an error path. Acrylic goes solid under Battery Saver, on hardware without fast effects, with transparency effects turned off in Settings, and (background acrylic only) when the window deactivates or runs in tablet mode.

Reveal¶

Reveal Highlight is the era's answer to "which of these is interactive": a pointer-tracked light that exposes the hidden borders of dense commanding surfaces¹⁰. It is the thing that occupies the place Windows 11's elevation border takes.

Mechanically it is a lighting scene, not a brush effect: an ambient light and two border lights at the app root, two hover lights per container, and two brushes (RevealBorderBrush for borders, RevealBackgroundBrush for the backplate) rendered through SceneLightingEffect. The border light is shared across siblings, which is why hovering one command-bar button lights its neighbors' borders. No per-control effect can do that.

Every constant is static constexpr in WinUI 2's MIT C++:

The scoping rule follows from that geometry: use it on command bars, navigation menus and dense groupings; not on a lone button, not on popups or flyouts, not on anything larger than 500 epx. A separate SystemReveal* ramp of 22 colors sits beside the base ramp, and in high contrast every entry collapses onto its plain counterpart.

Reveal Focus is a different feature: an off-by-default Xbox focus glow in the accent color. Reveal Highlight was un-linked from Microsoft's design docs on 2021-04-23; Reveal Focus survived into Windows 11.

Iconography¶

Segoe MDL2 Assets, 1830 private-use glyphs. Windows 11's Segoe Fluent Icons keeps 1828 of the same codepoints, redrawn. The trap is SymbolThemeFontFamily: every Windows 10 SDK sets it to Segoe MDL2 Assets, but today's SDK resolves the same key to Segoe Fluent Icons. Name the font explicitly or the Windows 11 glyphs appear.

Accessibility¶

The era's contrast rule is 4.5:1 for all visible text, with no large-text exemption, so the 46 epx header is held to the same ratio as a caption. Text scaling (100 % to 225 %) is non-linear: small sizes grow more than large ones, so the ramp compresses. The _v1 files opt out of it 14 times, every one of them an icon glyph rather than prose.

Controls¶

The tables below condense the per-control values. Sizes are in epx; "base" means SystemBase* at the given alpha.

Button¶

A hyperlink grays out under the pointer rather than stepping along an accent ramp. A disabled accent button loses the accent entirely.

Toggle Controls¶

Toggles do not fill in on hover: the stroke carries the state. The unchecked ToggleSwitch knob is full-strength base high (a solid black or white dot), and no indicator grows or shrinks on hover or press; those micro-interactions are Windows 11 additions. The indeterminate box repeats the checked fill with glyph E73C.

Text Input¶

A focused Windows 10 field is ringed in accent on all four sides, not underlined, and unlike Windows 11 hovering really does recolor the outline.

ComboBox and Pickers¶

The closed ComboBox is accent-washed while open (...ListAccentLow, 0.4 Light / 0.6 Dark), focused or not. Its item padding grows by 6 epx top and bottom in touch and gamepad input modes, one of the era's InputModeStates. Reveal is the base CalendarView style.

Lists¶

Navigation¶

The selected NavigationView item has no background of its own; only the bar marks it. Windows 11 uses a 3 × 16 bar flush with a filled pill. The 24 epx SemiLight Pivot header is one of the largest gaps to Windows 11's TabView.

Overlays¶

The dialog scrim is 60 % of the inverse of the page (SystemAltMediumColor): #99FFFFFF in Light, #99000000 in Dark. Windows 10 washes a light page out behind a dialog instead of darkening it. ContentDialogDimmingThemeBrush, which is #99FFFFFF in both themes, is a Windows 8.1 key the era template never references.

Slider, Progress and Scroll Bars¶

The Slider thumb is a single 20 × 20 disc whose fill changes per state; there is no inner and outer disc pair. A color picker's slider thumb uses a neutral gray ladder instead, so it is not tinted by the color being chosen. The ScrollBar's arrow glyphs are full-strength base high.

Reproducing It Today¶

Nothing in this era is license-encumbered. The shipped XAML and C++ are MIT-licensed in microsoft/microsoft-ui-xaml, and the OS half is readable in the Windows 10 SDKs. Transcribing values is copying facts; copying code carries MIT's notice obligation. Both halves are needed: WinUI 2's _v1 files reference the SystemControl* alias layer without defining it and never re-implement about half the control set, so a color question answered from WinUI 2 alone is unanswered.

Exact From the Data on This Page¶

Choices a Re-Creation Has to Make¶

The era moved inside itself, so any faithful re-creation pins a point and says which:

• Sub-era. Base and Body text are 15 epx before 1809 and 14 after, the touch target 44 or 40 epx, and the dark acrylic tint #1F1F1F, #2D2D2D or #1C1C1C.
• OS or WinUI 2. A bare UWP app was square throughout; an app merging WinUI 2.2 or later got 2 / 4. Both are era-correct.
• OS dictionary or _v1. Where the SDK's UAP themeresources.xaml and the _v1 files disagree, they draw visibly different controls. A focused text field is SystemChromeWhiteColor with black text in both themes in the OS dictionary; TextBox_themeresources_v1.xaml re-points both at alt high and base high, so it is opaque white in Light and opaque black in Dark. The field border is also 40 % / 60 % in the OS dictionary and 60 % / 80 % in _v1.
• v2.5.0 for transient surfaces. Values mined from the current _v1 files for flyouts, menus, drop-downs and navigation panes pick up Windows 11 acrylic (see the warning under Materials).

Approximated, and Why¶

Reveal is the hard one. Every constant is public, but it is a lighting scene with per-pointer state whose border light reaches neighboring controls, not a per-control brush. A re-creation either builds that lighting model or draws the flat state fills and says so. What it should not do is substitute Windows 11's elevation border: that is the single visual that most clearly dates a surface to the wrong era.

Not a Matter of Appearance¶

Some things that look like Windows 10 Fluent are layout, behavior or content, so a theme alone cannot give them:

• the 4-epx grid, the 40-epx target and the breakpoints;
• input-mode states, such as the ComboBox item growing 6 epx top and bottom under touch;
• text scaling and its non-linear compression of the ramp;
• ElementSoundPlayer's seven UI sounds;
• the NavigationView, CommandBar and Pivot patterns themselves, as opposed to their colors;
• writing style and the clip-not-ellipsize text behavior.

High Contrast¶

The era says "high contrast", not "contrast theme"; the rename is a Windows 11 change. Four themes ship by default, and every swatch in Settings → Ease of access → High contrast maps onto one of eight SystemColor*Color resources (Window, WindowText, ButtonFace, ButtonText, Highlight, HighlightText, HotLight, GrayText). The system dictionaries author only the HighContrast key, and the alias layer derives its values from the role prefix (see High contrast is derived, not authored).

Four consequences:

• Every acrylic and Reveal brush becomes a flat solid color, at the resource level.
• SystemControlDisabledTransparentBrush becomes GrayText, so disabled controls grow a border.
• GrayText means disabled, not secondary. The era's guidance forbids it for hint or secondary text.
• The 99 _v1 files use HighContrastAdjustment="None" only six times, each where the control already guarantees its own contrast.

The same eight system colors are still read live on current Windows, so the era's high-contrast look is exactly reproducible; geometry (radii, padding, focus border, type ramp, icon font) stays the era's own.

Sources¶

Values come from the shipped implementation first (tier 1) and the era's written guidance second (tier 2). The design docs are cited at MicrosoftDocs/windows-dev-docs commit eae67b971 (2021-04-23), the last revision before they were deleted from the live site, under windows-apps-src/design/.

Control values throughout come from microsoft/microsoft-ui-xaml branch release/2.8 (the _v1 dictionaries under dev/CommonStyles/) and tag v2.5.0 for transient surfaces, together with the Windows 10 SDKs' UAP XAML for every control WinUI 2 did not re-implement. The WinUI 2 API reference on Microsoft Learn documents XamlControlsResources.ControlsResourcesVersion, the switch that selects the _v1 set. The era's controls can still be seen running in the UWP XamlControlsGallery of microsoft/WinUI-Gallery at commit e8d1cb253 (2021-04-16).