Robot shrugging (maybe?)
Robot shrugging (maybe?)

New in Carbon: Data visualization, pictograms, an updated palette, and better grid guidance

IBM’s design system looks better and feels better than ever

Tyler Tate
Oct 10, 2019 · 3 min read

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

It’s been about six months since the release of Carbon 10.0. The bulk of our work since that time has been reactionary. We’ve received mountains of feedback from teams migrating to the redesigned system, and we’ve discovered countless places where we can expand, improve, and polish.

We’ve invested heavily in improving the stability of our components and the quality of our documentation, and our community reacted positively to the work we’ve done.

Carbon 10 is now moving into the second phase of its development — a phase revolving around expansion and a march towards providing a complete design system.

What’s new

We’ve been rebuilding, redesigning, and testing our data visualization packages for months, and we’re excited to announce they went live last week. An eye to beauty, clarity, and accessibility drove the data visualization effort, and we’re excited to be delivering it in all four frameworks supported by Carbon. You can check out that work on the Carbon site.

Color gradient usage for data visualizations.

Pictograms are live! We shipped carbon/pictograms with this latest release, which is just the latest expansion of Carbon’s packages. You’ll also find new pictogram guidance on our website.

The connect pictogram shown at different sizes.

The IBM Design Language color palette got a lot of love over the past few months. While the differences are slight, the updates dramatically improved the accessibility of our color palette when used in digital products.

You can read more about those palette changes in Shixie’s blog post.

We also added two color tokens, `$danger and $text-05, to better support danger text and tertiary text.

Grid systems are difficult to understand, and Carbon’s is no different. We just published completely revamped documentation to help you better understand our grid and how to apply it with type, components, and images.

The page includes live demos and product layout examples for various scenarios. Give it a read and let us know if there’s anything else that’s not quite clicking — we’re all ears.

The 2x Grid overlaying a page layout to show alignment.

Psst… It’s Hacktoberfest, and Carbon is getting in on the action! Help us build the system, and contribute to open source projects across the web — we’ll even send you a free shirt.

Special thanks to Josefina Mancilla for helping lead this Carbon release and Connor Leech for helping draft this post.

Check out our projects on GitHub! We’re always looking for contributors. If you have any questions or comments about the Carbon Design System, please reach out at


Carbon is the design system for IBM software products.

Thanks to Connor Leech

Tyler Tate

Written by


Carbon is the design system for IBM software products. It is a series of individual styles, components, and guidelines used for creating unified UI.

More From Medium

More on Carbon Design System from _carbondesign

More on Carbon Design System from _carbondesign

Seven new UX patterns for Carbon

Jan 9 · 2 min read


More on Carbon Design System from _carbondesign

More on Carbon Design System from _carbondesign

The 2019 rewrite of Carbon Charts (and migration instructions)


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade