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.
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.
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
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.
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.
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.
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.
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.
Core Microsoft products such as Outlook Mail & Calendar, Powerpoint, Excel, Word, etc.
Tailored mobile products that have specific intent, attract new users, and may both leverage, as well as grow the core offerings.
Hero, or labs apps designed for our own windows platform, devices, and ecosystem.
Hero, or labs apps designed for other platforms, outside of Windows, such as iOS, or Android.
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.
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.
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.
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.
Who we are, who we’re for, why we matter, our quest.
High level vision of the hub, hero and snack apps.
Make life work better - our brand story.
Words work. Find out how.
A top level vision statement for Visual Identity principals and outcomes.
Download Our Design Manifesto PDF
Download Our Design Process PDF
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.
Illustrator color palettes for Outlook.com, Outlook Web App/O365, & Outlook on Windows.
UI toolkits for both 4px, and 10px grid systems.
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.
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.
Illustrator file showing the top level experience screens.
Download Desktop AIT
Download Phablet AIT
Download Phone AIT
Download Portrait AIT
When starting a new project follow our example folder structure
Download Word document
Download AI
View document templates
View email templates
View iOS templates
View presentation templates
Motion examples and Keyframe information on our Slide story
Slide Down In 10
Slide Down In 20
Slide Down Out 10
Slide Down Out 20
Slide Left In 40
Slide Left In 100
Slide Left Out 20
Slide Right In 40
Slide Right In 100
Slide Right Out 20
Slide Up In 10
Slide Up In 20
Slide Up Out 10
Slide Up Out 20
Motion examples and Keyframe information on our Fade story
Fade In 100
Fade In 200
Fade In 500
Fade Out 100
Fade Out 200
Fade Out 500
Motion examples and Keyframe information on our Scale story
Scale Down In 100
Scale Down In 98
Scale Up In 100
Scale Up In 103