Bewerken

Delen via

Office Add-in design language

  • Artikel

The Office design language is a clean and simple visual system that ensures consistency across experiences. It contains a set of visual elements that define Office interfaces, including:

  • A standard typeface
  • A common color palette
  • A set of typographic sizes and weights
  • Icon guidelines
  • Shared icon assets
  • Animation definitions
  • Common components

Fluent UI is the official front-end framework for building with the Office design language. Using Fluent UI is optional, but it's the fastest way to ensure that your add-ins feel like a natural extension of Office. Take advantage of Fluent UI to design and build add-ins that complement Office.

Many Office Add-ins are associated with a preexisting brand. You can retain a strong brand and its visual or component language in your add-in. Look for opportunities to retain your own visual language while integrating with Office. Consider ways to swap out Office colors, typography, icons, or other stylistic elements with elements of your own brand. Consider ways to follow common add-in layouts or UX design patterns while inserting controls and components that are familiar to your customers.

Inserting a heavily branded HTML-based UI inside of Office can create dissonance for customers. Find a balance that fits seamlessly in Office but also clearly aligns with your service or parent brand. When an add-in doesn't fit with Office, it's often because stylistic elements conflict. For example, typography is too large and off grid, colors are contrasting or particularly loud, or animations are superfluous and behave differently than Office. The appearance and behavior of controls or components veer too far from Office standards.

Review guidelines for visual elements

Learn about each visual element that makes up an Office Add-in, including guidelines and recommended practices.

Design toolkits for download

To help you get started, we've created toolkits for use with either the Sketch application for Mac or the Adobe XD application for Windows or Mac. The following downloads include all of our available patterns, along with brief descriptions and layout recommendations.