Carbon v10 Release

Robin Cannon
_carbondesign
Published in
3 min readApr 4, 2019

--

We’re excited to announce the official release of Carbon Design System v10.

IBM announced the new IBM Design Language at THINK 2019. The Carbon Design System is the practical application of the philosophy of the IBM Design Language. It’s the official design system for software and digital products at IBM.

Introducing Carbon v10

Carbon v10 represents a total visual overhaul of the design system. It refines the user experience and offers expanded theming and tokenization options.

Core functionality maintains parity with v9. The core components of the Carbon Design System have been updated to v10. We’ve worked to keep breaking changes to a minimum.

The Carbon website provides expanded and more rigorous guidance and documentation. Users should have as much information as possible while exploring Carbon. That includes clear guidance on migrating from previous Carbon versions.

Carbon v10 release summary

  • Carbon has a revamped look and feel.
  • Introduction of Carbon Elements and corresponding guidance. These are the building blocks that make up the Carbon Design System.
  • More guidance around color, type, and layout.
  • A switch to an 8px base unit grid.
  • New themes with added token depth, new type tokens, and revised spacing tokens.
  • Updated perspective on motion. Guidance on micro-interactions and impactful animated moments.
  • Expanded and updated accessibility guidelines.
  • Updated Carbon Design Kit functionality;
    - Available on Sketch Cloud, with library syncing.
    - More configurable symbols for building and theming.

Expanded tooling

The best design systems help design workflows at scale. Carbon’s tooling tries to encourage best practices, while still embracing alternate workflows.

The Carbon Design Kit is now hosted on Sketch Cloud. Users can receive updates without leaving Sketch. Symbols in the kit are now more configurable for building and theming user interfaces.

A design system everyone can own

Carbon is IBM’s Design System. But it’s also an open source project. It’s available to anyone who wants to build with it.

Over the last few months we’ve reorganized our GitHub repositories. Carbon’s code and our issues and roadmap are public. We want the Carbon community to grow and become more involved. That’s the only way we can support Carbon components across vanilla javascript, React, Angular, and Vue.

For information on how to contribute as a designer or as a developer, check the Carbon website.

Start using Carbon

If you’re new to Carbon, start with our getting started guide. It has everything you need to design and develop with Carbon.

If you’re looking to migrate existing projects to v10, head over to our migration guide. It has tools, guidance, and resources for you to get started with v10 today.

We want (and need) your help

Building this system wouldn’t be possible without your contributions, suggestions, and critiques.

Run into any issues or have feedback for us? Please make an issue, or submit a pull request, on our project over on GitHub.

If you haven’t heard of the Carbon Design System before, check us out! We’re the design system for IBM, shipping open-source styles and components in vanilla, React, Angular, and Vue for anyone building on the web.

--

--

Robin Cannon
_carbondesign

Anecdotes masquerading as wisdom. UX Dev Manager at IBM. Texas based Brit. A little bit hipster. I like cocktails. Married above myself ❤. Words my own.