carbon

Carbon is an open source design system created and maintained by IBM. A design system is a shared library of visual components, guidelines, and rules that a company uses so that all of its products look and behave consistently. Carbon serves this role across IBM's product portfolio, meaning the buttons, tables, forms, icons, colors, spacing, and typography that IBM apps use all come from this codebase rather than being reinvented for each product.

The system is organized as a collection of installable packages rather than one monolithic library. The most common entry points are a React package for building web interfaces with the popular React framework, and a web components package for teams that are not using React. Community-maintained versions also exist for Angular, Svelte, and Vue. Each package is independent, so a team can install just the icons package or just the color tokens without taking everything.

Beyond component code, Carbon includes the IBM Design Language foundations as separate packages: a defined color palette, a type scale using IBM Plex fonts, a 16-column grid system, a motion curve library for animations, icon and pictogram sets, and a spacing scale. These are the raw design decisions that the components are built on top of, published as code so developers and designers share the same source of truth.

The documentation site at carbondesignsystem.com covers how to use each component, accessibility guidance, and migration guides for teams upgrading between major versions. The project has gone through several major versions, and the repository includes migration documentation for moving from v9 to v10 and v10 to v11.

Carbon is open source under the Apache 2.0 license and accepts contributions. It has a large contributor base and an active Discord community. The full README is longer than what was shown.