Carbon Design System — components, styles & elements

Carbon is IBM's open-source design system. As code it is a monorepo of layered npm packages: two flagship component libraries on top of a set of foundational elements (design tokens, grid, type, icons, motion) that are all driven by Sass.

• @carbon/react — React components (<Button>, <DataTable>, …). Bundles the styles.
• @carbon/web-components — the same components as framework-agnostic custom elements (<cds-button>, Lit-based). React and web-components are a dual-flagship pair: equal feature/visual parity, different implementations. Pick one per app.
• Elements (used directly or transitively): @carbon/styles (all Sass), @carbon/themes, @carbon/colors, @carbon/grid, @carbon/layout, @carbon/type, @carbon/motion, @carbon/icons (+ @carbon/icons-react, @carbon/icons-vue), @carbon/pictograms.
• Deprecated re-exports: carbon-components → @carbon/styles, carbon-components-react → @carbon/react.

This skill is a faithful offline copy of Carbon's in-repo docs. The narrative below is the map; open the matching file under references/ for exact usage, props, and full detail. Start navigation at references/CONTENTS.md. Design/usage guidance for the system as a whole (do/don't, anatomy, accessibility) lives at https://www.carbondesignsystem.com.