Working with IBM Carbon Design
The 1st part in a series in a new designer’s experience with using open-sourced design systems
It’s almost as if TRON from 1982 were a design system- in the good way.
IBM was founded in 1911 and has grown to employ more than 400k employees in 170 countries. Notably, the oldest computing company in the world, IBM, started with the tabulating machine. Over the years, IBM has given the world typewriters, floppy disks, PCs, printers and has been at the cutting edge of AI and gaming hardware. Currently, IBM is a CS research company in 2020. No more hardware, no flashy phones, and no dope cutting edge glasses- just world-renowned, Nobel prize-winning research. So what does this have to do with their design system Carbon, an evolution of Design Language? Everything looks exactly like what a user would expect from a company that creates clean, sleek information delivery vehicles.
First, it’s worth noting Jeoff Wilks, Director of Product Management, has some interesting notes about his design system in an article for Adobe (ironically enough, not compatible with Carbon Design). Carbon is open-sourced and is available to the public. Still, the goal was for IBM’s 400k employees to adopt a system without being forced. In other words, I can use it, I can build a website or app with it, but it’s not really for me.
I want to look at a few aspects of this design system across a few key areas; comprehensiveness, ease of use, accessibility, versatility, tutorial support, and examples in the wild. The above does not capture everything, but I look for these things in a design system when learning a new one as a new designer.
Comprehensiveness: YES, VERY, 10/10. This system is exceptionally comprehensive. From grid guidelines to icons, Carbon has it all — but the key to any design system is not too much. They created a typeface called Plex, an intentional throwback to Westminster, an excellent icon family, and a classic blue-tone color pallet. A study in classic IBM iconography.
As mentioned above, Carbon is not a versatile open-source design system. If I was tasked with creating an eComm shop with Carbon, I might struggle. Carbon generally lacks softness and doesn’t have an inviting nature. But that’s not really what it is for. If I were asked to create a medical interface with a trusted, scientific, and cold feel, Carbon would be my first stop. Also, I would love to see what an interaction designer could do with Motion because it appears relatively limited in its current iteration.
Ease of use is a double-edged sword. The UX for the end-user was considered at every step, which, in my opinion, is the whole point. But the flip side is a very robust backend for the UX/UI designer. First, Carbon is only available on Sketch. After speaking to an IBMer, I found out that Carbon is only available on Sketch due to licensing limitations (always a consideration with a massive conglomerate). This Sketch caveat also means Carbon is only available to Apple users.
As for downloading and diving in, Carbon takes a bit of time to learn, but their website shows the basics of design through Carbon’s lens, frames, grids, buttons, and design rules on their website. For instance, I’m still looking for icons to mockup a bottom nav for my daily UI.
Accessibility is key to any decent product. Carbon gives the designers the tools to make the right decisions according to 508 & WCAG guidelines and is linked to automated testers. Automated testers can’t be trusted to catch everything. Still, if the designer uses Carbon’s accessibility rules from the jump, they should be in good shape.
*IBM has an intra-office automated tester that you know has to be top-notch. Not open to the public, though.
Versatility — I feel that was covered above, so I’m going to jump into tutorial support. Herein lies the major stumbling block for this open-sourced design system- access to experts using it. I must follow a million designers on Youtube that have taught me everything about, Sketch, XD, Photoshop, After Effects, Illustrator, Figma, Axure, Excel, dieting, grammar, interview prep, folding a fitted sheet, you getting the point? When people of my generation want to know something, they look for a video on how to do it. Carbon does have a video series on Youtube, and it is relatively limited. I would say Carbon is for the advanced fullstack developer and go about my merry way. Still, it is open-sourced, and there are attempts at explaining the system to everyone. I also had a pretty hard time finding a non-IBM Carbon interface to use as an example.
Plug and play is the goal, but some of us need more plug>tutorial>play to get going. Carbon is great because it is focused. It is also vast — how can it be both? Little tricks like typography, line weight, color, and templates (ya know designs system stuff). That’s how Watson AI and Hybrid Cloud divisions and some 2000 other patents IBM has; share a visual continuity. Download and play — but before that, thoughts?
