Layering

Layers place interface content “over” other content. While this simultaneously obstructs other content, it increases the available area for additional content without leaving the current context. If we apply shadows at different levels, we can simulate a three-dimensional stack of layers.

It’s a useful metaphor. Depending on an element’s ordered position in the stack, it needs different treatment.


Stack Order

Every layer has a predetermined Elevation on a scale of 0-3. Here’s how different parts layer together in the stack order.

Layering Stack Order

The higher something sits within the stack order, the higher the required elevation.

To implement the appropriate elevation in code, refer to our z-index rules.

Shadows

Most elements within Hudl have the same elevation with no shadow (0). This allows the application of Shadows 1-3 to clarify and enhance the layering effect throughout the UI.

Note that the values assigned to each shadow directly correspond to the Elevation scale.

Layering Shadows

Notice in the stack order above that Modals, are “placed” above everything else. Because the modal is a blocking task requiring a totally new window, it gets Elevation Shadow 3.

Simple alerts like toasts provide important feedback separate from the main interface but not completely unrelated, requiring a Shadow 2.

Other components like the Webnav and dropdowns are directly related to the main interface and should not appear “removed” by the use of heavier shadows.

Only use shadows to achieve the layering effect—don’t use shadows as dividers.


Scrim

A scrim is the transparent overlay placed just below a layered element to dim and obfuscate the primary content.

Layering Scrim


Levels vs. Layering

It’s important to distinguish environment levels from the concept of layering. Layering does not affect levels within an element.

Use environment levels to differentiate items on the same plane. Layers are reserved for “physically” placing one element on top of another.

Levels can and should be used on elevated elements—starting at Level 0 the same way you would with any non-layered element.

For a sanity check, think of levels as a way to separate regions. Layering introduces a new dimension altogether.


Additional Guidelines

Tangents do not have a set elevation. Instead, their elevation should match the element they’re interacting with.

Layering Tangent Example