5 out of 5 rated this helpful - Rate this topic

Style, layout, and color guidelines for apps for Office

apps for Office

Learn style guidelines for the layout, typography, color, icons, borders, and backgrounds of your apps for Office.

Last modified: February 19, 2014

Applies to: Access app for SharePoint | Excel 2013 | Excel 2013 SP1 | Excel Online | Outlook 2013 | Outlook 2013 SP1 | Outlook Web App | OWA for Devices | PowerPoint 2013 | PowerPoint 2013 SP1 | PowerPoint Online | Project 2013 | Project 2013 SP1 | Word 2013 | Word 2013 SP1

In this article
Style guidelines
Margins and padding
Typography
Color
Glyphs and icons
Borders, lines, and backgrounds

Follow these guidelines so that style of your apps is consistent with the overall design philosophy used in Office applications.

Users will understand your app's content and interactions more easily if you follow a consistent pattern for margins, gutters, positioning of common UI, and padding between groups and elements. A consistent silhouette limits distractions and helps users focus on your app's experience.

Task pane app margins

Task pane layout

Task pane layout
Header margins in task pane app

Header margins in task pane app
Content area margins in task pane app

Content area margins in task pane app
Footer margins in task pane app

Footer margins in task pane app

Task pane app padding

Vertical padding between content in a task pane app

Vertical padding between content in a task pane ap
Horizontal padding between content in a task pane app

Horizontal padding between content in a task pane
Horizontal padding between buttons in a footer

Horizontal padding between buttons in a footer

Content app margins

Content app layout

Content app layout
Header margins in a content app

Header margins in a content app
Content area margins in a content app

Content area margins in a content app
Footer margins in a content app

Footer margins in a content app

Content app padding

Vertical padding in a content app

Vertical padding in a content app
Horizontal padding in a content app

Horizontal padding in a content

Mail app margins

Content app layout

Content app layout
Header margins in a content app

Header margins in a content app
Content area margins in a content app

Content area margins in a content app
Footer margins in a content app

Footer margins in a content app

Mail app padding

Vertical padding in a mail app

Vertical padding in a mail app
Horizontal padding in a mail app

Horizontal padding in a mail app

Mail app vertical scrolling in iOS devices

When you create a mail app that supports tablets or smartphones, if the content in the app pane is longer than the height of the IFrame, currently iOS touch devices (iPads, iPhones) don't always automatically display a vertical scroll bar. To make sure your app scrolls correctly on these devices, follow these guidelines:

  • In the CSS for your mail app, style the html element with height:100%.

  • Define the body element as follows:

    • height: 100%

    • overflow-y: auto

    • -webkit-overflow-scrolling: touch (to support inertial scrolling)

Segoe UI is the signature UI font for Office and Windows 8 and is the recommended font for apps. The recommended sizes below are designed to align with Office host applications. Use scale in typography to create hierarchy. Use no more than three font sizes in one view and be sure that the font sizes used are noticeably different in scale.

Tag

Image

Font-family

Font-size

Font-weight

H1

H1

Segoe UI Light

26px

lighter

H2

H2

Segoe UI Light

18px

lighter

H3

H3

Segoe UI

12px

600

Body

Body

Segoe UI

12px

normal

Links within app

Links within app

Segoe UI

12px

normal

Links to outside of app

Links outside of app

Segoe UI

12px

normal

Tabs

Tabs

Segoe UI

12px

normal

Controls, labels

Controls, labels

Segoe UI

12px

normal

Buttons

Buttons

Segoe UI

12px

normal

Use color meaningfully and consistently in your app. If you use color to indicate actionable items such as navigation, links, and buttons, don't use the same color for items that are not actionable. If you use color to emphasize headings, use that color consistently throughout your app.

Make sure that color is accessible. When using color for text or white text on a color background, make sure that your colors have enough contrast to meet accessibility guidelines (a 4.5:1 contrast ratio).

Default recommended color palette

Default text

Default text color Body

Text used for navigation and links within an app

Navigation link color Tabs

Links within app

Links that open a browser

External link color Links outside of app

Glyphs/icons

Glyph/icon color Options icon

Border colors on input and button controls

Input and button control border color Controls, labels

Buttons

Background color and horizontal rules/separators

Horizontal rules/separators background color

Color themes for mail apps

Outlook, Outlook Web App, and OWA for Devices let users pick a color theme of their choice. If you use the theme colors (and appropriate CSS), you can make sure that your app matches the color palette for each theme. By using theme colors, your app will feel more integrated and visually consistent with the overall user experience of these host applications.

An example of a simple and effective color palette that uses a primary, secondary, and background color is shown below:

Primary blue
Navigation bar, hero elements, text links

Primary blue

Secondary blue
Accent color

Secondary blue

Light 1 Background theme color

Background theme color

For frequently used commands, use standard icons or glyphs to help users learn the meaning of the graphic through repeated use - such as a gear icon for settings or a question mark for help. For commands that are only used occasionally, use buttons or glyphs with text labels.

Showing a text button on the left and a settings gear icon on the right

Showing a text button on the left and a gear icon
Standard graphics

Usage

Graphic

Within or adjacent to a search box

Search icon large

Search icon small

Links to a settings page

Settings icon

Use where items in a tab menu are truncated

Truncated tabs icon

Indicates that there are options

Options icon

Loading graphic

Loading graphic

Dismisses a dialog or toast message

Dismiss dialog or toast icon

Back button when a simple text string is not sufficient

Back button icon

The app container contains a built-in border around app contents, so your app shouldn't contain an additional outside border. Use borders and lines sparingly within your app to separate content. In general, use borders only when they are absolutely necessary.

When possible, avoid adding backgrounds. Image backgrounds can add noise if they aren't part of the content a user needs to consume. To create structure, use solid backgrounds of light grays, but only when necessary.

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.