Web3 Designs
Pre-built, production-ready design components for common Web3 interfaces on Stacks. Each component is sourced from the Stacks Web3 Design System Figma file and documented with usage guidelines, variants, and implementation examples.
Figma Source
All components in this section are directly linked to their Figma source frames. Designs are maintained in Figma as the source of truth and documented here for developer reference.
Available Components
| Component | Description |
|---|---|
| Address Display | Displays blockchain addresses in full or shortened format with copy-to-clipboard and QR code sharing |
| Balance Display Card | Displays a user's total balance and asset breakdown with allocation bar and action buttons |
| Liquidity Pool | Displays liquidity pool information including token pairs, fees, performance metrics, and feature indicators |
| Staking | Enables users to lock their cryptocurrency for a specified period to earn rewards, showing staking amounts, lock periods, APY rates, and accumulated earnings |
| Swaps | Allows users to exchange one cryptocurrency token for another, displaying exchange rates, fees, and transaction details before confirmation |
Design Principles
These Web3 design components follow the core principles of the Stacks Design System:
- Clarity over cleverness — Blockchain interactions carry real financial weight. Every component prioritizes clear, unambiguous communication of state and action.
- Progressive disclosure — Surface essential information first (truncated address, primary action) and reveal detail on demand (full address, QR code, share options).
- Consistent interaction patterns — Copy-to-clipboard, address truncation, and transaction state indicators behave identically across all components.
- Accessible by default — All components meet WCAG 2.1 AA and include keyboard navigation, screen reader support, and sufficient color contrast.