carbon-design-system/carbon-design-kit
A versioned, comprehensive kit of the Carbon Design System visual assets (components, icons, pictograms, text styles, color styles, grid templates).
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.
: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
Figma libraries
Use the (v11) Carbon Design System Figma library as the main library for Carbon components. Use additional IBM Design Language libraries, such as the Carbon Type Sets, IBM® UI Icon Library, IBM® Pictogram Library, and the IBM® Color Library 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.