Carbon Design System (2024)

• Overview
• Introduction to Carbon
• How Carbon works
• Carbon compliance at IBM
• Contact us

Overview

A design system is a collection of pre-built, reusable assets—components,patterns, guidance, and code—that allows its users to build consistent digitalexperiences faster. By using the pre-built and universal assets of Carbon, thetime teams spend designing and building is minimized. Instead of building andre-building basic elements, they can spend that time customizing their productsto address specific client use cases.

The design system is named Carbon Design System because in nature the elementcarbon builds complex structures from simpler compounds. This motif mimics howour individual styles and components can combine to make beautifully complex,natural, and intuitive designs.

Carbon is open source

Carbon is funded and built by IBM, which means we build for the company’sbusiness needs, but we’ve made it open source for anyone to use and contributeback to. While being primarily open source, Carbon also serves various parts ofthe IBM business that follow an inner source model.

Introduction to Carbon

Learn about Carbon and its history. This video covers how the IBM DesignLanguage is applied to Carbon, how Carbon interacts with domain level guidance,and what it means to be an open source design system.

How Carbon works

The Carbon team is committed to helping members of the community be successfulin adoption and their use of Carbon assets.

Our guiding principles

Carbon is open. The design system is a distributed effort, guided by theprinciples of theopen 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 maximumflexibility in execution. Its components are designed to work seamlessly witheach other, in whichever combination suits the needs of the user.

Carbon puts the user first. Using rigorous research into users’ needs anddesires, Carbon is laser-focused on real people.

Carbon builds consistency. Based on the IBM Design Language, every elementand component of Carbon was designed from the ground up to work elegantlytogether to ensure consistent, cohesive user experiences.

We maintain assets

Carbon maintains design kits in Figma. These kitscontain components and elements as well as wireframes and guidance to aiddesigners.

Carbon supports multiple code implementations.These reflect theproduction-level design libraries. The frameworks are listed below with theirprimary maintainers:

• Elements: Carbon team
• React:Carbon team
• Web Components:Carbon team
• Angular: Community maintained
• Vue:Community maintained
• Svelte: Communitymaintained

If you’re using a different framework, you can still build components byfollowing our guidelines forother frameworks.

Design patterns are harvested from products built with Carbon.These becomepart of the design system.Teams can use these well-defined patterns in theirwork and contribute patterns back to the system.

We support adoption

We conduct training classes, run meetups, and offer certifications.We offertutorials in Angular, React using Next.js, and Vue. We runmeetups and design reviews on a regular basis. We’realso available to teach at conferences, bootcamp labs, and wherever else we’reneeded.

We engage the community.We strive to be one of the world’s best designsystems and we’realwaysopen to feedback.We communicate with you about Carbon’s state and roadmap through GitHub support,blog posts, and Twitter.

Contributed components and patterns include a list of maintainers.TheCarbon team triages and supports maintenance requests that do not have amaintainer.

We provide support for users of the design system.The Carbon team engageswith users primarily through GitHub. A member of the Carbon team responds to allissues and pull requests.

Carbon compliance at IBM

Carbon compliance by the IBM community is critically important to the IBM brand.Carbon is the digital expression of the IBM brand and the chassis upon which allproducts and digital experiences are built. It is the foundation for everydigital experience people have throughout their relationship with IBM.

Making delightful user experiences rooted in human-centered design, high-qualitydesign standards, and the IBM brand ensures we deliver consistency andexcellence to our users, and build a brand that people love across the entireproduct line.

Have questions? Found a bug? Learn where to go and what to do by visitingtheContact us page.