Designing Dark Mode

How we’re crafting Dark Mode experiences across Microsoft 365 that adapt to your daily flow

Jon Friedman
Aug 28, 2019 · 4 min read
A woman holding a cell phone with Dark Mode enabled.
A woman holding a cell phone with Dark Mode enabled.

Designing Dark Mode for Outlook mobile and Office.com

Today’s fast and fluid world constantly blurs the lines between work and life, and we believe in meeting people where they are. Our tools are used to keep up to speed on everything from work communication, to personal events that include friends and family, to changes in shared documents. This often means viewing email, calendars, or files in places where the default white mode may be less suitable, like darkened airplanes, movie theaters, or in bed at night.

Dark Mode on various iOS mobile devices.
Dark Mode on various iOS mobile devices.
Dark Mode experiences on iOS. The colors pop for legibility without overwhelming the darker feel.
Dark Mode on various web programs.
Dark Mode on various web programs.
Dark Mode experiences on web.

A Design culture of creative collaboration

The seamlessness and flexibility that we’re building into Microsoft 365 design systems mirrors our own fluid creative process. We brought designers together from across the company to create a common Dark Mode experience for all our mobile and web apps. The creative energy that came from exchanging ideas and collaborating with new peers was one of the most fun parts of this entire effort.

A color palette that ranges from blacks to greys to whites.
A color palette that ranges from blacks to greys to whites.
Colo palettes for blues, purples, greens, and oranges.
Colo palettes for blues, purples, greens, and oranges.
We explored hundreds of color options against various backgrounds before selecting these muted color categories.

Future rollout for Dark Mode in Microsoft 365 apps

We’re excited to bring Dark Mode to even more of the Microsoft 365 product suite, starting with additional mobile experiences. Dark Mode comes to Word, Excel, and PowerPoint for mobile with the launch of iOS 13, as well as iPad, where we know many people choose to use those apps. That same launch will also bring Dark Mode to SharePoint, OneDrive, OneNote, Planner, and To-Do on mobile.


Microsoft Design

Putting technology on a more human path, one design story…

Jon Friedman

Written by

Head of Microsoft Office design, leading the next generation of experiences for work & life. Opinions expressed here are my own, even the few good ones;-)

Microsoft Design

Putting technology on a more human path, one design story at a time.

Jon Friedman

Written by

Head of Microsoft Office design, leading the next generation of experiences for work & life. Opinions expressed here are my own, even the few good ones;-)

Microsoft Design

Putting technology on a more human path, one design story at a time.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store