Pure black gave room for buttons and dialogues to separate from the base.

Black surfaces gave us flexibility with other UI elements, such as cards, dialogues, and toolbar elements, all of which served as context signaling for the user.

Neutral grays lived in harmony with time-of-day color temperature shifting such as TrueTone and Night Mode.

As we refined our explorations, we discovered that pure black saved battery life.

Here’s why we chose a pure black surface: We explored various surface color variations and decided on a mobile-first direction. The work that came from Fluent Design on web and desktop served as our north star. To understand what surface colors made sense for us, we collaborated across Microsoft Design. It’s what helped us earn our reputation, and we can’t forget our roots.īecause our products live within a larger family, we needed a solution to work across all of Microsoft 365. As part of that effort, we constantly try to balance functionality, usability, and quality in Outlook mobile. Microsoft 365 mobile prioritizes preserving continuity and collaborative promise for the user. For example, Outlook would have to look and feel familiar to a user coming from Word. Outlook mobile is a part of a bigger family, so we needed to bring all our other mobile apps along and ensure a consistent experience. Throughout the course of our journey, we made sure to protect the way people composed and read emails, and how they understood their schedules. People use our product to tell them important information, and we need to serve that purpose well in any environment. For Outlook mobile, the combination of email and calendar is key. To begin, we examined our product identity. Let us know what you think in the comments! 1.

We’ve found five things to think about when designing for dark mode, and we hope you’ll find them helpful too.

But after chatting with a few people in the community, we know we’re not alone. Designing a cohesive, maintainable dark mode that makes existing creature comforts feel fresh seemed like a daunting task to the Outlook mobile design team. What isn’t: how to do it in a way that’s scalable without losing the product’s soul. Meanwhile, dark mode continues to climb as a top customer ask in your feedback channels. The darkness consumes you, and the answer becomes more distant with every keystroke.

You look around for standards, only to find a wild west of creatively applied themes in third-party environments. Imagine you’re tasked with implementing dark mode.

Microsoft to do dark mode