Typus Finance
Typus is a real yield derivatives protocol on Sui. As the sole product designer I owned eight product surfaces, their on-chain transaction states, a token-based design system, and a full rebrand. This case follows the product decisions that made capital risk visible, then the system that carried the new brand.
Executive Read
During this period, protocol TVL rose from $17.1M to a peak of $25.6M and cumulative options notional passed $500M. These are protocol signals, not direct design attribution.
Problem and Mandate
A perpetual futures trade moves through direction, leverage, margin mode, confirmation, funding, and settlement. Every step carries financial consequence, and on chain there is no support desk to reverse a mistake. The interface is the only place where risk can be made visible before it is taken.
Typus compounds the problem with breadth: options auctions, structured vaults, a liquidity pool, and perps share one surface, one wallet, and one design language. A pattern that fails in one product fails everywhere.
Financial values had to stay precise enough for professional traders while remaining readable for first-time DeFi users. On-chain mechanics such as oracle pricing and the T+1 profit lock had to be explained in the moment, not in documentation.
I owned information architecture, user flows, high-fidelity UI, interaction states, responsive behaviour from 1440 to 390, and the design system. Specs included defaults, validation errors, empty states, loading, and compliance review.
Act 1 · Shipped Scope
Eight surfaces across trading, liquidity, vaults, account management, and games. Each one answers a different question, so the layout changes from screen to screen while the type scale, spacing, and control patterns stay fixed.
One pool raises four questions at once: what it is worth, what it earns, where the yield comes from, and what sits inside it. Mint controls stay pinned beside the data instead of behind a step.
Act 2 · Deep Dive on Perps
Perpetual futures are the hardest product on the platform: leverage, margin modes, funding rates, and liquidation interact on every order. The design goal was to keep each decision separated, computed, and checked before the transaction is built.
After the trader enters an amount, the UI keeps the previous entry price, liquidation price, leverage, and position size beside their recalculated values. The new open fee appears in the same pre-submit view.
The product separates pending profit, unlocked claims, compliance holds, and the final account history. A trader can always see where the money is and what happens next.
Act 3 · Rebrand and Design System v3
In parallel with shipped work I led the v2 rebrand: a new identity in deep navy and electric indigo with a water ripple motif, a restructured information architecture, and Design System v3, the token architecture that makes the new brand enforceable across products. v2 is designed and systemized, pending release.
Before: products followed the order the team shipped them.
Decision: regroup the entry around Earn for lite users and Trading for sophisticated users.
Effect: both audiences reach relevant depth within one scroll.
Before: price chart, mint panel, and allocation table competed at once.
Decision: isolate the pool detail and explain yield source, boosted APR, and dynamic composition.
Effect: a first-time liquidity provider can evaluate the pool before committing capital.
Before: six tables followed the product roadmap rather than the user’s mental model.
Decision: regroup positions under Trade and Earn.
Effect: portfolio value is understood by intent, not by Typus’s internal product architecture.
DS3 defines 176 variables across six collections. Primitives hold raw values. Semantic tokens alias primitives for surfaces, text, and components, and every semantic token resolves separately for Light and Dark mode. Typography works like functions: a text style assembles its family, size, weight, and line height from named sub variables, so a scale change propagates through the whole system.
UI/H3 = Font( family: font/ui/Inter → Inter size: ui/h3/fontSize → 24 weight: ui/h3/fontWeight → 500 lineHeight: ui/h3/lineHeight → 32 )
One component tree resolves through the same semantic roles in both modes.
Outcome and Reflection
During this period, protocol TVL rose from $17.1M to a peak of $25.6M and cumulative options notional passed $500M. These are protocol signals, not direct design attribution. My shipped contribution was the risk-visible trading flow, eight product surfaces, and the DS3 foundation. The v2 rebrand and Design System v3 are complete and pending release.
In DeFi the interface is the risk disclosure. Visual polish means little if a trader cannot see their liquidation price before committing, so the most valuable screens in this case are the unglamorous ones: fee breakdowns, validation errors, and a compliance state nobody requested. Next time I would ship the rebrand incrementally instead of holding it for one release, and instrument the flows earlier so design decisions could be argued with funnel data instead of taste.
Next Case Study
How a high-volume conversion product was made quicker to understand and safer to complete.