Get started
Welcome to Carbon! If you’re just starting out designing with Carbon, you’re in the right place. Here’s a checklist of everything you need to get up and running.
- Step 1: Learn about Carbon
- Step 2: Access the tools
- Step 3: Get the Figma design kits
- Step 4: Review our usage guidance
- Step 5: Explore foundational guidance
- Step 6: Connect with us
Step 1: Learn about Carbon
By adopting Carbon, designers gain a collection of reusable assets to design websites and user interfaces quickly and efficiently.
The IBM Design Language is the visual expression of IBM’s brand, including color, type scale, the grid, and more. Carbon translates the design language into code for building digital experiences.
This is done through elements such as color tokens, type tokens, and spacing tokens that are meant to be applied to all sorts of digital experiences through guidance and components.
Step 2: Access the tools
For IBMers only:
IBMers should get a license for Figma, our primary design kit tool. You may also access tools we no longer support, Sketch, Adobe XD, and Axure, by heading to the Design Toolbox. However, we no longer maintain or update the kits for these tools. We recommend you migrate to Figma to get the most updated kits we offer.
Step 3: Get the Figma design kits
We maintain the core Carbon kits in Figma. These kits include all the Carbon core components and styles for reuse in your product and web experiences. By using the kits you will automatically receive updates made to the Carbon libraries, ensuring your designs stay up-to-date with the latest releases. This allows you to speak the same language and have shared functionality expectations as your developers in the hand-off and development cycle.
Head on over to the Design kits section and follow the instructions to get set up with Figma.
Core design kits
Everyone using Carbon should use the following Figma core design kits as a starting point for building user interfaces. This brings consistency and speed, allowing teams to focus on solving more specific user tasks. Core design kits include elements, core components, wireframes, and guidelines.
| Maintainer | Design kit | Type |
|---|---|---|
| IBM Brand | IBM Pictograms | Elements |
| IBM Icons | Elements | |
| v11 Text styles | Elements | |
| IBM Color palette | Elements | |
| Carbon Core | v11 White theme | UI |
| v11 Gray 10 theme | UI | |
| v11 Gray 90 theme | UI | |
| v11 Gray 100 theme | UI | |
| Accessibility | Accessibility toolkit | Guidelines |
The links in the table for Figma Libraries are preview only. Some of the Figma kits are for internal IBMers. To learn more about installing Figma Libraries and available external libraries visit the Figma tutorial Figma tutorial.
Additional design assets
Support for v11 Figma kits are prioritized, but Figma v10 kits are also available with limited support. Visit the design kit catalog to see a comprehensive list of all design kits, including v10 Figma kits and kits for tools that are no longer maintained. In Other resources, you’ll find links to icon libraries, color palettes, plugins, and more. The Adobe XD kit is no longer prioritized or maintained, but you may access it here.
Step 4: Review our usage guidance
Our usage guidance is detailed and thorough, and you’ll learn a lot about the system by reading through the components and patterns documentation.
Components: Carbon provides in-depth design usage and style guidance for all components. It’s important to be familiar with this additional UX and visual guidance when you are designing with our components.
Patterns: We also offer a range of key patterns—best practice solutions for how a user achieves a goal. These design patterns have been harvested from products built with Carbon, and have been reviewed and approved for use by the Carbon governance team.
Step 5: Explore foundational guidance
The following sites provide guidance for creating experiences that are consistent, provide an interoperability of experience with other offerings, and represent IBM as a company.
Some of this content is accessible to IBMers only.
| Resource | What you’ll find |
|---|---|
| IBM Brand Center | Home base for the IBM Brand story, visual brand elements, guidelines, and assets. |
| IBM Brand Systems | Documentation of the rationale behind every visual and verbal detail for IBM businesses, audiences, categories, and offerings. |
| IBM Design Language | IBM’s design philosophy and principles that govern and guide every experience designed by IBM. |
| IBM Style | A central reference that ensures all IBM content for external audiences is grammatically correct, clear, consistent, appropriate for global audiences, and easy to translate. |
| IBM Experience Standards | Provides a shared definition of our standards at IBM, a way to measure excellence, and actionable ways to improve product or service experiences. |
| IBM Accessibility | Discipline-specific direction on how to make your product more accessible. |
Step 6: Connect with us
Join us and the Carbon community
For IBMers only: If you have a question about any aspect of the kits or tools, you can reach out to us on Slack and use that as a way to connect with your fellow designers. Chances are someone has had a similar problem to you and will jump in to help you out.
And be sure to sign up for the latest Carbon news at #carbon-announcements.
Learn about what we’re doing
You can find out about Carbon’s latest changes and future plans on the Releases page.
If you have questions, here are all the ways to contact us.
Join us at a meetup
Attend one of our meetups to connect with us and level up your skills. The bi-weekly design playback is great for getting feedback on work in progress from a group of designers and design leaders dedicated to your success.
If there’s something in particular you’re interested in, we’d love to hear from you.
Learn about the benefits
Learn more about the benefits of using Carbon as a designer, and how Carbon benefits all members of a product team.