[SttingsV2] Updated design spec

[htcfreek]

We need an updated design/layout specification for Settings V2.
At the moment we have various mock ups, issues and ideas. For me it is not clear how the final setting should look and behave.

It should be based on the MS Design Guidlines.

It should also include the results off #2700, #2705, #2710, #2688 and other interesting mock ups/ideas.

@enricogior, @crutkas, @niels9001, @laviusmotileng-ms: Thoughts?

[niels9001]

Not sure. The examples look outdated (Windows 8ish, with e.g. Windows Mobile mentioned). We want to look as native as possible and based our current design on the current Windows 10 Settings app in terms of padding, margins and fontsizes. Only tweak we have made is the page title: that now follows the Windows 10X page title style.

I think, with the current implementation, we are really close to the design guidelines you mentioned. Even inbox apps like Mail or Your Phone do not follow these to the exact pixel, which is fine since they are _guide_lines.

Being as close as the native Settings app makes most sense, since we both have not a single settings page but basically an entire 'app'.

My 2 cents :).

[niels9001]

Also, if you want to follow up on some of the ideas and thoughts around this topic, check out issue #889

[htcfreek]

@niels9001 You are rigth.

But we have to ensure, that changes on link/button style and other generally things are done for all settings pages.
In which way are they coordinated?

[mdtauk]

I would have thought the PowerToys WinUI app would have a shared Xaml ResourceDictionary, so pages using a shared resource, will update as that style resource is updated.

That should enable consistency throughout all PowerToys Xaml UIs

[crutkas]

@mdtauk, little by little

[htcfreek]

@mdtauk That could bee. I don't know that.

What I mean with the design spec is, that I can use one different settings pages

• different controls for the same setting. (Example: on/off switch & checkbox; dropdown & radio buttons)
• different namings for the same setting. (Example: Give feedback & Send feedback)
• different items on the sidebar.

[crutkas]

I'm going to close this out, i think a better work item here is "Clint sync's with the design team". Based on that, we can get official docs updated if they differ. I agree we should be true to docs but those are guidance as well.