Migration guide

Carbon v10 delivers the IBM Design Language to product teams. It represents a complete visual refresh of the system, delivering the ethos of IBM Design. Carbon v10 is a modern, open-source framework for building digital products and experiences, with tooling and guidance on color, layout, typography, iconography, motion, patterns, and content.

All components, colors, icons, typography, motion, and grid elements in the kit align with the IBM Design Language.

Designers can subscribe to the design kit library via Sketch Cloud, and updates to the contents of the kit will be pushed to subscribers as they become available.

To access the IBM Design Language icons, pictograms, and colors, subscribe to the IBM Design Language libraries.

Upgrading to the v10 kit will not automatically change any files created in previous versions of the kit. Swapping v9 symbols for v10 symbols is a manual process.

Although libraries from multiple versions of Carbon can exist in Sketch at the same time, you should avoid using v10 symbols in an app designed with v9.

Head over to Design kits to set up the new Sketch libraries.

Carbon offers four color themes. See the theming guidelines to learn how to use the themes, and visit the color migration guide to learn more about color tokens added in v10.

The icon library was updated and expanded with v10. The full library of icons and pictograms is available via the IBM Design Language icon Sketch library.

Any v9 icons should be reviewed against the new icons before publishing. Wherever possible, replace old icons with an updated version.

The typeface for Carbon remains IBM Plex. The type token architecture was redesigned for better clarity and flexibility, moving from a basic type scale model to a more robust token-based architecture. Work with your development team to discuss how this new architecture might affect your team’s workflow.

Carbon v10 adheres to IBM Design Language motion standards, designed to bring unity and cohesion to all motion in a user interface. All interactions that include motion should abide by these standards.

Carbon v10 uses the 16-column 2x Grid. Carbon v10 will default to the 12-column grid with an option to switch to the 16-column grid. Designers starting on new layouts using v10 should use the 16-column grid.

Layout and spacing token names were updated in v10 but the values remain the same.

The fastest approach to v10 migration starts with the front-end developer. Developers should update the product’s front end code to v10 and conduct a visual review with team designers. The transition should not cause any major breaks in the UI but there will likely be layout and color issues. Product teams using v9 components in their code should see a mostly seamless code transition.

Throughout visual review and iteration process, ask:

Following this review, work any development and design issues into your team’s planning workflow.