Depth

Using Depth for Hierarchy

Depth is used to convey hierarchy by applying a concrete physical metaphor to the content. This is accomplished by adding box-shadows to the emphasized components on the page.

The "higher" the element is raised above the base page, the larger the box-shadow should appear.

‍

Depth is Built-In

When building pages using UIKit & AlationKit, shadows and the indication of depth are already built into the components. There's no need to add anything! If the built-in style on that component does not match your use case, then you should request a component improvement and then work with design to make it happen.

Visual Consistency

Today, Fabric does not have a unified prescriptive visual depth model across components. When modifying or creating new components, seek to ensure visual consistency with existing components.

For inspiration in consistent application of depth see the Material Design guidelines.

‍

Background Shading

To increase visual emphasis and reduce distractions when displaying Modals, background shaders are added beneath the modal but above all other page content.

The standard background shading used with modals is 50% opacity black. This can be lightened in scenarios where it is beneficial to retain some visibility of the content that the shader is covering.

‍

‍

‍

Z-Index Management

Many Fabric components have a built-in z-index that should work for all or most uses of that component.

Neither Fabric nor Alation has a dedicated z-index manager today. For instances where manual z-index selection is required, avoid absurdly large numbers like "10000000000."