01
Standardize the transaction grammar
The reusable layer focused on behavior: how assets are selected, how values are entered, how risk is explained, how a transaction is reviewed, and how success or failure is resolved.
Case02 / 05
Dev House Labs
One interaction grammar across five products
An L1 ecosystem needed a shared product foundation across trading, lending and borrowing, stablecoin minting, an AMM, and governance. The work had to move quickly without turning five different jobs into one generic interface.
5DeFi products
4 weeksSystem foundation
4 monthsFirst product versions
The problem
A multi-product ecosystem can accumulate inconsistency quickly: the same action changes labels, components drift, feedback behaves differently, and each new screen becomes a local decision.
I led the creation and implementation of a Figma system integrated with a Next.js product environment, then helped apply that foundation across the first versions of five applications.
Working idea
Consistency should reduce relearning, not erase product meaning.
How it fits together
A simple model of the system behind the interface.
- 01
Shared foundations
Type, color, spacing, surfaces, feedback, and responsive rules.
- 02
Shared behaviors
Connect, select, enter, review, sign, confirm, and recover.
- 03
Product semantics
Domain-specific language and risk stay visible.
- 04
Governance
Feedback loops keep design and implementation aligned.
Key decisions
The choices that shaped the work.
02
Preserve product-specific information
A lending position, swap, governance allocation, and leveraged trade do not deserve identical hierarchy. The system provided rules and primitives while allowing each product to foreground its own consequence.
03
Keep design and code in sync
The design system stayed connected to implementation and team feedback. Decisions remained visible so they could be challenged, improved, and reused instead of recreated.
The work
Original artifacts, cropped and sequenced to show the decisions behind them.
BEX / exchange. A focused transaction surface with onboarding guidance placed before the swap.
BEND / lending. Product-specific expression sits on top of shared navigation and transaction patterns.
Berps / perpetuals. Dense market information is organized around the action and its risk controls.
BGT Station / governance. The same ecosystem language supports a very different information model.
What this case shows
A system that did real work
The strongest outcome is not a single polished screen. It is the compression of repeated decisions: a four-week foundation that could support the first versions of five products over the next four months.
What the work delivered
Stated plainly, without padding the result.
- 01
Standardized interaction and interface patterns across five decentralized-finance products.
- 02
Balanced ecosystem consistency with the different language, hierarchy, and risk model of each product.
- 03
Established design and engineering feedback loops so the system could evolve transparently.