New Community Toolkit Compositable Icon/Logo Branding

[michael-hawker]

Following up from discussions here and here from other repos.

Background

I wanted to 'revamp' the discussion here in our design repo as we move forward with more/new toolkits and our Toolkit Labs in the future.

At present our current 'Toolkit' icon is pretty basic and flat from the prior MDL2 asset set, as @niels9001 pointed out in the issue above. We need to evaluate about updating to the more modern revamp going on across Microsoft.

In addition, we've been branching to multiple related projects as we've grown our mission as well as starting with more incubation and experimental projects.

Goals

I think it'd be useful for us to have a core logo/icon that is connected to our Community Toolkit branding/mission:

We want to be the home for .NET based Community Toolkits which are partnering the community with engineers, Microsoft MVPs, and the teams working on those technologies.

Something that we can use in our GitHub branding and general communications when talking about the 'Community Toolkit' effort as a whole.

In addition, we have different sub-projects which would be nice to have connected, but unique branding to associate with their project.

We really want to feel like a cohesive entity when engaging our different communities. At the same time, we also want it to be clear when packages/projects are targeted towards specific technologies/platforms within .NET so that they can aid in directly developers to the proper project/resources when looking for resources or engaging the project on GitHub itself.

Proposal

I think having a composable system would be useful here where we can take the main core mark and add either a technology mark or our 'experimental' mark branding on top of it in a coherent way. (Think Edge/VS with their dev/canary/beta labels.)

This would also let us expand in the future if we onboard new toolkits in the future.

As our core active projects, we currently have:

• .NET Community Toolkit
• MAUI Community Toolkit
• Windows Community Toolkit

And we have the new Labs for Windows coming as well. (And may still do more with Graph in the future ~2023, though we currently brand that under Windows mainly.)

Example

To be clear, everything in this section is for illustration purposes only towards the concept of compositing elements for a system and not part of a proposal to use these emojis as the branding itself. 😉

For instance, suppose we had a new logo like this for our central mark (which we can use for the GitHub org and central landing sites for docs/wiki):

And if we had specific sub-marks for each tech like .NET, MAUI, and Windows:

And a separate mark for Labs:

So then we could combine them for each project:

Or to reference Labs in general:

Or to reference a specific project for Labs, like Labs for Windows:

Challenges

• Finding something that won't be cluttered when combining all three bits of information?
• Testing with community if distinguished enough to convey the project branding?
• Still associated as a central brand together?

Thoughts?

FYI @brminnick @Sergio0694 @nmetulev @niels9001 @mdtauk

[mdtauk]

Some initial thoughts, well questions...

• Does this "master" brand/mark need to be distinctive, as in a brand that works without wordmark and context, or just illustrative of a "toolkit", and feel Fluent?
• Does it need to reflect the technology, so Visual Studio branded, or in Microsoft colours?
• Do we use existing technology marks with this? (WinUI logo, WPF icons, XAML, C# icons and colouring?)

[michael-hawker]

Great initial questions @mdtauk, thanks!

• Does this "master" brand/mark need to be distinctive, as in a brand that works without wordmark and context, or just illustrative of a "toolkit", and feel Fluent?

I think the main/core mark would rarely be used on its own without any context. So, it'll always probably show up as "🧰 Community Toolkits" or something either as part of the GitHub org/docs/wikis here or in any communications we send out. It certainly needs to have some distinctiveness as a mark, but it doesn't need to convey everything alone. I think you called out the proper keyword of 'toolkit' there though for sure.

It's probably most important for the Core + Tech marks to stand out the best, as they'd end up as our NuGet icons for instance which will be tied to other misc names and more stand-alone until someone digs into descriptions/info.

• Does it need to reflect the technology, so Visual Studio branded, or in Microsoft colours?

I think if we aligned to any color scheme or guidance it'd be around the .NET branding guidelines. We definitely want some association to the .NET world as that's our main focus/expertise in the communities we've been engaging. Thought at the same time, I don't think that has to be a core tenant to convey if it's at odds with the other goals here.

• Do we use existing technology marks with this? (WinUI logo, WPF icons, XAML, C# icons and colouring?)

This is a good question on usage rights of those things, and I don't think all technologies have a mark at the moment (like MAUI for instance). It may of course help with recognition I suppose. At least on the WinUI side I know @ryandemopoulos could maybe chime in here for us about thoughts on more tightly-coupling the brandings together or not.

I think the main concern here with direct usage is if folks would get confused about ownership of the projects or associations for support.

[mdtauk]

Regarding the use of existing logos/icons - we could take inspiration from Edge Canary, Dev, Beta icons, and just use a text badge

[niels9001]

I like the badge idea to indicate the different frameworks - especially since Maui / .NET don't have very destinctive icons. We could use color to indicate if it's a "Labs" type or not (like VS Code does with blue vs. green).

The .NET visual style for icons is different than that of Windows (I think Azure or the Business Applicationa, like Power Platform or Dynamics, are more similiar to Windows/Fluent) so that might be another thing to take into account. Feels like we need to create a little framework on how this could work.

[mdtauk]

I like the badge idea to indicate the different frameworks - especially since Maui / .NET don't have very destinctive icons. We could use color to indicate if it's a "Labs" type or not (like VS Code does with blue vs. green).

The .NET visual style for icons is different than that of Windows (I think Azure or the Business Applicationa, like Power Platform or Dynamics, are more similiar to Windows/Fluent) so that might be another thing to take into account. Feels like we need to create a little framework on how this could work.

Everyone watching this thread could be contributing ideas and suggestions - and those maintaining can run them through the theoretical use cases, and provide feedback on where ideas fall short.

[mrlacey]

I like the idea of using text (especially for things that don't have their own icons) however, I wonder if it will be hard to distinguish between "WinUI" and "Win32" at small sizes.

Is it worth varying by color for each different platform?

Could then add an adornment for the labs versions of each.

[mdtauk]

I like the idea of using text (especially for things that don't have their own icons) however, I wonder if it will be hard to distinguish between "WinUI" and "Win32" at small sizes.

Is it worth varying by color for each different platform?

Could then add an adornment for the labs versions of each.

Visual Studio uses different colours for things, but with Windows, everything seems to be blue. .Net is a shade of purple. But its all very similar.

In what circumstances will the Toolkit for Win32 Icon be used? Is it for web branding, or does it need to fit into the 32 x 32 icons?

There is also the possibility that the toolkit icon, becomes a badge to other larger icons...

[Nirmal4G]

Why not put the badge as a label on the toolbox itself atleast in larger versions, >96px?

[michael-hawker]

Looks like we have an effective resolution of 32x32 for distinction in NuGet icons (within VS at least):

So, if we apply @mdtauk's current labels as a mock, we can see that here:

It does seem like text alone would be pretty small and hard to distinguish (unless enlarged which may take over the design); so I do like the idea of color banding/changes based on technology.

In terms of text labels, if we go with that, I think we could have .NET, UWP, MAUI, and WinAppSDK or WinUI3? @mrlacy, I don't see us having/using a Win32 label, so I don't think we have to worry about overlap there?

If we used Purple for .NET and Blues for UWP/WinUI3 (though we may need another distinguisher), I'm not sure what colors we'd use for MAUI... @brminnick it's usually been tied to the .NET colors, eh?

[mdtauk]

Perhaps the Icon can be the badge, something like this?

[michael-hawker]

@mdtauk that's an interesting idea. Though that ties into the open question around permissions/associations with the branding of the other projects. And some of those projects may have brand guidelines (like .NET) about compositing their logo to begin with.

Though if we create our own branding for each sub-project, this could be a cool way to do the inverse of compositing I had suggested originally that may be easier to make work or at least highlight the main technology. 🤔

[mdtauk]

@mdtauk that's an interesting idea. Though that ties into the open question around permissions/associations with the branding of the other projects. And some of those projects may have brand guidelines (like .NET) about compositing their logo to begin with.

Though if we create our own branding for each sub-project, this could be a cool way to do the inverse of compositing I had suggested originally that may be easier to make work or at least highlight the main technology. 🤔

Anything involving a lot of text, will be problematic, such as WinAppSDK - getting that at 32x32 is a tall order.

Colours could be an idea, but WinUI, Win32, and WinAppSDK would likely all use Blue. .NET uses Purple, but what about Xamarin and MAUI?

Then Visual Studio assigns colours to code languages, so C# is Green, C is Red I think, so there may be clashes with that.

[Sergio0694]

I absolutely love @mdtauk's idea. I think it looks great, and we could go talk to the various teams involved in case we needed special permissions to use their logos (after all all of those projects are themselves from Microsoft anyway). Something like that would help immensely letting the community know those projects are 1st party, as the logo would immediately be recognizable when browsing packages. I think conceptually it also conveys exactly what the Toolkit-s are: extensions for each major project, that are not built-in into the various platforms/SDKs but still developed in collaboration with the various teams and overall by Microsoft in general.

[mdtauk]

[niels9001]

To @michael-hawker 's point: I can imagine there are (strict) guidelines on when to use product icons, in what context or composition. But I guess that those aren't public so someone at Microsoft might be qble to find out :).

For clarification. Where do we expect these icons to show up?

• Branding (e.g. docs, repository, slides)
• NuGet icon
• App icon for the sample gallery apps

I think the app icon could be slightly different than the branding/NuGet icons (like the .xlxs icon is similiar, but different from the Excel app icon) to respect platform app icon conventions.

In NuGet, the UI already provides the title and description - so having tags/labels in the icon there might not be needed?

[mrlacey]

I don't see us having/using a Win32 label, so I don't think we have to worry about overlap there?

I know this (https://github.com/CommunityToolkit/Microsoft.Toolkit.Win32) hasn't been touched in a while but does a lack of a need to consider it mean it doesn't have a future?

[mdtauk]

I don't see us having/using a Win32 label, so I don't think we have to worry about overlap there?

I know this (https://github.com/CommunityToolkit/Microsoft.Toolkit.Win32) hasn't been touched in a while but does a lack of a need to consider it mean it doesn't have a future?

It probably gets subsumed into WinAppSDK support right?

[michael-hawker]

I don't see us having/using a Win32 label, so I don't think we have to worry about overlap there?

I know this (https://github.com/CommunityToolkit/Microsoft.Toolkit.Win32) hasn't been touched in a while but does a lack of a need to consider it mean it doesn't have a future?

The Win32 repo is managed by the WinUI team. It has effectively been just waiting for XAML Islands support to come to WinUI 3 to be archived. So, there is no future for it in terms of branding we need to consider for the project moving forward. Consider it part of "Toolkit Legacy".

[niels9001]

Based on the ideas @mdtauk showed, I made a quick iteration (this needs work big time.. some of the sizes and colors are off) that shows a concept/composition that might scale:

• Color + logo indicate the type of toolkit (MAUI vs. .NET vs. WinUI)
• Colored banner to indicate e.g. a Labs or preview version (following the Edge/VS Code / Terminal way of doing that)

[mdtauk]

Based on the ideas @mdtauk showed, I made a quick iteration (this needs work big time.. some of the sizes and colors are off) that shows a concept/composition that might scale:

• Color + logo indicate the type of toolkit (MAUI vs. .NET vs. WinUI)
• Colored banner to indicate e.g. a Labs or preview version (following the Edge/VS Code / Terminal way of doing that)

Am wondering how this will hold up at the smallest sizes, but I do really like the composition of the toolbox itself

[brminnick]

I love these new icons!

Just one quick nit - we can't use the Xamarin logo on the .NET MAUI Community Toolkit because Microsoft is sunsetting the Xamarin brand. (As a former Xamarin employee, it truly does break my heart 😢).

I'm unsure if .NET MAUI has its own official unique branding outside of using the .NET branding. The most common logo I've seen for .NET MAUI is the surfing .NET Bot:

(Kind of unrelated, but also kind of related) I've created an image of the .NET Bot + Toolkit that we use as the logo for our monthly .NET MAUI Community Toolkit standup on the .NET Foundation YouTube Channel, and the team is welcome to leverage it if you'd like!

[michael-hawker]

@niels9001 love that toolbox and how well it plays with the color variations too, and it does scale well.

I find the Labs label doesn't hold up quite as well for the small size though, the logos shrinking is a bit hard to distinguish as well, but the color variation helps to hold up the distinction. Wonder if we could change the ratio/proportion of logo to toolbox size as things got smaller and make the logos larger? I'll ask the WinUI team the next time I connect with them about using their mark like this. I like the notion of just keeping it mono-colored.

@brminnick according to the .NET brand guidelines I think the .NET Bot is supposed to be more of a communications tool only vs. any specific logo, so I don't think we could use the surfing one here for the logo/icon of the toolkit itself. Though it'd probably also not shrink down well.

Is there anyone on the MAUI team we could reach out to in order to find out if they have any branding plans for release to give MAUI a branding like Xamarin had with the "Hex-X"?

@niels9001 thoughts on what the org/base mark would be? Would it just be a gray toolbox? Would we have "Community" or a representation/gathering of people (for community) on it maybe?

[mdtauk]

[niels9001]

@niels9001 love that toolbox and how well it plays with the color variations too, and it does scale well.

I find the Labs label doesn't hold up quite as well for the small size though, the logos shrinking is a bit hard to distinguish as well, but the color variation helps to hold up the distinction. Wonder if we could change the ratio/proportion of logo to toolbox size as things got smaller and make the logos larger? I'll ask the WinUI team the next time I connect with them about using their mark like this. I like the notion of just keeping it mono-colored.

Yeah, for smaller sizes we'd need to create specific assets (increasing the icon or banner on smaller sizes) instead of shrinking the original version like I did.

Is there anyone on the MAUI team we could reach out to in order to find out if they have any branding plans for release to give MAUI a branding like Xamarin had with the "Hex-X"?

The X used was more of a placeholder. I was hoping for a similiar one with a M but couldn't find one. What does the app icon for Maui apps look like?

@niels9001 thoughts on what the org/base mark would be? Would it just be a gray toolbox? Would we have "Community" or a representation/gathering of people (for community) on it maybe?

Oh that's a nice idea👌.

What are the combinations of icons would be required to have?

• Base / community
• .NET + Labs
• MAUI + Labs
• WinUI + Labs (would this include both WinAppsSDK and UWP?)

[michael-hawker]

In terms of total assets which we'd need to start with, the list would be around 5 or 7 (depending on UWP/WinUI split/varience):

• General / Community (GitHub org, general communications, doc landing page, etc...)
• .NET
• MAUI
• UWP/WinUI (we'd have to figure out how we want to distinguish these I think)
• UWP/WinUI + Labs (Labs right now is mostly focused on the Windows side of things, but may later get picked up by our other two main .NET/MAUI projects in the future.)

For reference the UWP/WinUI 3 naming/packaging identity discussion is occurring here.

[brminnick]

RE: .NET MAUI Toolkit Icon

I spoke with Beth Massi (Director who basically owns .NET Marketing at MSFT) and here's what she said:

• Does .NET MAUI have an official logo?
  • "No, app models don't have their own logos. The only official logo is the .NET logo"
• Can we use the .NET Bot in out Community Toolkit logo?
  • "No, you need to follow the branding guidelines on logo lockup rules"
• Is anything changing the future?
  • "The UX team is looking at potentially rebranding .NET at some point and we will look at iconography for app models and languages"

[Sergio0694]

"The UX team is looking at potentially rebranding .NET at some point"

Unrelated, but... What 👀

[michael-hawker]

"The UX team is looking at potentially rebranding .NET at some point"

Unrelated, but... What 👀

I would assume this doesn't mean renaming .NET itself, vs. refreshing the branding of .NET itself (i.e. the purple color, the logo, etc...).

@brminnick assuming no timeline was provided for that? In which case we should probably figure out a solution that works for us in the interim and we can always update based on our model in the future.

[brminnick]

I would assume this doesn't mean renaming .NET itself, vs. refreshing the branding of .NET itself (i.e. the purple color, the logo, etc...).

This is my assumption as well

assuming no timeline was provided for that? In which case we should probably figure out a solution that works for us in the interim and we can always update based on our model in the future.

Correct, and agreed 💯

[michael-hawker]

@brminnick going off the surfing bot for inspiration, what about a wave 🌊 or surfboard as the icon for the MAUI Community Toolkit? Or maybe poll the MAUI community on Twitter for ideas?

[mdtauk]

Incase anyone wanted to see the more generic toolbox icon at all the sizes...

[mdtauk]

In terms of total assets which we'd need to start with, the list would be around 5 or 7 (depending on UWP/WinUI split/varience):

• General / Community (GitHub org, general communications, doc landing page, etc...)
• .NET
• MAUI
• UWP/WinUI (we'd have to figure out how we want to distinguish these I think)
• UWP/WinUI + Labs (Labs right now is mostly focused on the Windows side of things, but may later get picked up by our other two main .NET/MAUI projects in the future.)

For reference the UWP/WinUI 3 naming/packaging identity discussion is occurring here.

[niels9001]

Here's another iteration:

• Added a community icon (as suggested by @michael-hawker ). Hard to find a good "neutral" color so grey for now :). I could imagine replacing the "people" icon with e.g. a code icon (to indicate that it's a coding toolkit).
• Adopting @mdtauk corner radii, sizes and overall composition which makes it look way better imo.
• Added a soft gradient on the icons (similar to the Windows folder icons) and additional subtle shadow. Its now using the correct shadows and gradient directions used across Fluent icons. The Labs banner is a bit better readable now on the smallest sizes.

[Sergio0694]

That looks pretty nice! 👀

You already mentioned this, but yeah I guess the community icon seems a bit "sad" now, could use some more colors/life 😄

[michael-hawker]

That looks pretty nice! 👀

You already mentioned this, but yeah I guess the community icon seems a bit "sad" now, could use some more colors/life 😄

What if we had a diverse group of people (4) each colored one colored with Red, Green, Blue, and Yellow shirts? 🤔 Subtle hint at our support/connections to Microsoft still preserved?

[mdtauk]

How about this, colours taken from the Windows 11 Downloads Folder Icon

[mdtauk]

Has any progress been made on these?

[michael-hawker]

@mdtauk thanks for reaching out! We've been fairly heads-down on some tech work for our Labs project. @niels9001 is actually starting with our team next week! 🙂 So, I'm hoping this is something he can help us pick up again as he onboards to help us drive to final state. 😉

[michael-hawker]

@niels9001 since we've started using the new designs and plan to start using them more in the future, we should make sure the files are in this repo, eh?

[michael-hawker]

Checked in the new assets in #2 so closing this issue. Thanks @niels9001 and everyone for their feedback and suggestions!