microsoft web Framework

The purpose of creating a standard Microsoft web framework is to create a cohesive design system that is functional, useful, and valuable to customers. The design system, which can be found on the closed site, informs how our technology looks and feels across all consumer-facing websites.


Our highly collaborative team consisted of 2 designers, 6 developers (contractors), Program Manager, and Design Manager.

I helped design foundational components as well as robust modules. Some considerations were interactive states, layout, options, responsive story, accessibility, specialized product usage and cross-Microsoft usage. I also helped determine and write rules of practice.

*Examples shown here are a tiny selection of the extensive components/modules I completed for the Microsoft Web Language Portfolio.

Users may find our sites inconsistent and difficult to find what they are looking for. Microsoft websites vary greatly in usability, interface, and overall visual design and architecture. consists of commerce as well as editorial sites. We needed visual and functional alignment across all sites to embody the One Microsoft concept.

A consistent and cohesive design system that includes a common web framework and components will help unify Microsoft’s web properties and make the site easier for the user to navigate and find great products.

Any future changes to common components or styles can be done within the code so all affected elements are universally changed. All Microsoft sites will be unified while retaining its own brand identity.

The framework and assets are available for agency use at, the Microsoft design language Web Framework website.



design system

Design System for Microsoft web properties

(Please click to see enlarged images.)

Microsoft Web Framework Design tenets

The design system informs how our technology looks and feels across all consumer-facing websites


The responsive story shows how the components resize and/or stack across the viewports. Components shown include the header, hero, content-placements, features, mosaics, product placements, and banner.


UI Components

item placements

Item placements: content-types

Item placements: examples