Aero¶

Windows Vista and 7, 2006 to 2012; Win32, WPF and WinForms. The two releases share one look. Where they differ, this page gives both values; everywhere else the value holds for both.

Aero is remembered for its glass window frames, but the part a control framework draws is much quieter: glossy gray controls that only turn blue when you touch them, Segoe UI 9 pt, white content over a light gray dialog face, and a blue main instruction. This page covers that part in detail and explains why glass cannot be rebuilt in a client area today.

Principles¶

The Name and the Two Principle Sets¶

Aero has one name and two sets of principles, one for each end of the era. The name is a backronym, stated the same way in the Vista-era guideline pages and in the 2010 guide: "Aero stands for: authentic, energetic, reflective, and open."³ Neither document defines the four words one by one.

Vista's guidelines framed the design as twelve Top Rules.⁴ They are concrete and prescriptive, and several of them become pixels directly:

Windows 7's guide replaced the rules with eight design principles, headed by "Reduce concepts to increase confidence" and "Small things matter, good and bad". They are process questions rather than visual rules, and they only exist in the printed guide (pages 4 and 5).³

What Aero Is Not¶

The strongest rules in both sets are subtractive. They matter as much for a re-creation as the positive ones, because each one is a thing a theme could easily get wrong.

The Mechanical Design DNA¶

Put together, the rules reduce to a short list a renderer has to reproduce:

• Controls are neutral gray at rest. Blue means interaction: hover, press, the default button and selection. Nothing else is blue except links and the main instruction.
• Surfaces are glossy: a face gradient split hard at 50 %, a 1 px dark border and a 1 px white inner ring, with small 2 to 3 px corners.
• Segoe UI 9 pt with ClearType for every system font, including the caption.
• A text-style ramp with color: the 12 pt #003399 main instruction is as recognizable as the glass.
• No accent. The user's glass color tinted the frame, taskbar and Start menu, never a control.

The Tiers¶

The same aero.msstyles drove several rendering tiers, and the difference between them matters for what a theme draws:

Glass and Basic differ only in the frame. Client-area controls look identical in both, which is the single most useful fact for a control framework: an opaque page is what the era's own client area drew.⁵

Foundations¶

Color¶

The Aero system colors are one fixed light palette. Vista and 7 agree on every slot except one, GrayText.¹

GrayText darkening from #808080 to #6D6D6D raises disabled text on white from about 3.95:1 to 5.17:1 (derived with the WCAG formula; the era states no reason and no contrast ratio).

The text colors are real values in the TEXTSTYLE class, and they carry most of the era's identity:

Two warnings about the per-part values. First, AeroStyle.xml gives most controls only as FillColorHint/BorderColorHint/AccentColorHint: one color that summarizes a bitmap so a custom control can blend in. The push button's hints are fill #F4F4F4, border #8E8F8F and default accent #04CCFF, but the drawn button is a four-stop gradient. Second, the current Windows 11 Aero.msstyles still returns 309 of 319 comparable AeroStyle.xml values while drawing flat Windows 8 buttons. The hints were never updated when the bitmaps were redrawn, so a button sampled from a current Windows install is never an Aero reference.

The drawn surfaces share a small set of color families, all from WPF:

‖ marks a hard stop: two stops at the same offset.

Aero has no accent. DwmGetColorizationColor returns the glass color, and the DWM documentation describes it as "the color of the non-client region".⁶ No control color in AeroStyle.xml or in the WPF theme references it, so Highlight stays #3399FF whatever the glass color is. The only first-party colorization value is Windows 7's default, 0x6B74B8FC (#74B8FC at about 42 % alpha), from the .theme file format documentation. A theme that feeds the live OS accent into Aero controls is drawing Windows 10, not Aero.

The UX Guide also assigns color meanings, which are the natural source for severity colors:

Typography¶

Every system font in AeroStyle.xml is Segoe UI, 9, Quality:ClearType: caption, small caption, menu, message box and status. That is 12 px at 96 DPI, and the caption is Regular, not Bold. The only larger sizes are 12 pt (16 px) for main instructions, 11 pt for list-view group headers and 10 pt for flyout headers. Bold is the only weight besides Regular; the era has no Light or Semibold.¹

