How to Use IBM's Carbon Design System (React) to Create a Quick UI
When you get to building your web application’s UI, it can be handy to work with a design system. This allows you to rather effortlessly create quick and responsive interfaces, that generally have properties (props) defined in them that allow you to also generate your UX. An extremely popular design framework is Google’s Material UI. However, another not as well known, but nonetheless full fledged design system is IBM’s design system, Carbon.
Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its foundation, the system consists of working code, design tools and resources, human interface guidelines, and a vibrant community of contributors.
The system is built for developers to use either React, Angular, or Vue. The site carbondesignsystem.com has all their components completely open source, design guidelines, color palette examples, and tutorials. The IBM color theme which primarily incorporates offset whites, multiple shades of blue, and of course carbon black, was the inspiration for SocioProphet’s design theme.
While SocioProphet no longer uses any Carbon components, or any part of the Carbon Design System, it was an extremely useful starting point. So, I’ll explain how to get started using Carbon in you React project, and give an example of the simple interface we created to begin with!
