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.
What’s new
Data visualization
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
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.
Color
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 guidance
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.
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@us.ibm.com.
