carbon-design-kit

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

carbon-design-kit

★ 1,105 Open GitHub ↗

A versioned, comprehensive kit of the Carbon Design System visual assets (components, icons, pictograms, text styles, color styles, grid templates).

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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](https://carbondesignsystem.com/) website.

## 📝 Change log
The change log contains release notes on current and previous versions of the Carbon Design Kit. 
* [`10.x.x`](https://github.com/carbon-design-system/carbon-design-kit/releases/tag/v10.20.0)
* [`8.3.1`](https://github.ibm.com/carbon/design-kit/releases) and [older](https://github.ibm.com/Bluemix/design-kit/releases/tag/1.0.4)

## :mag: Accessibility
All of the designs within the Carbon Design Kit meet the [WCAG 2.1 AA accessibility guidelines](https://www.w3.org/TR/WCAG21/) and are compliant with [Section 508](https://www.section508.gov) 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](https://carbondesignsystem.com/designing/get-started/).
* 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](https://carbondesignsystem.com/designing/kits/figma/).
* 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](https://github.com/carbon-design-system/carbon-design-kit/tree/master/Carbon%20Design%20Kit%20-%20v11.0.0) or see our [Sketch design kit guide](https://carbondesignsystem.com/designing/kits/sketch/).
* The Carbon Design Kit uses the typeface IBM Plex. It is open-sourced and free to download from the [IBM GitHub repo](https://github.com/IBM/plex).

### Developers 
* For more instructions on getting up and running in our code base with Carbon components, see our [Get started guide](https://carbondesignsystem.com/developing/get-started/).
* For more information on using Carbon Data Visualizations, see our [Get started guide](https://carbondesignsystem.com/data-visualization/getting-started/).

## 🌟 Contributing

### Design
Follow our [Contributing guidelines](https://github.com/carbon-design-system/carbon-design-kit/blob/master/CONTRIBUTING.md) to contribute to the Carbon Design System.

### Code
For instructions on contributing to our component library, read our [Contributing docs](https://github.com/carbon-design-system/carbon/blob/main/.github/CONTRIBUTING.md) 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](https://www.figma.com/community/plugin/799648692768237063/select-layers): Select layers based on name, type, or similarity.
- [Sort Layers](https://www.figma.com/community/plugin/767379414704079825/sort-layers): Sort layers by name or position.
- [Many Paster](https://www.figma.com/community/plugin/831936445397604629/many-paster): Insert a list of data into selected text layers individually.

For more recommended plugins, see our [Figma Education — Plugin Exercises](https://www.figma.com/design/gFHh67rjQFZlDMdNoqM1Ed/Plugin-Exercises?node-id=0-1&t=UgGRUirKj910RETz-0) file.

carbon-design-kit

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

carbon-design-kit

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README