Skip to content
SPECIFICTION
Get listed

Carbon Design System

carbondesignsystem.com

Free plan Web
Visit carbondesignsystem.com
Spec score 8.4 #2 of 24 in Ui Frameworks

What it is

Carbon Design System is IBM’s open-source design system for digital products, shaped by the IBM Design Language. Carbon Core provides foundations, components, patterns, code, and guidance for teams building consistent digital experiences. Carbon for Products adds product-oriented components, styling, and guidance, with components built using React. The wider ecosystem includes Carbon for AI guidelines and reusable elements, Carbon Charts, and integrations such as Carbon for Cloud, Carbon for AEM, and Carbon React Native. Design kits maintained in Figma receive library updates automatically. Carbon MCP lets AI applications or agents query colors, typography, component details, and usage guidance. Web components are available as ES modules or through a CDN and can be used with frameworks such as Angular or Ember. Developer resources include GitHub repositories, Storybooks, tutorials, Carbon Devtools, a color-contrast checker, and UI Builder. The builder can export presentation images, demo apps, or frontend code. Components follow accessibility checks based on IBM’s checklist. Carbon is free to use and contribute to, with no paid tiers stated. Its patterns cannot include code for every possible implementation.

Spec sheet

Purpose
Carbon provides reusable assets to help teams build consistent digital experiences faster.Read 30 Sep 2026 · carbondesignsystem.com
Product
Carbon is IBM’s enterprise-ready, open-source design system, shaped by the IBM Design Language.Read 30 Sep 2026 · carbondesignsystem.com
Audience
Carbon provides code, design, and documentation for designers and developers working across areas including App Modernization, Data and AI, IT Automation, Security, and Finance and Operations.Read 30 Sep 2026 · carbondesignsystem.com
Integrations
The ecosystem includes Carbon for Cloud, Carbon for AEM, Carbon for IBMer Experience, Carbon for Salesforce, and Carbon React Native.Read 1 Oct 2026 · carbondesignsystem.com
Support
Carbon directs users to GitHub issues and provides support by email at [email protected].Read 1 Oct 2026 · carbondesignsystem.com
Accessibility
IBM products using Carbon must meet WCAG AA accessibility standards, and the component checklist requires specified color contrast and documented focus flow.Read 1 Oct 2026 · carbondesignsystem.com
AI extension
Carbon for AI provides guidelines, style elements, tokens, and reusable components such as an AI label and AI chat framework.Read 1 Oct 2026 · carbondesignsystem.com
AI integration
Carbon MCP connects AI clients to current Carbon components, tokens, icons, guidance, documentation, and code through the Model Context Protocol.Read 1 Oct 2026 · carbondesignsystem.com
Charts
Carbon Charts provides chart types ranging from bar and line charts to alluvial diagrams and geospatial overlays.Read 1 Oct 2026 · carbondesignsystem.com
Component quality limits
Carbon’s stable component checklist requires unit-test coverage of at least 80% and accessibility checks using the IBM Equal Access Accessibility Checker.Read 1 Oct 2026 · carbondesignsystem.com
Components
Carbon components are designed and coded to solve specific UI problems and work together as parts of a larger system.Read 30 Sep 2026 · carbondesignsystem.com
Core assets
Carbon Core provides foundations, components, patterns, code, and guidance for building consistent digital experiences.Read 1 Oct 2026 · carbondesignsystem.com
Data visualization
Carbon charts are intended to support accurate, accessible data visualizations.Read 30 Sep 2026 · carbondesignsystem.com
Design tools
Carbon design kits are maintained in Figma and receive library updates automatically.Read 30 Sep 2026 · carbondesignsystem.com
Developer tooling
Carbon provides GitHub repositories, Storybooks, tutorials, Carbon Devtools, a color-contrast checker, and Carbon UI Builder.Read 1 Oct 2026 · carbondesignsystem.com
Included resources
Carbon includes working code, design tools and resources, human interface guidelines, and a contributor community.Read 1 Oct 2026 · carbondesignsystem.com
Limit on patterns
Because patterns can be implemented in many ways, Carbon cannot provide code for every scenario.Read 30 Sep 2026 · carbondesignsystem.com
Patterns
Patterns combine components and design considerations to address user needs; some patterns include example code.Read 30 Sep 2026 · carbondesignsystem.com
Product layer
Carbon for Products extends Carbon Core with product-focused components, styling, and guidance, and its components are built with React.Read 1 Oct 2026 · carbondesignsystem.com
UI Builder output
Carbon UI Builder can export assembled pages as presentation images, live demo apps, or production-quality frontend code.Read 1 Oct 2026 · carbondesignsystem.com
Web components
The @carbon/web-components package provides ES-module or CDN components and can be used with frameworks such as Angular or Ember.Read 1 Oct 2026 · carbondesignsystem.com
What it is
Carbon is IBM’s open-source design system for products and digital experiences, built on the IBM Design Language.Read 1 Oct 2026 · carbondesignsystem.com

Plans and prices

Open-source design system Free open source for anyone to use and contribute · no paid tiers stated Read 1 Oct 2026 · carbondesignsystem.com

Every Carbon Design System plan and price →

Strong points and limits

Strong points

  • Open source and free to use and contribute to.
  • Figma kits receive library updates automatically.
  • Web components support multiple frameworks.
  • UI Builder exports images, demo apps, or code.
  • Accessibility guidance is based on IBM’s checklist.

Limits

  • Code is not available for every pattern scenario.
  • Carbon is listed for web, not other platforms.

Who it suits

Carbon is for designers and developers building digital products, including teams working in areas such as Data and AI, Security, Finance, and IT Automation. It provides design assets, implementation resources, and accessibility guidance.

Verdict

Carbon offers a broad set of design, code, and developer resources around IBM’s design language. Teams should note that pattern implementations vary, so not every scenario has provided code.

Where Specifiction places it

Alternatives to Carbon Design SystemAll alternatives →