IconLogoMark
IconUiExpandCollapseDown

Release NotesIconUiExpandCollapseDown

ComponentsIconUiExpandCollapseDown

GuidelinesIconUiExpandCollapseDown

AccessibilityIconUiExpandCollapseDown
ColorsIconUiExpandCollapseDown
LayeringIconUiExpandCollapseDown
LayoutIconUiExpandCollapseDown

PatternsIconUiExpandCollapseDown

WordsIconUiExpandCollapseDown

ResourcesIconUiExpandCollapseDown

Elevation

/

Design

Assign treatments according to a layer's place in the stack order.

Every layer has a predetermined elevation on a scale of 0-3, with assigned style treatments like shadows.

Stack Order

Common interface elements are layered, with each level indicating importance and priority to the user. This stack order is consistent across Hudl interfaces.

Tangents

A tangent is a piece of content (tooltip, dropdown, popover) that does not have a set elevation, but needs to sit above other content in its current elevation. An example of this is a tooltip within a modal (layer 3).

Scrim

A scrim is a transparent overlay placed just beneath a layered element. Its purpose is to dim and obfuscate content underneath the layered element. This focuses the user’s attention on the layered element in question. Scrims are required for layer 3 (modals), but optional for layer 2 elements like prompts, toasts and action bars.

Levels vs. Layering

It’s important to distinguish theming environment levels from the concept of layering. Levels affect the background and/or border color of a given element, whereas layering physically places one element on top of another, like z-indexing.

Levels create separation between regions on the same plane, while layering creates a new dimension altogether. For instance, you might paint your living room and upstairs bedroom the same color, but color is where the connection ends. Otherwise they’re totally separate, physically and in purpose.

The dimension of layers is visually accentuated with the shadows applied to each.

Mobile

Layering elevation still applies to design on mobile but is approached differently. For example, modals used in iOS make use of modal view, which applies elevation and shadow to the entire view. Whereas Android depicts the layer with a scrim. Be cognizant of each platform when designing elevation.

Usage

Stack Order

The stack order ensures similar interface elements like toasts, modals and action bars have a consistent elevation across all Hudl product interfaces.

Don't put elements on the wrong layer.

Don'tput elements on the wrong layer.

Do follow the correct stacking order.

Dofollow the correct stacking order.

Don't use shadows to “elevate” levels.

Don'tuse shadows to “elevate” levels.

Do apply shadows to layered elements.

Doapply shadows to layered elements.

Platform

platformnotes
Web
  • Stick to the guidelines above.
Apple
Android