Carbon Design System
IBM's system, built for dense data and long lived enterprise software
Carbon is IBM's open source design system, covering tokens, components, layout, motion and data visualisation across React, Web Components, Angular and Vue. It is built for information dense interfaces that people use all day, which makes it a specialist rather than a general reference.
Where it is genuinely better
Data density. Carbon's tables, filters and grids assume thousands of rows and a user who lives in the interface, which is a different problem from the spacious marketing influenced layouts most systems document.
The motion documentation is also more rigorous than most, defining productive and expressive easing sets rather than leaving duration to taste.
Where it will fight you
It looks like enterprise software, deliberately. Sharp, restrained and serious, which is right for its purpose and wrong for a consumer product.
It is also large. Adopting Carbon is a commitment to its grid, its type scale and its component vocabulary, and pulling one table out of it is more work than it sounds.
Reach for it when
- the interface is dense data that people work in all day
- you need the same system across several frontend frameworks
- you want motion documented as rules rather than as taste
Watch out for
- the enterprise look is intentional and hard to soften
- adopting it means adopting its grid and type scale, not just components
- extracting one component from it is harder than it looks
Compare with these
- Design systemsFree
Awesome Design Systems
The published design systems of dozens of real companies, in one list
- design-systems
- tokens
- documentation
CC0-1.0Read - Design systemsFree
Primer
GitHub's design system, documented for developers rather than designers
- design-systems
- github
- tokens
MITRead - Design systemsFree
Open Props
A ready made set of CSS custom properties, no framework attached
- design-systems
- css
- tokens
MITRead