Question: Where are the additional Windows 11 design guidelines?

[AzAgarampur]

The main design page for new app development (located here: https://docs.microsoft.com/en-us/windows/apps/design/) contains information about the new Windows 11 design principles and materials, but it lacks information about what to use for many of the stated design choices.

I dug into WinUI's docs to find some of this information as well, but I couldn't find any. I'll list some of this information below:

• Windows 11 places emphasis on elevation (base layer and content layer), as described here: https://docs.microsoft.com/en-us/windows/apps/design/signature-experiences/layering As the page says, many controls do take these values into their own handling, however, there are referenced items that I don't know of. Example: What is Elevation Value? Stroke width is given to me, but what color should the stroke/outline be? Is it theme aware? Are there theme dictionaries to follow? What is the card control?, etc...
• Other Windows 11 components, such as the settings app, use controls like the "card" that perfectly align with Windows 11 design principles. Example: they change their visual state with click, hover, and the border is semi-transparent just like the window frame borders. Where are these styles in WinUI?
• Apps like the Microsoft Store and Settings, Calculator, have icons in their titlebar. Where are the design guidelines for this new "style"? Does WinUI have any built-in styles to elements in the titlebar so that they match the same "icon & caption" design that the rest of Windows 11 apps have?
• How can I use individual WinUI styles for my controls? Example: I want to create a custom "back" button for navigation in my app. I am applying the navigation back button style by using {ThemeResource NavigationBackButtonNormalStyle}. This uses the Windows 10 style, not the Windows 11 style with the animated visuals.

These are a few of the questions I have regarding design for Windows 11. There are more, but I can't find documentation on them, and I'm omitting them from this issue for brevity.

[AzAgarampur]

#6613 is a good addition to this list as it also questions the same things

[harvinders]

Card #6543 would also fall in this list

[StephenLPeters]

@chigy and @marksfoster FYI

[AzAgarampur]

So I see that the developer info on ms docs says things now like "the app icon is 16x16". However its still missing layout info, like the margin between the icon and window frame, margin between icon and caption text, account picture placement, etc.

[stepanzh]

One more frustrated person here. I would recommend to look through Figma's "Windows UI 3" templates. It really helps to understand what's going on with app layout, typography and color hierarchies, gives a list of controls (WinUI 3 lacks some of them).

Microsoft, I like your fluent design system, but reverse engineering of many little things becomes painful.
Good luck, code breakers.