Web3 Design System Guide

A Web3 design system is a SaaS design system plus money, networks, and irreversible actions. If you only fork a generic kit, you will reinvent pending transactions in every screen.

We build these under Design Systems and Web3 Product Design.

Tokens that match financial UI

• Colour: profit / loss / warning / pending — named roles, not “green means go” on one page and “green means chain is healthy” on another.
• Type: tabular nums for amounts. Never let 0.00000012 wrap.
• Space: dense on trading tickets, airy on marketing. Same tokens, different density themes.

Components unique to chain products

Network badge — name + status. Wrong network is a component, not an error toast.

Address — truncated with copy, expand, and explorers. Never the only identifier for a human (pair with ens or a label).

Amount input — token select, max, fiat estimate, fee preview.

Tx status — pending, confirming (n of m), success, failed, dropped, replaced. Each with an action.

Approval — current allowance vs requested. Default to exact, not unlimited.

Connect button — connected / wrong network / disconnected. Same control in header and empty states.

States you must spec

SaaS kits skip: insufficient gas, user rejected, wallet locked, RPC down, indexer lag, paused protocol, maintenance.

If it is not in Figma variants, engineers will invent it at 1am.

Accessibility

Focus on dialogs that wallets inject. Your UI still needs contrast, not-only-colour PnL, and amounts that screen readers can speak. Blockchain Design Agency work that ignores this is unfinished FinTech.

Handoff

Auto-layout, variants, and a “transaction anatomy” page that shows one swap from click to confirmed. That page saves more engineering time than another illustration set.

Related: DeFi Dashboard Design Guide · Complete Web3 UX Checklist · Digital Assets & Web3