IBM Carbon Design System

Carbon is the design system IBM uses across its cloud and enterprise products, published openly under Apache 2.0. The web implementation most teams install is @carbon/react on npm; the current major line is v11, with minor releases on a roughly two-week cadence according to the project's release radar (11.116.0 was the stable line in September 2026).

How it is put together Carbon separates the visual decisions from the components. The @carbon/styles Sass package holds the tokens - color, spacing, typography, and motion - and both the React package and the web-components package consume the same tokens, so a token change lands consistently instead of being re-implemented per library. Four themes ship built in (White, Gray 10, Gray 90, Gray 100), which makes dark and light variants a configuration choice rather than a second design pass.

Layout follows the 2x grid: a 16-column grid on wide screens, spacing steps based on an 8-pixel unit, and components sized to a consistent density. It reads as restrained and a bit formal, which suits consoles and admin tools; consumer products usually need a theme pass to feel like themselves.

Data display The component set leans toward work software: data tables with sorting, filtering, and batch actions, structured lists, tiles, and a full notification family. Charts live in a separate package, Carbon Charts, styled from the same tokens so dashboards do not mix visual languages. Empty and loading states are part of the patterns rather than left to each team.

Accessibility IBM publishes accessibility guidance alongside the components, and the React components ship with keyboard handling and ARIA wiring as part of the implementation. The final result still depends on your content, contrast choices, and testing, but you start from components that were built to be operated without a mouse.

What you give up Carbon's default look is unmistakably IBM: squared, gray-led, and optimized for scanning data. Brand-led marketing surfaces need real theming work. The system is also large; production builds need tree-shaking discipline, and the v10 to v11 migration (Sass module imports, token renames) is a project in itself for teams still on the older line. Vue, Angular, and Svelte are served through the web-components and community packages rather than first-class framework libraries, so non-React teams should prototype before committing.

Bottom line Choose Carbon when your team ships a data-heavy product and wants a maintained system whose tokens, themes, and data components stay consistent across many screens. Pick something lighter for a small marketing site or a heavily branded consumer app.