Carbon Design System — Enterprise Design System by IBM

Introduction

Carbon is IBM's open-source design system for digital products and experiences. It provides a comprehensive set of React components, design tokens, icons, and guidelines that help teams build consistent, accessible enterprise UIs. Carbon is used across IBM's product portfolio and is freely available for any project.

What Carbon Design System Does

• Provides 60+ React components for data tables, forms, navigation, and notifications
• Includes a design token system for colors, typography, spacing, and motion
• Ships 2000+ icons as optimized SVG React components
• Offers Figma and Sketch design kits for designer-developer collaboration
• Supports multiple themes including light, dark, and high-contrast accessibility modes

Architecture Overview

Carbon is a monorepo organized into modular packages: @carbon/react (components), @carbon/styles (SCSS tokens and mixins), @carbon/icons-react (icon components), and @carbon/colors (color palettes). Components use a render-props pattern for complex widgets like DataTable, enabling flexible customization. Styling is based on SCSS with CSS custom properties for runtime theming.

Self-Hosting & Configuration

• Install @carbon/react and import the CSS stylesheet or SCSS source
• Wrap your app with the Carbon theme provider for global theming
• Override design tokens via SCSS variables or CSS custom properties
• Use the Carbon CLI to scaffold new projects with correct configuration
• Integrates with Next.js, Vite, Create React App, and Gatsby

Key Features

• WCAG 2.1 AA accessible with tested screen reader and keyboard support
• Comprehensive data table with sorting, filtering, pagination, and batch actions
• Design token architecture ensures visual consistency across products
• Four built-in color themes including high-contrast for accessibility compliance
• Active community with regular releases and long-term support

Comparison with Similar Tools

• Material UI (MUI) — Google's Material Design; Carbon follows IBM's design language with stronger enterprise data patterns
• Ant Design — rich enterprise components; Carbon has tighter accessibility compliance and design token integration
• Chakra UI — flexible styling; Carbon provides a complete design system with guidelines, not just components
• Fluent UI — Microsoft's design system; Carbon is fully open-source without Azure/Office dependencies
• Atlassian Design System — similar enterprise focus; Carbon has broader framework support and open governance

FAQ

Q: Is Carbon free for commercial use? A: Yes. Carbon is Apache 2.0 licensed and free for any project, commercial or otherwise.

Q: Does Carbon support Vue or Angular? A: The primary package is React. Community-maintained Web Components exist for framework-agnostic usage.

Q: How does Carbon handle theming? A: Carbon uses design tokens (CSS custom properties and SCSS variables) with four built-in themes. Custom themes can override any token.

Q: Can I use Carbon components individually? A: Yes. Import only the components you need. Tree-shaking removes unused code from production bundles.

Sources

• https://github.com/carbon-design-system/carbon
• https://www.carbondesignsystem.com