Our curated palettes reflect the Microsoft brand, and are key unifying elements of our brand’s visual identity. The color chosen for typography must always be distinct from the background color. However, too much contrast can be hard to read. Use a contrast ratio of at least 4.5:1 for text on background colors. While many of the branded assets on the web will need to use bright, saturated colors, we are introducing a softer, neutral color palette to be used for large background elements and color blocking. A neutral color backdrop helps bring brand colors to the foreground. This palette is most often used for typography as well.
Brand color palettes
These colors represent Microsoft brand colors and are defined by Marketing. They cannot be modified or used as accent colors outside of the specific brands they represent. They should be used sparingly and only to call out primary brand elements and calls to action, such as buy buttons.
Only one brand color should be used at a time to avoid creating a rainbow effect. Page backgrounds should be black, white, or gray. One brand color may be used to highlight important elements, and all other colors should recede by comparison.
Only use large blocks of brand color when they sit behind typography or glyphs, never behind hardware renderings. Only black, white, and gray should be used behind hardware renderings. Bright brand colors should never detract from our premium hardware renderings or the product itself.
Microsoft brand colors
Windows + Edge
Surface + Lumia + Band
Neutral colors recede into the background in order to let our products shine. They allow brand colors to pop when we need to draw attention to content. We also use the neutral palette with accent colors to style our components. When coupling neutrals with accent and brand colors, make sure there is suitable contrast between them.
Microsoft Neutral Colors
Heroes and placement tiles that feature product photography should use neutral backgrounds and calls to action.
Full-color call to action buttons and links should only be used in scenarios that lead to an actual download or purchase, when the button in question is the primary or only action on the page. All other scenarios should use neutral black or white theming.
Color placements within a mosaic should be balanced to maintain proper eye direction and contrast.
Avoid positioning color placements next to neutral placements or photography of the same general value – this makes the colors appear to vibrate against each other. Instead, position darker colors next to lighter neutrals, and brighter colors next to darker neutrals.
Brand color logo
Brand color through photography
Neutral icons on color backgrounds