Introduction
Magma is a DeFi protocol that lets users mint a fully collateralized stablecoin, backed by liquid staking tokens and real-world assets.
Goal
First, make the platform feel professional and trustworthy without overwhelming the user with technical complexity. Second, design a brand and experience that could attract capital, resonate with DeFi-native users, and position ioUSD as the go-to stablecoin on IoTeX.
Challenges
The team was launching a brand-new DeFi protocol with no brand awareness, no interface, and no documentation—just a smart contract and a vision.
Built on IoTeX, a niche chain focused on DePin (Decentralized Physical Infrastructure Network), Magma had to stand out with limited resources and zero inherited credibility.
Although it borrowed core ideas from Liquity’s economic model, its multi-collateral system required us to rethink key parts of the user interface from scratch.
Brand Design
A Visual Identity to Build Trust in DeFi. Forged in Magma.
Visual Identity development
We started with the usual three logo concepts to explore different directions for the brand’s look and feel. Having already collaborated with the team, there was a shared understanding of their preferences—so the process moved quickly.
All proposals combined the letter M with a reference to magma, using visual cues inspired by volcanic energy and finance.
The final look
The team immediately aligned on Concept C, which required no major revisions. We simply refined the logotype to integrate a price action “uptick” motif—merging the M with an upward arrow that subtly hints at movement, growth, and financial momentum.
Once the main Magma logo and token identity were approved, it was time to design the mark for the protocol’s dream child: the stablecoin. Originally named ioUSD—a nod to the IoTeX chain—the logo drew inspiration from the USD symbol, subtly integrating the letters i and o into the design.
Shortly before launch, the name was changed to WEN—referencing ancient Chinese coins, both in name and form. The final logo was inspired by their distinctive square-holed shape, subtly evoking a sense of heritage and value rooted in monetary history.
Stablecoin Logo Design
App Design
Simple Patterns, Real Impact: Designing the Magma dApp UI
Introduction
The main goal was to create an interface that felt professional and trustworthy, without overwhelming users with technical complexity. Working within a tight budget and limited resources, we focused on delivering a clean, consistent experience—polished enough to inspire confidence, without relying on fancy animations or custom patterns.
Instead, we built on familiar UI conventions and used every design decision to push clarity further. From reused icons to color-coded risk indicators, we introduced subtle details—like green arrows when risk drops, red ones when it rises, or a warning banner when liquidation gets close—that collectively improve usability.
The result is an app that looks sharp, behaves predictably, and respects both the user’s attention and the developer’s time.
The process
Instead of designing static wireframes and then restarting from scratch for the UI, I work incrementally: the same building blocks used for rough structure are refined over time into fully styled components.
This approach makes the process faster and more adaptive—feedback comes earlier, async collaboration becomes easier, and the final UI emerges organically from real, working parts.
Color system
The color system is structured around a shared naming convention—base tokens like neutral-100 or brand-200 retain the same name across light and dark modes, while adapting their values to ensure contrast and readability. Semantic tokens (e.g. button-primary-fill, text-muted) are mapped as aliases of these base colors, making theming and implementation easier for developers.
The palette follows WCAG 2.1 accessibility standards and already aligns with draft guidelines for the upcoming WCAG 3. In the light theme, the brand orange required a subtle tonal adjustment: keeping the same hue would have either compromised legibility or resulted in a dull brown.
The final version strikes a balance between visual clarity, aesthetic coherence, and accessibility.
Semantic color tokens applied consistently across light and dark modes, enabling scalable theming and easier maintenance across the UI.
From blank frames to final UI: a progressive design process where components evolve step by step—content first, visuals later.
Spot illustrations were adapted from open-source assets, customized to match the Magma palette in both light and dark mode.
Each interface element was carefully designed across all its states and variants, to handle every scenario the user might encounter.
The design file is structured into clear macro sections, each containing all related screens. User flows are arranged sequentially, making it easy for both developers and stakeholders to navigate the file.
All screens were designed mobile-up, using a card-based layout system that scales naturally to desktop. This approach ensured responsiveness while also simplifying development, since the same grid logic applies across breakpoints.
As part of the project, we created a series of flowcharts to visually explain protocol mechanics. These diagrams were also added to the live documentation to support onboarding and technical understanding.
Components were clearly documented with usage logic and visual cues, helping reduce ambiguity and avoid misalignment between design and development.
Landing Page
With the core team focused on development, we opted for a simple and efficient landing page—barebones in structure but effective in purpose.
The goal was to help DeFi users and potential investors quickly understand what Magma is, why it exists, and how to launch the app.
It was also designed to be fast to build, with four essential sections: an intro, use cases, benefits, and roadmap.
Pitch Deck
With all design assets already in place, we quickly put together a 12-page pitch deck for investors.
On that occasion, we also created a series of flowcharts to help explain key protocol mechanics—later reused in the project’s live documentation.
