Leverage: Foundations
The foundation of our design system is like the fundamentals of a solid trading strategy, each element plays a vital role in achieving seamless execution. It brings together Colors, Typography, Iconography, Spacing & Radius, Border Width, and Shadows & Effects. Just as every trade requires balance and precision, these elements work together to create a cohesive and intuitive experience. Colors signal meaning, typography ensures clarity, icons provide quick recognition, while spacing, borders, and shadows maintain structure and flow. This foundation ensures the design stays consistent, scalable, and ready for whatever market conditions (or new features) come our way.
PART OF A SERIES
Part 2 of 4
Where this starts
When I describe Leverage's foundations, I mean the token layer: spacing, color, typography, radius, borders, iconography. The unglamorous, unphotographable, structurally critical work that sits underneath every component and every screen.
This document walks through how each of those got built. Color first, because it was the most complex: dark mode was a new requirement for this revamp, it required the most iterations, and it's where the most stakeholder pressure lived. Then spacing, typography, radius, borders, and iconography to close out the layer.
Color
Color was the part where the system meets the brand, and where the most consequential decisions live.
It was also where the scope grew beyond the original brief. The previous MIFX platforms mainly supported light mode, with an option to go to dark mode only on the chart UI. For this revamp, dark mode became a hard requirement.
The reasoning was grounded in trading hours. FX markets run 24 hours a day, five days a week, but the sessions aren't equally active. The US session is one of the highest-volume windows globally. From Indonesia, that session runs from late evening into the early hours of the morning. Traders working through it are on their phones in dark rooms. A fully white interface at 1am is a usability problem, and a product credibility one: a platform that positions itself around serious trading should look considered at the moments when serious trading actually happens.
Dark mode wasn't a cosmetic addition. It was a product decision tied to when MIFX's most active users actually trade. And it meant every color decision in the system had to work in two modes simultaneously, from day one.
That constraint immediately surfaced a problem with the existing palette. The neutrals from the previous design system were too blue-tinted to serve as a dark mode foundation. Blue-cast neutrals read cold and clinical in dark contexts, and more practically, they created tint conflicts with the blue already doing the buy-direction job. So almost everything started over. The only colors carried forward from the previous system were the brand colors: brand green and brand accent. Every other color family was rebuilt.
The green saga
Brand green was the longest single thread in the color work. The process behind it explains how the rest of the palette ended up the way it did.
The starting constraint was non-negotiable. MIFX's brand green exists at the company level, applies to MIFX and to Valutrades (the global counterpart), and isn't something a design system rebuild gets to vote on. You can refine. You can't replace. The exact color hex I have to work from is #00A562, right from the brand guidelines.
The problem surfaced as soon as I started testing. The brand green (#00A562) doesn't actually meet contrast standards against white in light mode either. Against dark surfaces it technically passes, but the result looks dull and flat, not the kind of color that makes a CTA feel worth tapping. So the brand green wasn't a color that worked in one mode and broke in the other. It was a color that didn't fully work in either, and the brief was still to make it work in both.
My first instinct was the obvious one: pick a lighter, more saturated variant of the green specifically for dark mode. I tried a range.
When I brought proposals to leadership, I didn't present color swatches. Because the revamp UI was being designed in parallel, I could show each candidate green applied inside actual product screens: real MIFX home screens in dark mode, with the green running consistently across buttons, icons, and navigation. I also handed them a working prototype of each option, so they could evaluate how it felt in their hands rather than as a flat slide. The goal was to give them the clearest possible picture of what a decision meant before they made it.
They were rejected anyway. Some of the rejections were legitimate ("doesn't feel like us" is a real concern from people who own the brand and trust their gut on it). Some of them were more subjective. One was, more or less, feng shui.
So lighter-variant-for-dark-mode was off the table. I needed a different path.
I went looking at how other green-brand products handle the same problem. WhatsApp was the obvious reference. They're aggressively green, they support both light and dark mode at massive scale, and they've clearly been through the same accessibility math I was facing. I studied not their specific colors but the relationship between their light-mode green and their dark-mode green. There's a perceptual shift between the two, a pattern in how lightness and chroma move, and I took that shift as a method I could apply to MIFX's own green.
WhatsApp's implementation of their green.
A two-ramp approach was reasonable enough to consider seriously. A brand-light ramp scoped to light mode, a brand-dark ramp scoped to dark mode, each tuned independently. It would have solved the accessibility issue without forcing me to tune a single ramp through OKLCH space. But it would have doubled the maintenance surface and made brand green an architectural exception, since every other color in the palette is one ramp serving both modes through functional token resolution.
The compositional test sealed it: a status chip uses multiple steps from the same ramp at once (a light background with a darker foreground in light mode, polarity flipped in dark mode). For the component to read as one green status chip rather than two greens awkwardly stacked, the steps it composes have to feel like members of the same family. Two ramps would have had to maintain perceptual continuity anyway, which is essentially the same tuning problem with extra steps. One ramp was the more durable answer.
The technical work to make one ramp meet all the constraints was the longest part of the process. I used OKLCH as the color space because OKLCH is perceptually uniform: a step from lightness 30 to lightness 40 looks the same size of change regardless of hue, which is the property you need when you're trying to build 13 evenly-stepped families that look like they belong together. For most colors in the palette (red, orange, blue, the secondary colors) a fairly standard OKLCH ramp worked out of the box.
Brand green needed a custom path. The lightest steps had to stay perceptually MIFX-green rather than drifting toward pale mint. The darkest steps had to stay perceptually MIFX-green rather than drifting toward generic forest green. The mid-light and mid-dark steps had to relate to each other by something close to the WhatsApp shift I'd studied. And every adjacent pair had to maintain enough contrast for the compositional patterns components would use.
I tuned this by eye, iteratively, using colordesigner.io to generate and explore candidate ramps and oklch.com to verify perceptual uniformity and contrast at each step. There was no clean formula. OKLCH was the framework that made the problem tractable; the actual answer came from a lot of looking, comparing, and adjusting until everything held together.
Brand green palette end result.
The result is one brand green ramp, thirteen steps, that meets contrast in both modes, composes cleanly across every compound component, and still reads as MIFX green from any single step. It took weeks. Most of it would be invisible to anyone using the system. That's the nature of foundation work. You can tell whether someone has done it well by whether the rest of the system feels natural.
Brand accent: the color that earns its meaning by being rare
The other inherited brand color was the accent: a yellow that sits alongside brand green in MIFX's identity. Where brand green is the everyday workhorse, used in CTAs, success states, and primary brand expression across the platform, the accent is reserved for specific moments.
Two of them, in the whole system:
The Live account badge
MIFX users can hold both Demo accounts (practice, no real money) and Live accounts (real capital). The visual distinction between the two is critical and has to be unambiguous every time a user sees their account.
Demo badges use brand-green, which makes them feel like a familiar, safe part of the platform. Live badges use brand-accent, which sets them visually apart from everything else. Every time the user sees the yellow, they're being reminded they're in the real-money context. The scarcity of yellow elsewhere in the system is what makes that signal land.
Rewards elements
Rewards in MIFX are the celebratory parts of the product: bonuses earned, milestones reached, promotional moments. The accent's yellow has the right cultural register for this: it gestures toward gold and value without tipping into anything garish. When a user lands on a rewards screen, there's a subtle rewards element that immediately communicates "this is a different kind of moment."
The interesting thing about these two uses is that I didn't sit down at the start of the system and decide accent would be restricted to them. The restriction emerged. Across the whole rebuild, yellow simply never felt right anywhere else. It wasn't appropriate for general UI accents. It read too cheerful for sentiment work, where orange was already doing the warning job. It didn't belong on chart elements or data displays. So it stayed where it belonged, in the two places that earned it. Constraints that emerge from use are more durable than constraints that are imposed by policy, because nobody has to remember them.
Accessibility for brand accent was easier than for brand green. Yellow occupies the high-lightness region of OKLCH space even at full saturation, which means it stays readable against dark backgrounds without needing the kind of custom ramp work green required. The accent palette generated cleanly from a standard OKLCH ramp and met contrast in both modes without significant intervention. The hard color work in the system was green; everything downstream benefited from green being solved first.
Sentiments vs Directions
Before any individual sentiment color got decided, one architectural question had to be answered: how should the system treat sentiment (good, bad, attention-worthy) versus direction (buy, sell)?
Most trading platforms collapse them. Green = success = buy. Red = danger = sell. The problem is that these are not the same things, and treating them as the same thing creates category errors that compound. A successful logout is not a buy. A failed deposit is not a sell. If a "success" toast looks the same as a "buy executed" indicator, the visual language is lying about what's happening.
So I split them.
Success / Danger / Warning are sentiment colors. They tell the user whether an action or state is good, bad, or worth caution. Used in toasts, validation, system messages, errors.
Buy / Sell are direction colors. They tell the user which way a trade is going. Used in order flows, position displays, P&L indicators, market data.
This split lets each family do its job without semantic interference. It also shaped every individual color decision that followed: which colors could be reused, which had to be unique, and which combinations the architecture had to keep apart.
Sentiment colors
After the two brand colors were settled, the next decisions were sentiment: the colors that tell users whether something is good, bad, or worth their attention. Most of these were straightforward, with two genuine puzzles.
Success uses brand green directly. No new color. A positive outcome and the brand are aligned, which is convenient for a green-branded product. This lets brand green carry double duty (identity and positive sentiment) without anything competing for the role.
Danger is red. The conventional answer, and the correct one. Red is the universal sentiment for errors, destructive actions, failures. There was no reason to invent something else, and the cost of being non-standard here would have outweighed any benefit.
Buy direction is blue. Inherited from the previous color system. Blue had already been doing the buy-direction job at MIFX and there was no good reason to change it. The decision worth making was elsewhere.
MIFX users can hold both Demo accounts (practice, no real money) and Live accounts (real capital). The visual distinction between the two is critical and has to be unambiguous every time a user sees their account.
Demo badges use brand-green, which makes them feel like a familiar, safe part of the platform. Live badges use brand-accent, which sets them visually apart from everything else. Every time the user sees the yellow, they're being reminded they're in the real-money context. The scarcity of yellow elsewhere in the system is what makes that signal land.
Rewards elements
Rewards in MIFX are the celebratory parts of the product: bonuses earned, milestones reached, promotional moments. The accent's yellow has the right cultural register for this: it gestures toward gold and value without tipping into anything garish. When a user lands on a rewards screen, there's a subtle rewards element that immediately communicates "this is a different kind of moment."
The interesting thing about these two uses is that I didn't sit down at the start of the system and decide accent would be restricted to them. The restriction emerged. Across the whole rebuild, yellow simply never felt right anywhere else. It wasn't appropriate for general UI accents. It read too cheerful for sentiment work, where orange was already doing the warning job. It didn't belong on chart elements or data displays. So it stayed where it belonged, in the two places that earned it. Constraints that emerge from use are more durable than constraints that are imposed by policy, because nobody has to remember them.
Accessibility for brand accent was easier than for brand green. Yellow occupies the high-lightness region of OKLCH space even at full saturation, which means it stays readable against dark backgrounds without needing the kind of custom ramp work green required. The accent palette generated cleanly from a standard OKLCH ramp and met contrast in both modes without significant intervention. The hard color work in the system was green; everything downstream benefited from green being solved first.