Elevation
Our approach to interfaces at Leverage is rooted in clarity and minimalism. We embrace a clean, simple, and refined aesthetic, ensuring that every interaction remains intuitive and focused. By using a restrained application of elevations, we introduce a subtle yet powerful sense of depth and realism, which is essential in multi-layered environments—such as our sophisticated interactive trading chart.
Elevations serve a critical role in establishing visual hierarchy. In our design, the higher an element is positioned on the Z-scale, the more prominence and importance it conveys. This strategic use of depth enables traders to quickly discern the relative significance of various components, guiding their navigation through complex interfaces. Moreover, when combined with an optional overlay background, these elevations create a dynamic visual roadmap that directs users to the focal points most relevant to their current tasks.
In essence, our design philosophy at Leverage carefully balances minimalism with functionality. By integrating elevations sparingly, we maintain a clean interface while still providing the necessary cues that enhance user focus and overall navigational clarity—a vital consideration in the fast-paced world of FX trading.
Applying Elevation
Our elevation system is a key component in establishing visual hierarchy. It is organized into seven discrete levels based on a z-index scale, starting with no shadow at level-0 (z-index: 0) and progressing in increments of 100 up to level-7 (z-index: 700). The higher an element is positioned on this z-scale, the more prominence and perceived importance it holds within the interface. This approach helps guide the user’s focus by signaling which elements are primary and require immediate attention.
For overlay layers such as dialogs and pop-ups, we recommend using higher elevation levels (level-5 and above) in combination with a semi-transparent overlay background (#000000 50%). This technique serves to further emphasize the overlaying element by subtly dimming the underlying content, ensuring that users can quickly identify and concentrate on the most relevant information.
