Carbon Design Kit

The Carbon Design Kit is a living, breathing document containing all our visual assets (components, icons, pictograms, color styles, text styles, grid templates, etc.). This document evolves and changes as we collaborate with partners and product teams. All assets that live in the kit can also be found on our Carbon Design System website.

📝 Change log

The change log contains release notes on current and previous versions of the Carbon Design Kit.

• 10.x.x
• 8.3.1 and older

:mag: Accessibility

All of the designs within the Carbon Design Kit meet the WCAG 2.1 AA accessibility guidelines and are compliant with Section 508 standards. If you choose to customize these designs, please make sure they continue to meet these requirements.

📚 Getting Started

Designers

• To get started with the Carbon Design Kit, see our Get started guide.
• The Carbon Design Kit is in Figma, the primary design kit tool we support and maintain. To get the Carbon Design Kit in Figma, see our Figma design kit guide.
• The Carbon Design Kit still exists in Sketch, but we no longer maintain it. We suggest migrating to Figma to get the most updated kits we offer. You can still download the Carbon Design Kit in Sketch file from this repo or see our Sketch design kit guide.
• The Carbon Design Kit uses the typeface IBM Plex. It is open-sourced and free to download from the IBM GitHub repo.

Developers

• For more instructions on getting up and running in our code base with Carbon components, see our Get started guide.
• For more information on using Carbon Data Visualizations, see our Get started guide.

🌟 Contributing

Design

Follow our Contributing guidelines to contribute to the Carbon Design System.

Code

For instructions on contributing to our component library, read our Contributing docs for Carbon components.

💻 Workflow

Sketch Libraries

Use the (v11) All themes - Carbon Design System as the main library for Carbon components. Use additional IBM Design Language libraries, such as the icons, pictograms, text styles, color styles, and hover color style libraries to add additional Carbon elements to your design files.

Plugins

Use the following recommended plugins to help speed up your workflow in Figma.

• Select Layers: Select layers based on name, type, or similarity.
• Sort Layers: Sort layers by name or position.
• Many Paster: Insert a list of data into selected text layers individually.

For more recommended plugins, see our Figma Education — Plugin Exercises file.