Elevation

Add depth and hierarchy to the interface, simulating shadows and layers that create a sense of structure. These tokens help distinguish elements, drawing attention to key components and enhancing the overall user experience.

Low Elevation Token

Offers a subtle shadow, perfect for small cards, buttons, or elements where a gentle lift is needed. This level of elevation creates a sense of layering without overwhelming the design, adding a soft, approachable feel.

Medium Elevation Token

Provides a moderate shadow, ideal for components like modals, floating action buttons, or popovers. This elevation gives a noticeable lift, helping elements stand out without distracting from surrounding content.

High Elevation Token

Creates a bold shadow effect, making elements like sidebars, drawers, or overlays feel prominent and layered above other content. This level of elevation is useful for interactive elements that need to capture immediate attention.

Surface Elevation Token

Applied to large backgrounds or primary content containers, giving the layout a subtle lift from the base. This token adds light depth to the entire interface, enhancing readability and providing a structured, organized look.

Hover Elevation Token

Adds a slight lift when users interact with an element, such as a button or card. This elevation creates a responsive, tactile feel, reinforcing the actionability of the component and improving user engagement.

Focus Elevation Token

Designed for accessibility, giving a slight lift and shadow to focused elements. This added depth ensures that keyboard users can easily identify their current selection, improving navigation and usability.