Introduction
Welcome to the Stacks Design System — a comprehensive toolkit for building Web3 applications on Stacks, the Bitcoin L2.
The Stacks Design System provides developers and designers with a collection of reusable components, patterns, and guidelines specifically crafted for building decentralized applications. Whether you're building a wallet, DEX, NFT marketplace, or any other Stacks application, this design system gives you the building blocks you need.
This documentation covers both the design principles and implementation details. Use the sidebar navigation to explore components, patterns, and guidelines.
Design Principles
The Stacks Design System is built on four core principles that guide every decision we make:
Web3-Native
Every component is designed with blockchain interactions in mind. From wallet connections to transaction confirmations, our patterns handle the unique challenges of crypto UX.
Consistent & Cohesive
Built on a solid foundation of design tokens ensuring visual consistency across your entire application while allowing for customization.
Mobile-First
All components are designed mobile-first and scale gracefully to larger screens. Perfect for users managing their assets on the go.
Accessible
WCAG AA compliant with proper contrast ratios, focus states, keyboard navigation, and screen reader support built into every component.
What's Included
The design system includes everything you need to build production-ready Stacks applications:
| Resource | Description |
|---|---|
| Design Tokens | Colors, typography, spacing, and other foundational values |
| Web3 Patterns | Wallet connection, transactions, staking, and DeFi patterns |
| Guidelines | Accessibility, mobile patterns, and best practices |
| Quick Start | Step-by-step setup guide |
Getting Started
Ready to start building? Head to our Quick Start Guide for step-by-step instructions on setting up the design system in your project.