STEPHANIE SULLIVAN
MICROSOFT 365 ADMIN DESIGN SYSTEM // CASE STUDY
Bridging the
gap to Fluent 2
A consumable theme that helped existing products adopt a new visual design language — years before they could migrate their foundation.
✦ DESIGN SYSTEMS ✦ THEMING ✦ COMPONENTS ✦ UX + ENGINEERING ✦ CONSTRAINT-LED DESIGN ✦
THE PROJECT
Fluent 2 theme for the M365 Admin design system and additional partners
MY ROLE
Product design
PARTNERS
UX engineering
FOCUS
Theme + UI toolkit
01 // THE CHALLENGE
The foundation was moving. Our partners couldn't do that yet.
The design system underneath our work was getting a major Fluent 2 upgrade, but many product partners wouldn't be able to consume that foundation for years.
Waiting would leave the experiences visually behind. Forcing a migration would ignore real technical constraints. We needed another path: one that could bring the new visual language to existing code without pretending the underlying architecture had already changed.
THE SYSTEM
A new visual language was ready to move forward.
THE REALITY
Partner codebases needed a practical bridge, not a rebuild.
02 // THE APPROACH
Make the upgrade consumable.
Working closely with a UX engineer, I helped design a theme partners could apply to make their existing interfaces visually align with Fluent 2. We tested that bridge through the real components in our UI toolkit—not through an isolated style exercise.
CountAnnotationBar
A data visualization control with multiple sizes, interactive states, grouped values, and a broad semantic color range.
DashboardCard
A flexible content surface spanning layouts, data visualization, compound content, and both light and dark themes.
Tag
A compact semantic component that had to remain clear across statuses, background colors, and light and dark contexts.
03 // WHAT I LEARNED
Progress lives in the tradeoffs.
Technical constraints are design inputs.
The best answer wasn't the purest migration. It was the bridge partners could realistically use.
Speed needs a shared definition of "enough."
A theme could move visual alignment forward while the foundational transition could follow its longer timeline.
Compromise can still be systematic.
Applying one strategy across the toolkit made the transitional experience feel intentional rather than piecemeal.
Final thoughts
01
Work with the contraint
The final output met partners where their code was instead of requiring them to use an architecture they couldn't adopt, and would likely end up abandoning.
03
Design with engineering
My close partnership with the UX engineer kept the work grounded in what could actually be consumed and shipped, AND it helped guide the timeline for adoption.
02
Prove it in components
Real toolkit and code examples exposed how the visual language behaved across density, data, states, and modes. It made the solution understandable and trustworthy.