Outlook / Office 365

Framework Design

We're starting a new conversation about design language

We have a point of view

And we have a lot to talk about

Branding, brand identity, product personality, and design language

Just to name a few

As our product offerings, and the broad range of end points in which our customers experience them continue to increase — so, too, do the challenges around our brand development, brand identity, personality, design patterns, and platform influences.

Microsoft Office

Design Language

Our design language is a single system

It builds familiarity, creates loyalty and leads to trust

It’s principled, and well established, yet always looking to evolve with us, or to shape each new experience.

We’re confident in our design language, and in its ability to connect our products and services aesthetically, and reinforce One Microsoft.

Our design language is made up of a few key things


Our product is our brand

Of many things, all great brands have a recognizable feel to them, an over-arching aesthetic, a brand voice, which, over time, builds certain expectations, and elicits certain emotions if successful. Our brand is no exception, and should resonate through the experience at every level. How we do this may vary based on product or intent, but there’s no doubt that our brand essence should ladder up to the larger Microsoft ecosystem, unapologetically. Brands speak to the mind, and the heart.

Our essence. Our Promise. Our big idea, manifested.

Outlook Brand & Personality Traits

We aim to help you rule your world, and restore order to your day.

We are the original command control center.

Born to help people communicate, manage time, prioritize, and connect so they can master life.

We are for people of action.

People for whom life means getting the most from their precious time and human connections. They seek tools for self-direction, discovery and collaboration.

We matter because generally, people are struggling in the attention economy.

In the age of noise, data and stimuli rush at us so fast that there’s no time or space in which to think, prioritize, and strategize.

It's our quest, or marching orders if you will

to move Outlook beyond email to being a more complete ally for today’s modern, productive life.

Brand identity, Personality

Our brand identity comes from our design language, and is our personality.

The visible, audible, perceptible elements, the tangible, those that appeals to the senses. It’s the aesthetic nature of a brand (such as colors, typography, layout, scale, composition, iconography, motion, logotype, product name, voice) that together, compositionally, identifies and distinguishes the brand in the consumers’ mind.

These elements come together through a systematic design approach that becomes recognizable, builds familiarity, trust, and brand equity through our user experience.

Our brand identity is part of our design language, and personality.

Core UI

The ingredients of our design language, or personality

Our brand identity & personality, or the aesthetic nature of our product experiences, are compositional in that are the composed of specific elements which are arranged in relation to each other, creating a greater whole - gestalt, harmony.

Deconstructing these compositions into individual constituent parts would reveal core UI - the foundational graphic design elements such as grid, typographic ramps, leading, kerning, color pallets, iconography, graphical styles, and core controls.

The ingredients.

‘Content first’ is the essence of the Microsoft design language, our stamp on modern software UI.

Outlook new category and labs

We’re looking to win every conversation, every day, on every device by revolutionizing the conversation experience.

On mobile, social, and in the cloud, we’re deepening, nourishing and discovering connections. This is the anchoring design idea and personality of all our products.

As a result, more meaningful conversations happen when people use our apps. And we’re focused on winning the first 1000 raving fans. (Because we believe the rest is easy.)

Our goal: to reach anyone, anywhere, in-stride. By flowing across networks, devices, and scenarios. And specializing on purpose.

It’s all powered by the virtuous cycle between hub, hero and snacks.

One Microsoft, one voice.

Microsoft Office

Voice Guidelines

One Microsoft, one voice.
One Microsoft, one voice.
One Microsoft, one voice.

Let's have a conversation

About how we talk

Let's express ourselves

About who we are

Our voice is always human. We write the way we talk: naturally.

Our language is simple and direct. We default to short words, short sentences.

We’re empathetic and helpful. Our customers know we’re on their side.

No. More. Robot. Speak. Voice is our heart and soul.

How we talk

Microsoft Office

Cross Platform

A little about how we think about designing our experiences on different platforms

It's a bit of an 80/20

Our experiences are everywhere now, and although it’s not a bad problem to have, it’s a complex one to solve at an experience level. At the end of the day we strive to

Unify apps visually

