Skip to main content

Getting started with MWF

MWF works together as a series of page types, modules, and components. It’s a system that allows site authors to consider how best to tell the story of Microsoft products and services with confidence that the modular pieces will support and work together. If you are new to MWF take a look at the general workflows for designers and developers, or get started by downloading our files or connecting to our CDN. If you need further help, reach out to the MWF community.

Number one imagery

Designing: Step one

Download files

Start with our Adobe Illustrator files for components and modules, color swatches and grid.

DOWNLOAD FILES

Developing: Step one

Connect to CDN

Connect to our CDN to get the latest CSS and JS for your site, that will be updated automatically.

CONNECT TO CDN
Number two imagery

Designing: Step two

Learn about our styles

See guidance from Microsoft's Design Language on color, typography, grid, imagery and motion on the web.

SEE STYLES

Developing: Step two

Get framework details

Learn about how the various parts of the framework come together, such as the grid and core structures.

PAGE DETAILS
Number three imagery

Designing: Step three

Learn about Modules

Learn more about modules, which are the sectional building blocks in our page layouts.

GET STARTED WITH HERO

Developing: Step three

Get what you need

As you build out your website, grab the parts of the code that are relevant for each of our modules and components.

GET STARTED WITH HERO
Number four imagery

Designing: Step four

Design + collaborate

Work with developers to provide guidance around the designs as they are built in code.

Developing: Step four

Design + collaborate

Collaborate with designers around aspects of the layout, to ensure that the storytelling is as intended.

Discover more about MWF