Carbon Design System
The Carbon Design System is an open-source design system developed by IBM to enable the creation of consistent, scalable digital products and user experiences across web and mobile platforms.[1] Based on the foundational IBM Design Language, it provides a comprehensive collection of reusable components, design patterns, human interface guidelines, working code implementations, and supporting tools that prioritize user-centered design, accessibility, and brand consistency.[2] Introduced in 2017 with its initial major release (version 7) on March 30, Carbon has evolved through regular updates, reaching version 11 by 2023, which introduced improvements in token management, component APIs, and developer usability.[3][4] Key elements of Carbon include a modular library of UI components such as buttons, forms, navigation, and data visualization tools like charts and tables, available in frameworks including React, Web Components, and community-supported options like Angular and Vue.js.[5] The system emphasizes visual consistency through standardized color palettes—primarily neutral grays with accents derived from the IBM Design Language—typography using the IBM Plex font family, spacing scales for layout harmony, and an extensive icon library for intuitive communication.[6][7][8] Design resources, such as Figma kits tailored for internal IBM users and external contributors, facilitate rapid prototyping and collaboration.[9] Carbon adheres to rigorous accessibility standards, aligning with WCAG 2.1 AA, Section 508, and European regulations via IBM's Accessibility Checklist, ensuring components are keyboard-navigable, screen-reader compatible, and inclusive for diverse users.[10] Its open-source nature, hosted on GitHub with over 150 contributors, fosters a vibrant community that drives ongoing enhancements through code submissions, documentation, and events like meetups and training sessions.[5] Widely adopted within IBM's ecosystem—powering sites like IBM.com—and beyond, Carbon promotes efficiency by reducing design debt and enabling teams to build unified interfaces that reflect professional, trustworthy branding.[11]Overview
Definition and Purpose
The Carbon Design System is an open-source design system developed by IBM for creating products and digital experiences. It comprises a collection of reusable assets, including components, patterns, guidance, and code implementations, that enable designers and developers to construct unified user interfaces.[1][12] Carbon is built upon the IBM Design Language, a foundational set of principles that articulate the IBM brand through consistent visual and experiential elements such as color, typography, and grid systems. This foundation ensures that all implementations align with IBM's design philosophy, translating abstract guidelines into practical, code-ready resources.[1][13] The primary purpose of Carbon is to empower multidisciplinary teams to deliver consistent, efficient, and scalable user interfaces across IBM's ecosystem. By promoting the reuse of standardized assets, it minimizes design debt, streamlines collaboration between design and development, and fosters harmonious experiences that enhance user satisfaction and accessibility.[12][1] In scope, Carbon addresses web and product design needs, offering support for multiple platforms and frameworks to facilitate broad adoption. Official implementations are provided for React and Web Components, with community-driven support extending to Angular, Vue, Svelte, and vanilla JavaScript, allowing flexible integration into diverse development environments.[14]Key Principles
The Carbon Design System is guided by five foundational principles that shape its development and application: openness, inclusivity, modularity, user-focus, and consistency.[2] These principles ensure that the system remains adaptable, equitable, and effective for creating user interfaces across diverse contexts. By adhering to them, Carbon promotes collaborative innovation while maintaining a high standard of usability and coherence in design outcomes. Openness forms the bedrock of Carbon, as it operates as an open-source project where code and contributions are publicly accessible, fostering a distributed effort among users who are encouraged to participate as active makers.[2] Inclusivity complements this by prioritizing accessibility for all users, regardless of their abilities or circumstances, ensuring that designs are equitable and welcoming to diverse audiences.[2] Modularity allows Carbon's assets, such as components and patterns, to function independently or in combination without conflicts, providing flexibility for designers and developers to build tailored solutions efficiently.[2] User-focus drives the system's emphasis on intuitive and accessible experiences, informed by rigorous human-centered research that prioritizes the actual needs and behaviors of real people over abstract ideals.[2] Consistency is achieved through standardized design tokens for elements like colors, typography, and spacing, which promote visual and functional harmony across all implementations.[2] This principle is rooted in the IBM Design Language, serving as the foundational framework for Carbon's cohesive structure.[2]History
Origins and Development
The Carbon Design System originated from IBM's broader push toward a design-centric culture in the early 2010s, building on the foundations of the IBM Design Language, which was developed to unify visual and experiential elements across IBM's products and services.[13][15] This initiative, led by IBM's design transformation efforts starting around 2012, aimed to foster consistency in digital experiences amid the company's diverse portfolio of over 2,000 products.[16] Initial development of Carbon began as an internal IBM project in 2014, coinciding with the launch of IBM Bluemix (later rebranded as IBM Cloud), to tackle growing inconsistencies in user interfaces across its 130+ services.[16][17] A small team started by auditing existing patterns and componentizing them into a scalable system aligned with the IBM Design Language, emphasizing modularity and reusability to enable faster development without sacrificing cohesion.[16] The early goals centered on creating a library of standardized, reusable assets—such as styles, components, and guidelines—to streamline design and engineering workflows for IBM's cloud offerings.[17] Key early contributors included IBM's design and engineering teams, who prioritized web components as the foundational building blocks, conducting workshops and sprints to prototype an MVP that included a documentation site, code base, and design kits.[18] This internal effort culminated in the public open-source announcement on March 30, 2017, with the release of version 7, making Carbon accessible beyond IBM for broader adoption and collaboration.[16] Over time, it evolved into a more comprehensive system through subsequent releases.[16]Major Releases and Evolution
The Carbon Design System's major releases began with version 6 in June 2016, marking the initial public rollout of core components and foundational guidelines derived from IBM's design language.[3] Subsequent versions rapidly iterated on this base: v7 was released on March 30, 2017, introducing refinements to component accessibility and visual consistency; v8 followed on October 26, 2017, expanding the library with additional UI elements and improved documentation; and v9 arrived on June 4, 2018, incorporating more comprehensive motion guidelines and pattern libraries to support scalable product design.[3] Over time, the system evolved from a collection of basic React-focused components to a robust ecosystem emphasizing patterns, multi-framework compatibility, and design tools. By v10, released on March 29, 2019, Carbon aligned with IBM Design Language version 2, necessitating UI updates and introducing broader support for frameworks like Angular alongside React.[3] This shift facilitated the addition of design kits, such as the Figma kit, which became available in subsequent updates to streamline collaborative prototyping.[9] Version 11, launched on March 31, 2022, further matured the system with enhanced token and property naming, CSS grid layouts for responsive design, and light/dark mode theming, while consolidating packages under a monorepo structure for@carbon/react and @carbon/styles.[3] As of November 2025, version 11 continues to receive minor updates and remains the active major version.[3]
Carbon adheres to semantic versioning standards, enabling independent package releases with major updates introducing breaking changes, minor releases (biweekly during active phases) adding features, and patch releases addressing bugs and security issues.[4] Each major version follows a lifecycle of prerelease (for beta testing), active support (with regular enhancements), and maintenance (limited to critical fixes), ensuring long-term stability; for instance, v10 entered maintenance in September 2024, while v11 remains active as of November 2025.[4]
Recent developments include the extension Carbon for AI, introduced in 2024 as a specialized layer to provide distinct visual and behavioral identities for AI elements within IBM products, building on core Carbon principles like gradients and depth to denote AI-generated content.[19] Additionally, community-maintained components and add-ons have proliferated, allowing extensions beyond official IBM releases while maintaining compatibility with the semantic versioning model.[4]
Core Elements
Components
Components in the Carbon Design System are reusable user interface elements designed to address specific interaction challenges, such as presenting user options through buttons and menus or displaying data via tables and lists.[20] These building blocks promote visual and functional consistency across digital products by enabling systematic reuse, ensuring that interfaces maintain a unified appearance and behavior regardless of context.[20] Carbon organizes its components into broad categories to facilitate targeted application in design and development. Action widgets include elements like buttons for initiating tasks and toggles for binary state changes, allowing users to perform actions efficiently.[21] Data visualization components encompass charts for graphical data representation and progress indicators to show completion status, aiding in the interpretation of metrics and processes. Forms consist of inputs for text entry and selects for option choices, streamlining data collection while supporting validation and error handling.[22] Navigation elements feature side navigation for hierarchical content access and tabs for segmented views, enhancing user orientation in complex applications. Layout components, such as cards for grouping related information and grids for structured arrangements, provide foundational structures that organize content hierarchically. A core role of these components is to function harmoniously when combined, forming larger patterns that achieve user goals without introducing inconsistencies.[20] For instance, structured lists enable scannable presentation of grouped data items, often with selectable rows for interactivity, while data tables handle complex datasets through sortable columns and pagination, making dense information accessible.[23] Accessibility is integrated throughout, with features like ARIA labels ensuring screen reader compatibility and keyboard navigation support for inclusive use.[24][25]Patterns
In the Carbon Design System, patterns represent best-practice solutions that combine reusable components and templates to help users achieve specific goals through structured sequences and flows, such as navigation or data entry. Unlike individual components, patterns address higher-level interactions by providing guidance for common user tasks, ensuring consistency and efficiency across products. They emphasize reusable workflows that go beyond isolated UI elements, promoting scalable design for complex interfaces.[26] Patterns in Carbon are categorized into universal patterns, which are officially approved for broad application across various products, and community-maintained patterns that extend the system through collaborative contributions. Universal patterns cover foundational interactions like common actions, search, and loading states, applicable in diverse contexts. Domain-specific patterns, often built on universal ones, tailor solutions to particular scenarios, such as forms that recommend select menus over checkboxes when presenting more than five options to avoid overwhelming users, or disclosures like profile menus for managing user account details.[26][27][28] Key examples illustrate how patterns integrate components for effective user experiences. The search pattern facilitates keyword exploration by combining a text entry field, optional scope filters, and a magnifying glass icon, with flows like basic search routing to results pages or active search displaying real-time suggestions below the input for smaller datasets. Loading patterns employ skeleton states—simplified placeholders for containers like data tables or cards—to indicate ongoing processing, reducing perceived wait times and incorporating subtle motion to signal activity without applying to interactive elements like buttons. Status indicators, as a pattern, use icons (e.g., checkmark for success, warning symbol for alerts), badges with numbers for counts, and color-coded shapes (blue for information, red for errors) to convey updates efficiently, often integrated into notifications or headers. The global header pattern ensures navigation consistency by spanning the viewport with persistent elements like side navigation and search, supporting both within-product and cross-product transitions. These patterns collectively guide designers in creating intuitive, reusable flows that enhance usability while maintaining system-wide coherence.[29][30][31][32]Design Guidelines
Visual and Structural Guidelines
The Carbon Design System establishes a comprehensive color palette to ensure visual consistency and accessibility across interfaces. The system features a grayscale ranging from Gray 0 (pure white) to Gray 100 (pure black), providing a neutral foundation for UI elements. For light themes, such as White and Gray 10, enabled UI colors primarily utilize the range from White to Gray 20, while text and icons employ shades between Gray 100 and Gray 60 to maintain sufficient contrast.[6] This token-based approach allows designers to apply colors scalably without hardcoding values, supporting themes like g10 (light) and g90 (dark) for adaptive experiences.[33] Typography in Carbon is managed through type tokens that define font size, weight, and line height, organized into two primary sets: productive and expressive. The productive set prioritizes clarity and efficiency for task-focused interfaces, using IBM Plex Sans as the default typeface with a base of 14px for body text and headings scaling up to 54px. The expressive set, in contrast, supports more dynamic layouts with larger, bolder options for emphasis, such as 92px for display text. These tokens ensure hierarchical readability and are customizable via themes to align with brand needs.[34][35] Icons form a core visual element, drawn from IBM's proprietary library of over 2,600 symbols designed on a 16px grid for scalability. These vector-based icons represent actions, objects, and states, with sizes extending to 20px, 24px, and 32px for specific contexts like notifications or larger UI areas. Usage guidelines emphasize semantic pairing with text to enhance usability, and icons inherit color tokens for theme consistency, such as Gray 50 for active states in light modes.[7][36] Structurally, the 2x Grid system underpins layouts with a 16px base unit, enabling precise alignment of elements like columns, typography, and illustrations. It supports 12 columns by default, with custom breakpoints defined via media queries for responsive design across devices. Three gutter modes—wide (32px), narrow (16px), and condensed (1px)—offer flexibility; for instance, wide gutters provide ample spacing in data tables, while condensed modes suit dense forms.[37][38] Motion guidelines in Carbon guide transitions to create intuitive, efficient interactions without overwhelming users. Timing functions include durations from 100ms for subtle hovers to 500ms for structural changes like modals, paired with easing curves such as ease-out for natural deceleration. Choreography principles direct sequential animations to focus attention, like staggered entrances for lists or rounded paths for reordering grid items, ensuring movements align with the 2x Grid for spatial harmony.[39][40] These elements, implemented via tokens, promote consistency across components while adapting to expressive or productive contexts.Content and Accessibility Guidelines
The Carbon Design System provides comprehensive content guidelines to ensure consistency, clarity, and professionalism across IBM products, drawing from the IBM Style guide and IBM Design Language for a unified voice and tone. The system's voice is characterized as clear, logical, research-based, confident, and oriented toward thinker-focused users, while the tone adapts to context—such as being direct and economical in error messages or friendly in onboarding flows—to maintain approachability without sacrificing precision.[41][42][43] Best practices for forms emphasize user-friendly interactions, including the use of select lists (such as combo boxes or multiselects) for scenarios with more than five options to streamline choices, while recommending radio buttons for fewer than three to avoid unnecessary complexity. Labels should be concise (one to three words), sentence-case capitalized without colons, and top-aligned for scannability and consistency, providing sufficient context to support accessibility. Error messages follow principles of immediacy and specificity: inline notifications appear on client-side validation upon field focus loss, stating the exact issue (e.g., "Password must be at least 16 characters") in short, direct phrases, with server-side errors handled via inline notifications to guide resolution without overwhelming the user.[27][22][41] Carbon's accessibility guidelines align with WCAG 2.1 Level AA, U.S. Section 508, and European standards like EN 301 549, as outlined in the IBM Accessibility Checklist, ensuring products are perceivable, operable, understandable, and robust for all users. Components undergo rigorous testing for ARIA compliance (e.g., using landmark roles likerole="navigation" and role="main"), logical keyboard navigation (with visible focus indicators and tab order from header to footer), and screen reader support through semantic HTML, meaningful alt text, and captions. Accessibility status for each component is reported via manual and automated tests in every release, categorizing them as fully compliant, in progress, or needing review to track ongoing improvements.[44][24][10][45]
The system promotes inclusive design by addressing diverse user needs, including blind users reliant on screen readers, low-vision individuals requiring high contrast and keyboard operability, color-blind users supported by non-color cues, deaf or hard-of-hearing users with audio transcripts, those with physical disabilities via full keyboard access, and cognitively diverse users through simple language and avoidance of flashing content. This approach not only meets compliance but enhances experiences for broader audiences by testing with assistive technologies and considering cognitive load. Carbon integrates human interface guidelines as a core element, providing behavioral and interaction standards alongside visual assets to foster intuitive, equitable interfaces.[10][2][46][47]