Carbon Design System vs GitHub Primer
Carbon Design System
carbondesignsystem.com
GitHub Primer
primer.styleSide by side
| Figure | Carbon Design System | GitHub Primer |
|---|---|---|
| Price from | Free | Free |
| Free plan | Yes | Yes |
| Free trial | — | — |
| Open source | — | Yes |
| Web | Yes | Yes |
| API | — | Yes |
| Plans published | 1 | 1 |
| Spec score · UI Kit Libraries | 8.4 (#3) | 8.3 (#4) |
| Accessibility | IBM products using Carbon must meet WCAG AA accessibility standards, and the component checklist requires specified color contrast and documented focus flow. | Primer includes accessibility foundations, policies, principles and frameworks for accessible experiences. |
| Components | Carbon components are designed and coded to solve specific UI problems and work together as parts of a larger system. | The Product UI documentation catalogs dozens of components including buttons, dialogs, forms, navigation, tables and overlays. |
| Patterns | Patterns combine components and design considerations to address user needs; some patterns include example code. | Primer documents common workflow patterns such as create, edit, delete, search, filter and view. |
| Product | Carbon is IBM’s enterprise-ready, open-source design system, shaped by the IBM Design Language. | Primer is GitHub’s design system, with guidelines, principles, and patterns for designing and building UI at GitHub. |
| Support | Carbon directs users to GitHub issues and provides support by email at [email protected]. | The Figma libraries page directs questions to GitHub’s #primer-figma Slack channel or the github/primer repository issue tracker. |
Plans
In their own words
Carbon Design System
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.
GitHub Primer
GitHub Primer is a free, open-source design system for designing and building GitHub interfaces. Its guidance covers product UI components, patterns, and design tokens for color, spacing, and typography. Primer Brand addresses marketing websites and other digital experiences. React documentation explains theming, recommended practices, and component extension. Primer also provides accessibility guidance and tools, along with Octicons, GitHub’s scalable icon set. Product UI documentation includes an MCP server page. Component status is identified as experimental, ready, or deprecated; ready components are described as mature with long-term support expected. Primer Web and Primer Primitives are available through the Primer Figma Community page, while GitHub’s Figma organization is limited to GitHub team members. The Primer Mobile Figma library is internal only. GitHub employees alone can contribute to Primer Web because of Figma’s open-source file handling. GitHub’s Design Infrastructure and Design Engineering teams maintain the CSS framework, documentation, tools, libraries, and component libraries.