Introduction
Carbon is IBM’s open-source design system for products and digital experiences. Built on the IBM Design Language, it includes working code, design tools and resources, human interface guidelines, and a vibrant community of contributors. Carbon represents the digital expression of the IBM brand, the foundation upon which all products and digital experiences are built. It underpins every digital interaction people have throughout their relationship with IBM.
Why the name Carbon?
Like the element in nature, Carbon forms complex structures from simpler compounds. In the same way, individual components combine to create beautifully complex, natural, and intuitive designs.
How did Carbon originate?
Carbon is funded and developed by IBM to meet the company’s business needs, but it is made open source for anyone to use and contribute to. It also supports IBM business units that follow an inner-source model.
Our guiding principles
The Carbon team is committed to helping community members successfully adopt and use Carbon assets.
Carbon is open. The design system is a distributed effort, guided by the principles of the open source movement. Carbon’s users are also its makers, and everyone is encouraged to contribute.
Carbon is inclusive. It’s designed and built to be accessible to all, regardless of ability or situation.
Carbon is modular and flexible. The system’s modularity ensures maximum flexibility in execution. Its components are designed to work seamlessly with each other, in whichever combination suits the needs of the user.
Carbon puts the user first. Using rigorous research into users’ needs and desires, Carbon is laser-focused on real people.
Carbon builds consistency. Based on the IBM Design Language, every element and component of Carbon was designed from the ground up to work elegantly together to ensure consistent, cohesive user experiences.
Carbon Core
The Carbon Design System Core library is a collection of pre-built, reusable assets, including components, patterns, guidance, and code, that enables teams to build consistent digital experiences faster. By leveraging these universal assets, the time teams spend designing and building is minimised. Rather than repeatedly building basic elements from scratch, teams can instead focus that time on customising their products to address specific client use cases.
What it includes
Carbon Core provides foundations, components, patterns, and code, along with guidance on how to design and build with them. It's assets are fundamental in nature, designed to serve as a base for the widest variety of situations.
How we engage
The Carbon team communicates via GitHub, blog posts, and community channels. Every issue and pull request receives a response, and contributed components include named maintainers.
Carbon for Products
Carbon for Products is the design system for building IBM software products. It provides code, design, and documentation for designers and developers working across App Modernization, Data and AI, IT Automation, Security, Sustainability Software, Infrastructure, Finance and Operations, and more.
The system is built upon the foundational components of Carbon Core, extended with additional components, styling, and guidance crafted specifically for software product use cases, it is not a replacement for Core, but a specialized layer on top of it.
What it includes
Carbon for Products extends Carbon Core with additional components, styling, and guidance specifically for software product use cases. All components are built with React and are maintained with design, code, and documentation by a dedicated team.
How we engage
The system is maintained by a dedicated team of designers, developers, and product managers, supported by contributors from across IBM software teams. Join our Slack channel #carbon-for-ibm-products.
Carbon for AI
Carbon for AI is an extension of the Carbon system, designed to give AI instances in IBM products a visually and behaviorally distinct identity. It is the framework for identifying AI-generated content and delivering explainability across IBM software experiences.
Carbon for AI provides guidelines, light-inspired style elements, new color and style tokens, and reusable components, including the AI label, AI chat framework, and AI-variant versions of Carbon Core components to support transparency and explainability across IBM products. Explore Carbon for AI.
Feedback and questions can be shared via GitHub issues or, for IBMers, through the #carbon-design-system and #carbon-for-ai Slack channels. Every issue receives a response from the team.
Carbon for Charts
Carbon’s data visualization provides a comprehensive set of chart types to help teams communicate data clearly and consistently. Start by identifying the purpose of the visualization, then choose the appropriate chart type.
A complete library of chart types from simple bar and line charts to alluvial diagrams and geospatial overlays organized by intent to help teams select the right visualization for any data story. Explore Carbon chart types.
The team collaborates openly through GitHub, responding to every issue and pull request. Community contributions are welcomed and supported.
Community-maintained Carbon packages
Beyond Carbon Core and Carbon for Products, the wider Carbon ecosystem is maintained by the community, for the community. Each package serves a specific audience and set of use cases, while remaining grounded in the fundamentals that Carbon Core provides.
The following community-maintained packages are available across the IBM ecosystem:
Carbon for Cloud
Supports teams building product experiences within IBM Cloud.
Carbon for AEM
Supports teams building IBM.com and marketing digital experiences.
Carbon for IBMer Experience
Supports IBM teams building internal digital experiences, including w3, CIO, and HR.
Carbon for Salesforce
Supports teams building consistent experiences within the Salesforce platform.
Carbon React Native
Supports teams building native mobile applications within the IBM ecosystem.
Who uses Carbon
Carbon serves designers, developers, marketers, and product owners across IBM and the open source community, anyone building digital experiences that express the IBM brand.
Developers
Developers use Carbon to build more product in less time with pre-built assets. It enables them to create cohesive, robust front-end experiences that share the IBM brand, without the need to reinvent base components. For those working on software products, the Carbon for Products React library provides additional components and patterns.
Designers
Carbon gives designers a resolved foundation of components, states, behaviors, and accessibility, so design effort goes toward decisions that are specific to the product rather than ones that are universal to all of them.
Marketers
Marketers use Carbon to build experiences that differentiate IBM. Products built with Carbon provide interoperability of experience and visuals, making complex multi-product stories easier to tell. Most marketing experiences are built using Carbon Web components.
Business & support
Consistent experiences reduce cognitive load, user errors, and the need for training and onboarding. Product experiences built on the same foundation work together seamlessly, reducing support escalations and enabling learning across spaces.
Why it matters to use or adopt the Carbon Design System
- Interoperability across products: Multi-product stories are easier to tell when product experiences share the same visual foundation and interact consistently whether built on Carbon Core or Carbon for Products.
- Reduced errors and support needs: Familiar, consistent patterns lower cognitive load, which directly reduces user errors, questions, and the need for extensive training and onboarding resources.
- Brand compliance at scale: Carbon is the foundation for every digital experience throughout a person’s relationship with IBM. Maintaining compliance with Carbon protects and expresses the IBM brand consistently across all surfaces.
Adoption
Software teams should adopt Carbon for Products in order to ensure visual and interaction consistency. This includes products in App Modernization, Data and AI, IT Automation, Security, and Sustainability Software. Other teams such as Infrastructure and Finance & Operations choose to adopt Carbon for Products because the resources and guidance here benefit their product requirements.
The intent behind adoption is to ensure consistency, accessibility, and IBM brand compliance, with the right starting point depending on what you are building.
Use the following to determine which system, or combination of systems, is relevant to what you are building.
