The Moray Framework is a pre-built catalog that aims to supply teams within Microsoft the ability to easily create and prototype authored pages to be placed within Microsoft.com. We’ve worked to maintain design libraries that include high fidelity prototypes that can be adopted by other teams to design unique pages around. The framework is broken down into 4 areas: Styles, Components, Patterns, and Examples.
The basics of design that lay the foundation for all UI for the Microsoft Web Framework. This includes color system, typography, grid structure, and viewports.
Components are the building blocks of the Web Framework. Components are single, stand-alone pieces that help build functionality into pages.
Built using components, Patterns are repeatable parts of the Web Framework, enabling greater functionality with pre-defined guidelines and use cases.
Built using both Components and Patterns, examples are pre-built pages that can be used to create larger parts of a page. Specific examples generally contain guidance and recommendations.
Our team took on the task of rebuilding the documentation site. This required a visual identity to be built out that would keep things consistent throughout our adopters, our users, experiences. I lead the initiative that lead to the creation of colors, icons, placeholder content to generalize our library, presentation decks, video covers, learning material imagery, as well as figma covers, and templated figma frames.