Color

Our base color palette contains a spectrum of 12, vibrant hues to reflect the wide variety and versatility of 3M. Each base hue includes 9 additional value swatches to help us in meeting the WCAG AA success criterion for minimum contrast.

Meaning

The base color palette reflects the wide variety and versatility of 3M. The palette below reflects the 3M brand in a more digitally accessible format.

Color Usage

Selection of an interface color theme is outlined by the 3M brand guidelines. The primary color palette is to be composed of one of the eighteen analogous color sets shown here in conjunction with the grayscale color pallette. This should compose the dominant color theme of the UI with the exception of using additional colors sparingly when needed to add visual clarity.

Shades of Gray

These shades of gray can be used in conjunction with the chosen color theme. A wide array of values offers flexibility in regards to meeting appropriate color contrast ratios and working with our 12-base color palette. Use up to six in any single application.

Color

This color palette was created to align with the 3M Trifecta Visual Guideline. Some colors have been modified for contrast on screen. Tints and shades are only to be used for interface element states like buttons and other controls.

Elevation

Though a screen only has two dimensions the technique of adding depth and elevation allows the designer to mimic real life hierarchy of importance based on proximity. Bringing elements front and center and a larger depth drives focus and creates a dominant element. The elevation structure below is based off the same multiples of 8 grid outlined in visual rhythm.

Iconography

The below icons are propietary derivations made from our Streamline set specifically to address both accessibility and consistency in the context of our components. Our most commonly used icons that can exist in an interface without supporting text will be added to this library and must be pulled from this library. For any other icons, use the purchased Streamline icons or use them as a basis to create 3M proprietary icons that have at least a 2px line weight.

Imagery

When using photography we can choose between four different ways to tell our story. The examples on the right show how different perspectives are used to highlight specific aspects of differing stories. We can talk specifically about how and where people interact with our products, in which industries they are used or what impact they have in the world. The 3M collection of photography is a showcase of our best examples across all the styles.

People

• People in context
• Portrait

Place

• External locations
• Internal locations

Product

• Product in context
• Product on white

Epic

Typography

Our new typeface is 3M Circular by Lineto. We will own our own customized version of Circular to use anywhere the 3M Brand is being expressed. 3M Circular is modern, more distinctive, easier to recognize and read.

We use 3M Circular Bold, Book and Light for all our communications. True italics are also available for each weight. Optimized around ultimate utility, we no longer rely on default fonts for our brand communications.

Fonts for web and screen

For web and other screen applications, it may be necessary to use a system font. We recommend the default system sans font, Arial, Helvetica or San Francisco.

Fonts for nonlatin languages

It may be necessary to use a default system sans font or Google font. We recommend Noto Sans for its multiple language support.

Visual Rhythm

Our element spacing is based on a multiples of 8 grid system. This system provides a flexible framework for arranging elements in a logical and predictable rhythm.

Usage

helps to simplify the translation of design layout in development.

Spacing Sizes

Margin and padding

Use increments of eight to define width, height, margins and padding.

Voice

Our voice is our style of writing and speaking. It’s how our customers come to know us and our personality. Our voice is personable, accessible, clear, and concise.

4 style tips to write on-brand within digital products

• Get to the point – quickly and clearly with simple, concise writing.
• Focus on what matters most to your audience. Use language that resonates with them.
• Aim to engage, delight and surprise your audience with clever writing and unexpected insights.
• Use everyday language to create a conversational feel. Avoid technical jargon unless it is language used by your audience.

Examples

These real-life examples bring a touch of humanity into otherwise mundane messages. Use opportunities like these to give users a glimpse of our personality.

Contact

Password reset email

Terms