Carbon Design System

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. We no longer maintain or support the libraries in Sketch, Adobe XD, and Axure, but you can view the w3 Apps Software Licenses page to see license availability for these design tools if needed. We recommend you migrate to Figma to get our most updated kits.

Get Figma

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 All themes	UI
	v11 Gray 10 theme [Deprecated]	UI
	v11 Gray 90 theme [Deprecated]	UI
	v11 Gray 100 theme [Deprecated]	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. 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.