Primary Colors
These are the cornerstone of our design, assigned with specific roles and clear usage guidelines to maintain consistency and reinforce our brand identity.
Colors
In the world of trading, clarity and precision are key—and our color choices reflect just that. Each color has been thoughtfully selected to guide users through the app, highlighting important actions and information with consistency. From bullish blues to bearish rosés, our color system ensures a seamless and accessible user experience, all while maintaining a professional and modern look.
At Leverage, our color system forms the foundation of a cohesive and accessible user experience. We structure our colors into two main categories: primary and secondary.
Secondary Colors
These serve as complementary options, offering additional hues when needed to represent other elements or provide visual accents without compromising our core palette. We usually use this colors as a way to visualize other complementary elements that do not represent our primary colors in terms of sentiment or direction.
Color Themes
We further enhance our design flexibility with two distinct color themes: light and dark. Leveraging Figma's variable modes allows us to seamlessly switch themes with a single change, ensuring that the entire interface updates uniformly and efficiently. Every color in our system has been carefully mapped to work harmoniously with the rest, and each has been rigorously tested for color contrast to meet the highest accessibility standards.
This thoughtful approach ensures that our color system not only supports a unified visual identity but also enhances usability, making it easier for users to navigate and interact with our platform.
Color Roles
At Leverage, every color in our system is assigned a specific function to enhance clarity and usability across our platform. Our color system is methodically divided into four primary functions plus one set of secondary functions:
Text Colors
Background Colors
Icon Colors
Border Colors
In addition to these, we employ secondary colors as complementary options to add visual accents where needed.
Within each color function, we further delineate roles that include:
Neutral: For standard, balanced elements.
Brand: Reinforcing our core identity.
Positive, Warn, and Negative Sentiment: To convey feedback and alerts.
Trading Colors: Specifically designed to indicate Buy/Profit and Sell/Loss situations.
This structured approach ensures that every color choice is purposeful, contributing to a cohesive visual language where form meets function. By mapping colors to clear roles, we provide intuitive visual cues that support user interactions, streamline navigation, and maintain consistency throughout the MIFX platform.
