Principles

Seams are created when two sheets of paper share the full length of a common side. Two sheets of paper joined by a seam will generally move together.

Steps are created when two sheets of paper with different z-order positions overlap and thus typically move independently of each other.

Toolbars frequently form a step above another sheet of paper that displays the content the toolbar’s actions relate to. As that paper scrolls beneath the toolbar, the toolbar clips that paper at the point of entry, preventing it from passing through to the opposite side.

A toolbar can also be initially presented as seamed with a second paper, but then lift to form a step. This variant of clipping is called waterfall.

Alternately, the toolbar can maintain its seam, pushing off the screen as the two papers move together.

Finally, the second paper can cover the toolbar as it moves.

Toolbars have a standard height, but can be taller. When taller, the actions can pin to either the top or the bottom of the toolbar.

Toolbars can change height dynamically once they become pinned. When resizing, they snap (thresholding with hysterisis) between their maximum and minimum (standard) heights.

A floating action is a circular paper separate from a toolbar.

A floating action represents a single promoted action for its context. A floating action can straddle a step if it relates to the content of the paper creating that step.

A floating action can straddle a seam if it relates to the content of both of the papers creating that seam.

Never introduce a decorative seam merely to provide an anchoring point for an action.

When building layouts across devices, we combine fixed, sticky, and fluid strategies for grid behavior.

Here are a few simple guidelines to follow:

1. Respect Human Constants.
2. Larger Screen ≠  Larger cognitive capacity.
3. Line lengths should be digestible.
4. Account for angular distance.
5. Pull the furniture off the walls: allow whitespace, and don't restrict yourself to anchored toolbars.

Use strategies at multiple levels of hierarchy, like at screen level and card level.

The Desktop Template demonstrates a few responsive screens with all of the grid rules applied.

Desktop Template

99 MB (.ai)

At a high level, each app can be considered to live in a distinct space or container.

This means that pieces of paper in one app do not interleave in z-space with paper in another app.

It also means that actions and items are isolated to an app: for example, swiping to dismiss a list item in one app will not cause that list item to traverse the space of another unrelated app.

Containers allow multiple apps to be in view simultaneously, for example, in multiple browser tabs.

Within a specific app, most elements are relatively positioned according to major and minor steps along the Z-axis. For example, a button’s focus state is a minor step, while its pressed state is a major step.

Other elements have a fixed priority within the app’s z-space, meaning they always appear above or below other elements, regardless of those items’ relative position along the z-axis. For example, the floating action button always appears above content and toolbars, regardless of how many sheets of paper may be in use by the app.

System elements, such as the status bar and system dialogs, exist in a separate system space above and below all app containers.

Depending on context, system elements may not be present in an app (for example, in Lights Out mode), but the system space establishes the relative priority of system elements when they do exist. This ensures, for example, that a system dialog box always appears above the current app.

Depth is not ornament.

Think in terms of element priority within z-space, not absolute position.

Depth within an app should communicate hierarchy and importance, and help focus users’ attention to the task at hand.

Shadows consist of two layers: a top shadow for depth and a bottom shadow for definition.