Cat Invaders
Arcade shooterA feline fleet descends. Hold the line.
Arrows · Space · P · Touch
Play now
Back to AI & Tools
SYSTEM 02 · Figma design system · Free on Figma Community
NeonFi Design System
A Figma design system for Web3 finance products: token cards, swap and transaction flows, wallet connect and dashboards, dark first with a maintained light mode.
FreeFor teams building DeFi and Web3 finance products.
- Type
- Figma design system
- Made by
- Designed and built by Basma Gh
- Price
- Free on Figma Community
The problem
DeFi interfaces carry real weight: moving prices, gas, slippage, wallet and network states. A confusing confirm step costs real money.
What it does
Foundations, core components and the DeFi patterns every Web3 finance product needs on day one, in dark and light.
Who it's for
Teams building DeFi and Web3 finance products.
DeFi interfaces carry a lot of weight.
Balances, prices that move every block, gas, slippage, wallet and network states, pending transactions. Dark UIs by default, neon accents everywhere, and very little room for ambiguity.
NeonFi started as a reusable base for Web3 finance work and became a full system, published to the Figma Community so other teams can skip the first month.
From foundations to DeFi patterns.
- 01Color, dark first
A neon palette on deep backgrounds, with a light mode that is a real alternative rather than an inverted afterthought, contrast checked for data-dense screens.
- 02Typography and numbers
Tabular figures for balances and prices, a clear hierarchy for the one number that matters on each screen, and consistent treatment for addresses, hashes and token symbols.
- 03Core components
Buttons, inputs, selects, tabs, badges, tooltips, tables, modals and navigation, built with variants and states in both modes.
- 04DeFi patterns
Token cards, swap and transaction flows, wallet connect and network switching, pending, success and failed states, portfolio dashboards.
What you get.
- Built for Web3 finance
- Not a generic kit with a crypto skin. The patterns come from shipping real tokenized finance and DeFi products.
- Two modes, one source
- Dark and light are maintained together, so a product can offer both without a second design file.
- Patterns, not just primitives
- Flows and states are included, so teams start from a working swap screen rather than a button.
- Free and open
- Published on Figma Community. Duplicate it, adapt it, ship with it.
Questions, answered.
Is NeonFi free?
Yes. NeonFi is free on Figma Community: duplicate it into your drafts and adapt it to your product.
Does it include a light mode?
Yes. It is dark first, with a light mode maintained alongside it rather than an inverted afterthought.
What DeFi flows are included?
Token cards, swap and transaction flows, wallet connect and network switching, pending, success and failed states, and portfolio dashboards.
Let's talk
Let's make
Let's make
it happen.
For product leadership, ambitious projects, and interesting collaborations.
