Elevations

Elevations give the interface a sense of three-dimensionality and depth. They establish clear hierarchies and help the user find their way around.

For both themes, elevations create a visual appearance that is rich in contrast. Both the dark and light themes are characterized by a reduced colour palette.

Level 1 .u-elevation-1

Subtle separation. Used for small components like inputs on hover or secondary cards.

Level 2 .u-elevation-2

Focused attention. Used for active navigation elements, dropdowns, and main feature cards.

Level 3 .u-elevation-3

Maximum depth. Reserved for primary modals, floating panels, and key interaction triggers.

Theme Adaptation

Light Theme

In the light theme, elevations use soft shadows to create depth against white and light gray surfaces.

Example Shadow Depth

Dark Theme

In the dark theme, elevations are primarily defined by high-contrast hairlines and slight surface variations to maintain a premium monolithic look.

Example Border/Surface Depth

Usage

<div class="card u-elevation-2">
  <!-- Elevated content -->
</div>

<button class="btn u-elevation-1">
  Interactive Trigger
</button>