Sentence-style capitalization became the rule with Vista, for everything but titles. The UX Guide disagrees with AeroStyle.xml in three places (it prints the instruction as black and disabled text as #323232, a value no theme file contains); for Win32-drawn text AeroStyle.xml wins.

Glass text is the one place Aero drops ClearType: subpixel rendering has no meaning over a translucent surface, so text on glass is grayscale-antialiased with a glow, drawn through DrawThemeTextEx with DTT_GLOWSIZE into a 32-bit buffer. On an extended glass frame a black GDI pixel is fully transparent, which is why plain black GDI text on glass came out as illegible gray.

Metrics¶

The UX Guide prints every size in both dialog units and pixels. There is a trap in it: the pixel column was converted with the 8 pt Tahoma factors (1.50 and 1.625 px per DLU), not the 9 pt Segoe UI factors (1.75 and 1.875) printed on the same page. Under the Segoe UI factors a 50 x 14 DLU button would be 88 x 26 px; the table says 75 x 23, which is what shipped dialogs measure. Draw the printed pixel values and do not re-derive them.³

A Vista dialog is a white content area above a #F0F0F0 command area, separated by a 1 px #DFDFDF line. The band is 40 px tall for one row of buttons, which are right-aligned in the order OK/[Do it]/Yes, [Don't do it]/No, Cancel, Apply, Help. This split is what makes a screenshot read as 2009, and it is application layout rather than theme data.

Elevation and Shadow¶

Aero has no elevation system: no levels, no z tokens and no per-control shadow. It has three unrelated depth mechanisms, and a control framework owns exactly one of them.

The popup shadow is the popup's own rectangle displaced +5, +5 and filled #71000000 (44 % black). The whole shadow lives inside that displaced rectangle: a solid center wrapped in a 5 px fall-off band whose alpha multiplier steps 1, 0.743, 0.381, 0.124, 0.027, 0 at half-pixel steps, with radial corners at the popup radius plus 5. Because the displacement equals the band width, the top and left bands land under the popup, and what a user sees is a 5 px shadow down the right and along the bottom. The source says its fall-off is "based on the Win32 dropshadow fall off". It goes under menus, submenus, tooltips, combo drop-downs and toolbar overflows, and only when the system drop-shadow setting is on.⁸

Motion¶

No Vista or 7 source states a single control transition duration. The mechanism is era (Vista's uxtheme reads per-part TMT_TRANSITIONDURATIONS and plays them through buffered animation), but the values in a current aero.msstyles are Windows 11 data. What does exist:

WPF's chrome animates only when client-area animation is on, the machine is on AC power and the render tier is above 0. Every WPF slider state change is instant.

Materials: Glass¶

Glass is Aero's only material, and it belongs to the compositor. An application never paints the blur, the tint or the reflection. It marks where glass should show, with DwmExtendFrameIntoClientArea (margins) or DwmEnableBlurBehindWindow (a region), keeps those pixels at alpha 0, and dwm.exe does the rest in the user's colorization color. The blur radius, tint weights, reflection texture and default opacity were never published. Windows 7 stores its colorization as registry values (ColorizationColor, ColorizationAfterglow and three balance weights) that no Microsoft document describes. The blend they feed (tint times color balance, plus desaturated blur times afterglow times afterglow balance, plus blur times blur balance) is known only from community reverse engineering of the DWM shader bytecode,⁷ so it is not presented here as an era fact.

Controls¶

Each table gives the drawn values. Unless a row says otherwise, gradients are vertical, top to bottom, and come from WPF Aero.

Push Button¶

The push button is four layers, outside in, and every other control follows its grammar.

The hard 50 % split is the signature. Two gradients meeting at a coincident stop are what make the surface read as glossy rather than shaded, and one smooth ramp over the full height loses it. The UX Guide's own Win32 screenshots measure #707070 and #F2F2F2 → #EDEDED ‖ #DDDDDD → #CFCFCF, within one to four levels of WPF. The border is the one visible disagreement: WPF and those screenshots draw #707070, the Win32 hint says #8E8F8F, and which one a real Vista drew is not settled.

Push buttons have six Win32 states (PBS_NORMAL, _HOT, _PRESSED, _DISABLED, _DEFAULTED, _DEFAULTED_ANIMATING) and no focused state. Focus is a dotted rectangle drawn on top of whichever state is current: in WPF a 1 px stroke with dash 1 2, inset 2 px, in the control-text color. Focus cues stay hidden until the user drives the UI with the keyboard (UISF_HIDEFOCUS). In WPF, keyboard focus makes any button pulse like the default one, mirroring the Win32 rule that a command button becomes the default when you tab to it.

Command links have no frame at rest: a 12 pt #151C55 label and note next to a green arrow, 41 or 58 px tall, with a pale cyan 1 px frame only on the default link.

Check Box and Radio Button¶

The check box stays light when checked. Aero has no filled toggle.

The glyph is 13 x 13 px, square, in five layers. The Win32 screenshot pixels match #8E8F8F/#F4F4F4/#AEB3B9/#CBCFD5 exactly, and equal AeroStyle.xml's hints; no other part of the set agrees this closely across sources. The mixed state is a filled blue square with a dark inner border and a half-white highlight, which the UX Guide calls "a solid blue" box. It is the one place the check box turns blue. Pressing an unchecked box previews the check at 70 % opacity in WPF.

The radio button is the same well made round. The checked dot is a radial gradient lit from its top-left quarter point, #E5E5E5@0.1 → #5DCEDD@0.35 → #0B82C7@1, inside a 1 px #193B55 ring. Hover brightens it to #FFFFFF/#74FFFF/#0DA0F3, press darkens it to #95D9FC/#3A84AA/#075483.

The Win32 BP_CHECKBOX part has 20 states in both SDKs, including the implicit and excluded states Vista added; no era source documents their look. Aero has no toggle switch.

Text Box¶

The border is a 1 px gradient over an absolute 20 px span, with stops at 1 and 1.4 px, so the top edge is dark and the sides fade lighter: the field reads as sunk under a shadow at the top. The corner radius is 1, not the button's 2.75. Focus turns the border blue and there is no dotted rectangle inside a field; a theme that draws one is drawing Windows 95. The prompt is gray text that disappears on focus (#575757), and the password mask is ● (U+25CF). Win32 and WPF agree on this control, and Windows 7 screenshots measure the same stops.

A spin box is a text box with an up-down control flush inside its right edge: two stacked halves, each a small button face with a 7 x 4 triangle. No era source gives its width, so libwinui uses the up-down control's default, SM_CXVSCROLL, the same 17 px as the scroll bar, for NumberBox's inline spin buttons.

Combo Box¶

Vista rebuilt the themed combo box into two looks. A drop-down list (CBS_DROPDOWNLIST) is drawn as a push button, full width, and stays in the pressed look while its list is open. An editable combo is a text box with a square drop button as wide as the 17 px scroll bar. The arrow is a 7 x 4 px solid black triangle (#AFAFAF disabled). The list is white, square, framed in WindowFrame #646464, highlighted in flat #3399FF with white text, and carries the popup shadow.

Slider¶

WPF's slider thumb is an 11 x 22 block (radius 1), or a 10 x 18 pointer when ticks sit on one side, over a 4 px #E7EAEA groove whose border fades from #AEB1AF at the top to white.

A white 1 px inner ring sits inside the outline; ticks are #C4C4C4. There is no value fill: a Win32 trackbar has no filled part. Every state change is instant. The Win32 hints (green accent #47C446, border #767676) disagree with WPF and are hints only.

Progress Bar¶

A progress bar's color is its state. AeroStyle.xml gives the PP_FILL hints: normal green #52D763, error red #E40021, paused yellow #DCD400, and a partial teal #0094AD that no public message can reach. PBM_SETSTATE (new in Vista) exposes the first three. The Win32 bar is smooth; the chunked parts are marked deprecated. WPF's indicator is a glossy #01D328 under a green wash (about #5BE969 effective) with a 100 px white glow sweeping across it; the WPF track is #BABABA → #C7C7C7 → #BABABA. Taskbar progress is Windows 7 only.

libwinui draws WPF's bar under Aero: 15 px tall in a #B2B2B2 → #8C8C8C frame, the track's top 53.85 % glassy, the indicator with its dark 15 px ends, the warm light in its lower half and its own gloss, and the glint crossing it at 200 px/s with a 1 s rest. Paused and error, which WPF has no look for, swap the indicator to the Win32 yellow or red and drop the wash and the glint. An indeterminate bar runs a 100 px band of the indicator's #01D328 green over the gray track, fading out at both ends, as WPF's does.

Scroll Bar¶

17 px wide. The thumb uses the same split-gloss grammar as the button.

The track hint is #F4F4F4. Arrow buttons show no chrome until the pointer enters the bar. The Win32 thumb hint is a lavender #ABAFDA, which matches neither WPF nor era screenshots.

libwinui draws this bar under Aero in place of the overlay one, after WPF's ScrollChrome: a permanent 17 px gutter that ui::Scroll gives up while the bar shows (the content is measured again in what is left), a #E1E1E1 → #EDEDED → #E3E3E3 track running across the bar (#F4F4F4 when there is nothing to scroll), arrow buttons as long as the bar is thick with a 7 × 4 #707070 glyph that turns #212121 and gains the thumb's chrome when the pointer enters the bar, a thumb with three gripper lines once it is longer than 15 px, and a #F0F0F0 corner cell where two bars meet. It never narrows or fades. TableView gets the same pair: its rows give up the right gutter and its columns the bottom one.

Menus¶

Vista is the first Windows with themed menus. The system colors make Menu and MenuBar equal to Btnface #F0F0F0, and MenuHilight equal to Highlight, which is the flat-menu color rather than the themed one. The themed look exists as numbers only in WPF:

libwinui draws these menus under Aero. The popup is square, its rows padded 2,3,2,3 with a 24 px icon column, a 37 px gap before the shortcut and a 17 px column for the 4 x 7 cascade arrow. A checked item shows WPF's #0C12A1 check in a 22 px #E6EFF4 box in place of its icon. The separator is a #E0E0E0 and white line pair in a 12 px slot, starting at the gutter's edge. There is no pressed look, and keyboard focus shows as the hot row. The menu bar sits on WPF's gray gradient, a hovered item is only outlined in #90717070, and an open one is pressed in with a #28717070 → #90717070 fill.

Tooltip¶

The Aero tooltip is not yellow. Its body runs #FFFFFF → #E4E5F0 inside a 1 px #767676 border, radius about 2, with #575757 text and the 5 px popup shadow. WPF, AeroStyle.xml's text color and the UX Guide's screenshots agree exactly. #FFFFE1 is the Classic tier's COLOR_INFOBK, still what GetSysColor returns, and so a tooltip drawn from system colors comes out in the wrong tier. Balloons use the same body with a rounder corner and a 12 pt #003399 title. Tooltip timings derive from the double-click time: 500 ms initial, 5 s auto-pop, 100 ms reshow.

Lists, Trees and Tabs¶

A stock comctl32 list or tree view selects with flat Highlight #3399FF and white text. The rounded light-blue Explorer selection is opt-in (SetWindowTheme(hwnd, L"Explorer")), its gradients live only in the bitmaps, and WPF gives them only to GridView rows (hot #F1FBFF → #D5F1FE, selected #D9F4FF → #9BDDFB, radius 2, text color unchanged). #828790 is the list, tree and list-box border in three independent sources. Tree glyphs are 6 x 6 triangles: hollow #989898 collapsed, filled #595959 expanded.

WPF tabs use the button face at rest and the hover blues on hover; the selected tab is flat #F9F9F9, grown by 2 px to merge into a #F9F9F9 page. The Win32 tab hint carries an orange accent #FFC83C that no drawn source confirms. libwinui's Tabs takes the WPF look under Aero: #8C8E94 borders on three sides, the gray two-band face (#F3F3F3 → #EBEBEB, #DDDDDD → #CDCDCD), the blue one with a #3C7FB1 border under the pointer, and the content 4 px inside the framed page.

Navigation Pane¶

The Control Panel's task pane is a surface of its own, and its links have their own colors. AeroStyle.xml ties the two together in a comment: "Caution disabled navigation link text color must show over the NavigationPane Fill".

The pane's FillColorHint stayed #56938A in the Windows 7 SDK, but navy text on dark teal would be unreadable. The hint is stale, and the Windows 7 fill is measured from screenshots rather than stated. Nothing in the era slides an accent bar beside the selected row: the current page is navy Bold.

Group Box and Dialogs¶

The group box border is #D5DFE5; the AeroStyle.xml hint, the WPF brush and a measured screenshot agree to the digit. The task dialog is two-band: a white primary panel over the #F0F0F0 command band, a 32 px icon at (10, 10) on a 10 px grid, the main instruction in 12 pt #003399. Aero never dims the desktop behind an ordinary modal dialog; the only first-party dimming is UAC's secure desktop.

libwinui's GroupBox draws this frame under Aero: 1 px #D5DFE5 with a 2 px corner step, the black title 12 px in with a 2 px gap in the frame either side, the frame's top at the title's middle, and the content 16 px down, 9 px in and 11 px above the bottom.

Reproducing It Today¶

Aero is the lucky era for a re-creation. Its look was published twice, and one of the two implementations, WPF's, states the drawn surfaces as numbers under a license that permits reuse. Where WPF's values can be checked against pixels measured from the UX Guide's own Win32 screenshots, they agree to within one to four levels per channel. The bitmap artwork in aero.msstyles is not needed for most of it, and it must not be redistributed anyway.

Two rules for using the sources. Transcribing values (gradient stops, radii, durations) is not the same act as copying code: WPF's chrome classes are MIT, so a lifted render method carries the license notice with it, while a transcribed number does not. And a current Windows install is not a source: its Aero.msstyles still returns almost every AeroStyle.xml value while drawing flat Windows 8 bitmaps (see Color).

Exact From the Data Above¶

Approximated, and Why¶

Cannot, on a Current Windows¶

• Glass in the client area. "Beginning with Windows 8, calling this function doesn't result in the blur effect": DwmEnableBlurBehindWindow is inert.⁹ The compositor's blur radius, tint weights, reflection texture and opacity were never published, so any glass today is a construction. Mica and Acrylic are not substitutes: they are saturated and noise-textured, a different material from a different decade.
• The glass frame. The non-client frame belongs to DWM, which draws the frame of the running OS. A libwinui window opened with Frame::Themed draws Aero's frame itself. While transparency effects are on, the host asks Windows to blur what is behind the window, through an undocumented user32 call (SetWindowCompositionAttribute), and the frame paints glass over the blur: Windows 7's default "Sky" color #74B8FC at 42 %, three faint reflection streaks, the outline and highlight, and a white glow behind the title. DWM's own glass also mixed in an afterglow scaled by the backdrop's brightness, which a window cannot reach, so the tint is a close match rather than the same composite. The blur radius was never published. With transparency off, full screen, or on a Windows release where the call stops working, the frame is the opaque Windows 7 Basic frame, measured from the Basic art the style still carries. Vista's own Basic frame is not available, and the window shadow stays DWM's. The Basic frame's top corners are cut from the window with a region, from the caption art's 4-row mask, the way Windows 7 Basic shaped its windows, which costs the shadow. A region does not clip the blur, so on glass the frame leaves those pixels unpainted instead: they show the bare blur, and the shadow stays.
• The artwork. The era's aero.msstyles bitmaps are Microsoft's and cannot be shipped with another product.

The loss is smaller than it sounds. The era itself confined glass to "small regions touching the window frame without text" and warned against using it where "a plain window background would be more attractive or easier to use".³ Every era example, IE7's address band or Media Player's control strip, is a frame extension holding chrome, never a page behind content. Since client-area controls looked the same in the Glass and Basic tiers, an opaque page is what Aero actually drew in the client area, not a low-fidelity stand-in for it.

Not Theme Data¶

A theme alone does not make an application look like 2009. These belong to layout, content and behavior:

• the white content area over the #F0F0F0 command area, and the 40 px command band;
• the UX Guide's sizes and spacing (75 x 23 px buttons, 11 / 7 / 5 / 3 px spacing, the 18 px indent);
• button order (OK, Cancel, Apply, Help, right-aligned), sentence-style capitalization and the main-instruction text itself;
• command links, task dialogs and the Ribbon, which are controls in their own right;
• focus cues hidden until keyboard use (UISF_HIDEFOCUS) and tooltip delays derived from the double-click time, which are system behavior.

High Contrast¶

On Vista and 7, High Contrast is not an Aero variant. Selecting a High Contrast theme turns visual styles off, and the whole UI renders in the Classic model from system colors, with no glass, no gradients and no DWM features: "Users of high contrast themes must use the Windows classic UI."¹⁰ Every themed part falls back to its classic construction, and owner-drawn controls were expected to keep a second code path for it. The in-box schemes the UX Guide tests against are High Contrast Black and High Contrast White. No era source states their default color values, so a re-creation reads the contrast colors from the running system rather than embedding a table.

Related eras: Luna came before, Metro replaced it with Windows 8 in 2012.

Sources¶

This page ranks its evidence in tiers. First-party machine-readable sources come first (the SDK AeroStyle.xml files and headers, and the WPF Aero theme source), then the written specification (the UX Guide, the Vista UX Walkthrough and the Vista-era guideline pages), then samples and reimplementations, then values measured from the UX Guide's own lossless screenshots. Values read from a Windows 11 Aero.msstyles are out of era and count only where they match an era source. Community reverse engineering ranks last; its one use here, the Windows 7 colorization blend, is labeled where it appears.