Identify the most important Office-centric concepts that are the same across the apps and make sure they behave in a similar way across platforms and devices. Anything in this category has to be so important, we should make it the same regardless of platform convention.

Acknowledge and embrace flexibility

So let’s have the platform do 80% of the work for us, and be thoughtful about the 20% that’s uniquely us.

How we view cross platform

Hero apps & experiences

Core Microsoft products such as Outlook Mail & Calendar, Powerpoint, Excel, Word, etc.

Labs & Garage apps

Tailored mobile products that have specific intent, attract new users, and may both leverage, as well as grow the core offerings.

First party

Hero, or labs apps designed for our own windows platform, devices, and ecosystem.

Third party

Hero, or labs apps designed for other platforms, outside of Windows, such as iOS, or Android.

Cross Platform in action

Download the full set of whiteframe templates



OLK Search triggered from top app bar following Office Threshold controls. (Hardware button triggers Bing search and may become Cortana button.) Deviates from Windows guidelines which places search at the bottom.


Search is a top level action, preceded by New. Search query replaces the app bar. Android apps often suggest recent searches and refines as type is entered.


Pull down to search, may need to expose search as top level action. It is currently exposed in Acompli and MOWA. Suggestions are shown once user starts to type.

Let's have a look

Download the full set of whiteframe templates

Top level navigation and commanding


Windows places actions along the bottom bar with only current location title in top bar. Office apps in threshold combine the two. Currently exploring cross app navigation for mobile.


Hamburger and commands generally placed in the top app bar. Additional actions placed in overflow menu, module navigation generally takes place from the drawer.


Top app bar commands are generally limited to a single action upper right with additional contextual actions at the bottom. iOS guidance places contextual actions at bottom but many apps change the top bar.

Microsoft Office

All Together Now

It’s the sweet spot, where we find the balance between ‘unapologetically Microsoft’ and platform familiarity.

Leveraging this language, design guidance, assets, and tools provided, should help determine the right balance of brand identity, personality, CoreUi and platform influences, and directly influence the design direction of our products.

Our experiences should feel unapologetically Microsoft, on all platforms, but be familiar, intuitive, and leverage the platform in ways the user would expect.

Microsoft Office


What's in here?

Following is links to deeper documention, guidelines and design tools that ensure our design intent lands in our products. This is not final copy but when it comes it says stuff.

Brand / Strategy

Outlook Brand Metastory

Who we are, who we’re for, why we matter, our quest.

New Category & Labs

High level vision of the hub, hero and snack apps.

Office Brand Guidelines

Make life work better - our brand story.


Words work. Find out how.

Brand & Personality White Paper

A top level vision statement for Visual Identity principals and outcomes.

Studio Philosophy

Visual Identity / Core UI Guidelines


Outlook.com, Outlook Web App/O365, & Outlook on Windows color palettes, and accessibility.


Outlook.com, Outlook Web App/O365, & Outlook on Windows iconography guidelines.


Outlook.com, Outlook Web App/O365, & Outlook on Windows type ramps and usage guidelines.


Outlook.com, Outlook Web App/O365, & Outlook on Windows grids and usage guidelines.

Design Toolkits

Illustrator Color Palettes

Illustrator color palettes for Outlook.com, Outlook Web App/O365, & Outlook on Windows.

Illustrator Common Control Symbols

UI toolkits for both 4px, and 10px grid systems.

Cross Platform White Frames

Basic Illustrator toolkit for silhouettes, navigation, and commanding for Windows, iOS, and Android.


Latest version of Segoe variations, as well as cross platform typefaces.


Icon fonts for generating UI comps and implementation.

POR Template Screens


Illustrator file showing the top level experience screens.


Sketch files showing the top level experience screens.


Illustrator file showing the top level experience screens.


Illustrator file showing the top level experience screens.

Working Template Screens


Illustrator file showing the top level experience screens.

New Category Apps

Illustrator file showing the top level experience screens.


Illustrator file showing the top level experience screens.


Illustrator file showing the top level experience screens.

Studio Assets

Example Folder Structure

When starting a new project follow our example folder structure

Studio Philosophy

O365 Design Studio Logos

Modern Design
Design Language
Voice Guidelines
All Together Now