A product-level design system built on top of Microsoft's MAI Design Language, powering Copilot Discover across Edge and Windows 11 Widgets. Beyond components and documentation, we built Figma Make prototypes connected to live platform data so the team could vibe code from a real, working base.

The MAI Design System owns the base layer: color tokens, typography, materials, and core components like buttons and menus. Every product team at Microsoft AI builds on top of this shared foundation. Our job was figuring out where MAI ends and Kumo begins, keeping the product kit in sync with the base while solving for things MAI wasn't designed to handle, like feed-specific card behavior, content density, and responsive layouts across very different surfaces.

As the product scaled, we found that the base system didn't have clear rules for how components should behave across surfaces. Cards scaled differently in the top section vs the feed. There was no shared standard for responsiveness, density, or metadata display. Each team was solving the same problems independently, which meant inconsistency and duplicated effort.

We defined a unified card height system and a responsive grid that scales from four columns down to one. Every card size, column width, and breakpoint is documented so designers and engineers work from the same source of truth instead of eyeballing layouts.

The MSN Kumo UI Kit houses every product-level component for Copilot Discover: feed cards, card lists, Gems, widgets, flyouts, navigation, ticker parameters, and more. All built on top of MAI's base, all documented, all swappable across contexts.

A system only works if people actually use it. We ran internal workshop sessions teaching the team how to work more effectively in Figma, stay in sync with library updates, and use the Kumo kit on top of MAI's base. We also created step-by-step guides so new team members could onboard faster.

Every component comes with documentation covering setup, variable modes, theme switching, file organization, and naming conventions. The goal was to make the system self-serve so designers could move fast without needing to ask.

My role: Product Designer

What I contributed to: UI kit architecture, responsive framework, card density system, component documentation, team workshops, Figma Make prototypes

Team: Copilot Discover, Microsoft AI

Timeline: 2022 - Present (redesign shipped 2025)