Coinbase Design System: Open Source
We recently open-sourced Coinbase Design System (CDS), making the internal tools used to build our retail, business, and institutional products available to the global community.
This move is a significant step in empowering developers to build high-quality, accessible financial applications. By sharing these resources, the goal is to increase global economic freedom by lowering the barrier to entry for professional-grade UI in the crypto space.
Key Features
Production-ready library: With over 100 components, the system covers everything from basic UI building blocks to specialized financial tools and patterns.
Accessibility as a standard: Each component has built-in support for keyboard navigation, focus states, and high-contrast visuals, ensuring inclusive design from the start.
Modular architecture via design tokens: CDS utilizes a robust design token framework. By centralizing variables for color, spacing, and type, it maintains high-level consistency while allowing for rapid, global UI updates.
Flexible theming: While CDS powers the Coinbase brand, it was engineered for flexibility. Through token customization, the system can be completely "themed" to match different brand identities—a capability Coinbase already uses to distinguish the look of their main app from products including but not limited to Base and Advanced Trading.
Scaling the ecosystem: By making CDS public, Coinbase is providing a blueprint for the future of decentralized applications (dApps). It allows builders to inherit a trusted, polished visual language, which is essential for mainstream adoption of on-chain technology.
Role
Open source site: Co-lead the design of the CDS documentation site, transforming it into an intuitive, self-service gateway for external developers.
Token architecture: Architected a flexible design token structure that enables seamless multi-brand theming across core products and new ecosystems.
Components: Contributed to a high-integrity library of 100+ components.
Additional information
For those interested in exploring the documentation or the code, it’s available at cds.coinbase.com or via our GitHub repository.
