The Microsoft Web Framework (MWF) has evolved, and we are excited to announce the latest iteration, called Moray. In Moray, you’ll find refreshed design guidance and code, including standardized typography, color, buttons, and other common elements and UI patterns. It provides modular building blocks in the form of utilities and atomic components, from which larger patterns may be built while still adhering to base brand consistency and accessibility standards.


Along with Microsoft branding standards, usability, and accessibility requirements, our philosophy for MWF is aligned with industry best practices and standards for front-end frameworks (CSS, HTML, and JavaScript). As a front-end component library built upon a proven open-source foundation, Moray facilitates code reusability and maintainability when scaling across the large portfolio of Microsoft-branded websites. We encourage the adopter community to innovate using the library for their own needs and contribute back to the library for even greater scaling of Microsoft’s resources. 


Guiding principles

These are the key principles that define our latest Moray catalog and will continue to guide MWF as a program through the evolution of future catalogs and services.

Inclusive user experiences: Develop web experiences for everyone 

Inclusive design includes experiences for users of all abilities, worldwide. The goal is to enable adopters to create experiences that meet the needs of all audiences, geographical locations, and user abilities.  

Responsive design: Meet users on their preferred devices 
Beyond being mobile-friendly, our framework is built for high-quality experiences on any device. Performance matters, and MWF’s mobile-first approach aims for frustration-free web experiences.

Cohesive catalog: Enable consistent web experiences
Consistency in experiences across Microsoft web properties is critical to building trust with end users. The catalog of items should be flexible enough to support various web experiences while still maintaining cohesion across the user journey.

Collaborative growth: Evolve with learnings from adopters
The community that uses the framework will contribute to its growth and evolution through continued use and shared learnings.


Quality & craftsmanship: Aim for excellence, focus on the details
Maintain attention to detail through designing and developing the highest level of quality for end users. Leverage industry score cards and research to improve the framework with global UX standards.

Stay connected

Follow the link to the site to start exploring the Moray catalog and understanding the potential for getting involved. To start, add the site link to your favorites and we will keep you informed of more updates and resources to come. Contact us directly through Teams MWF Support channel, file a bug or request new features/enhancements through the MWF intake form, or send feedback to help us improve the documentation site.