New in Carbon: Data visualization, pictograms, an updated palette, and better grid guidance
IBM’s design system looks better and feels better than ever
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.
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.
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 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.
Because, colors are beautiful
Making an appealing and accessible palette for brand, products, and all experiences.
We also added two color tokens,
$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.