Microsoft design and color language

Question

Microsoft design and color language

Anonymous

Hi,

I'm not sure how to caption this question correctly so I'll give it a try. :)

While searching for informations about Teams 2.0 I stumbled upon this official document:
4899MSFT_ModernWorkNewTeams_INFO_R8 (microsoft.com)

Beside some fancy marketing layout it seems to have new colors and so on for the whole Microsoft universe.

My question is:

* where do I find official color codes for each application

* maybe including which color they transist to (as the whole layout constist of color transitions)

Why do I want it?
I'm hosting some SharePoint sites in my company which have documentations about M365 products and my goal is to have a similar layout/color/design as the official MSFT sites.

Thx and best regards

Locked Question. This question was migrated from the Microsoft Support Community. You can vote on whether it's helpful, but you can't add comments or replies or follow the question.

0 comments

2 answers

Answer 1

Hi Fabrice, this is Bryll

Thank you for writing us here in Microsoft Community.

If you are looking for official color codes for each Microsoft application, you can check out the Fluent Design System website, which provides guidelines and resources for creating consistent and engaging user interfaces across the Microsoft ecosystem. You can find the neutral, shared, and brand color palettes, as well as design tokens and semantic colors, that are used in Fluent components and products. For example, the brand color for Teams is #6264A7, and the semantic color for success is #107C10. You can also see how these colors are applied to different interaction states, such as hover, focus, and selected.

You can also check the design guidelines on the Microsoft Learn website. There you can see the color scheme for each theme (default, dark, high-contrast) and the color tokens that you can use in your app design. You can also see how to integrate your app's color palette with Teams and use the standard Teams colors, which are designed to meet accessibility requirements. For example, the primary button color in an embedded component is **#6264A7** and the secondary button color is **#A6A7DC**. You can also see the color codes for other elements such as text, icons, and backgrounds.

The color transitions in the layout depend on the theme and the app context. For example, in the default theme, the background color changes from **#FFFFFF** to **#F3F2F1** when you switch from a personal app to a team app. The foreground color also changes from **#323130** to **#605E5C** for secondary text.

To create similar layouts and designs as the official Microsoft sites, you can also use the Windows UI Library (WinUI), which is a collection of UI controls and styles that follow the Fluent Design principles. WinUI provides tools and templates for building responsive and adaptive Windows apps with XAML and C#. You can also use acrylic material and reveal highlight effects to add depth and motion to your interfaces.

This is my way of helping you out. I hope this helps you with your SharePoint sites.

Best regards,

Bryll

Community Moderator

Answer 2

Hello there,

We haven't heard from you, so we assume that your issue has already been addressed. We will not be monitoring this thread moving forward so, if you need further assistance, please create a new thread to discuss these concerns by clicking this link: Create a new question (microsoft.com)

Respectfully,

Bryll

Community Moderator