Carbon Design System is a complete set of visual, user experience, and code guidelines and standards for the IBM Cloud platform and the more than 120 services offered on the platform.
The visual design kits enable an efficient design process by providing Sketch components for reuse, and the Carbon Design System website provides user experience guidelines, redlines, and interaction examples to help each individual product within the product portfolio feel cohesive with the entire IBM Cloud platform. In parallel to the visual and user experience guidelines, a complete front-end code kit is provided to help speed along the development process.
The combination of all three assets enable product teams to focus on how a user converses with software, rather than arguing over details like what color or how big a button should be.
What business problem does the project address?
The primary challenge Carbon Design System tackles is IBM Cloud’s unique situation of scale. IBM has more than 2,000 products in its portfolio, but each product experience should look and feel like IBM across the board. At the corporate level, the IBM Design Language provides guidance on how to communicate the IBM brand promise and creates a basic framework for how all IBM products should look and feel (with assets like a sweeping color palette and iconography), but it doesn’t dive deeply into how that look and feel should be translated into the individual product interface.
With the Carbon Design System, we took the IBM Design Language framework one step further to craft a design system for IBM Cloud that fits with the parent IBM brand, but can also scale over the breadth of our client services. This provides our users with a sense of security as they move through our products and experience a cohesive look and feel through branding, visuals, and interactions.
Visual cohesiveness was also a major challenge in the mergers of SoftLayer and IBM Cloud. Carbon was able to bridge this gap by developing a light theme that brought the two UIs from a dark (IBM Cloud) vs. light (SoftLayer) separation to a shared light color palette meeting component requirements from both sides. We are continuing this work (with the help of a few other teams) in a React repo that allows the SoftLayer team to make full use of the components and bring a seamless experience with it. This theming effort has also allowed us to branch out and work with the IBM Watson team to create a specific theme for their needs.
To foster adoption of the system from so many disparate teams, ease of use and implementation is mandatory, as is taking feedback from the hundreds of architects, designers, developers, and offering managers who need the system to work for their products. Without their contributions, Carbon Design System would not exist.
Why should I contribute to Carbon Design System?
Contributing to the Carbon Design System has been as beneficial for our users as our team members. Community members have contributed everything from design edits to user research to high-level components to an entire framework library.
When you contribute to the Carbon Design System, you directly impact the UI of the product you’re working on while being part of a greater community and code effort. For developers, you can learn a different framework by adapting components to React or Polymer from vanilla JavaScript.