Online Style Guide

What's Inside

A Single, Centralized Source of Truth

The Online Style Guide is a centralized compilation of the most current global guidelines and documentation for Emerson.com and other approved websites.

A Shared Understanding

The Online Style Guide integrates with Zeplin, a collaboration tool for design-to-development handoffs. Zeplin allows designers to generate and share red-lined designs, interaction annotations, code snippets and other style specifications that help to streamline implementation.

Your Design Toolbox

Visual Styles

Visual styles create the branded look and feel of Emerson.com and other approved sites. Here you'll find documentation and guidelines on using color, typography, imagery and more.

Base Elements

Base elements such as buttons, breadcrumbs, and dropdowns are individual objects that, when grouped together in different combinations, create components on Emerson.com and other approved sites.

Components

Components are the pre-built, reusable building blocks used to create and arrange all of the content on Emerson.com and other approved sites.

Layouts

Page layouts are pre-designed arrangements of components that provide cohesive and consistent structures for page content with specific roles and directives.

Who the Guide Benefits

Brand Managers

Get quick and easy access to all brand and style related designs. Share standards with internal and external resources. Leverage the guide to ensure consistency in execution and intent in authoring brand-related content.

Content Authors

Use as an online source of truth for identifying elements, components and layouts in order to build new pages.

Designers

Reference the Emerson.com design system to understand design constraints and opportunities when creating new online digital experiences.

Developers

Ensure accuracy and efficiency in hand-offs between design and development. Reduce the amount of back and forth between parties.

Share Your Feedback