Introducing: Carbon Themes
The Carbon Design System is a series of individual styles and components that can be used to design and build experiences for IBM Cloud products.
Carbon Themes gives developers and designers the ability to customize components within the Carbon Design System. Each teams’ “theme sheet” includes SCSS variables that modify Carbon Components to fit their specific style. These variables range from color, to border-radius, to margin or padding.
While Carbon was initially built for IBM Bluemix, teams have been asking for an elegant way to customize Carbon for their respective products. The challenge for the Carbon team was updating a few key elements of the system to make theming adoptable — beginning with our color palette.
Color naming system
We rebuilt Carbon’s color palette as a set variables. This means that each team can change their palette at a global level to customize the components to their liking. We wanted a naming system that was flexible enough to scale across themes but also hint at the colors’ purpose. Pulling in inspiration from Bootstrap and Base16, we decided on abstracting our naming system for colors.
Each color variable consists of a role (brand, text, UI) and a unique number (01, 02, 03). The role is based on the color’s purpose within the UI, while the unique number is used for that color’s specific role within that area. For example, text-01 is used for the primary text color on the page, while text-02 is used for secondary text.
With this new naming system, we began to be more thoughtful about how color was used within Carbon Components. We identified specific things as core brand elements, such as links and other interactive elements, and mapped the components to our brand-01 color variable. Refactoring the components to include these updated color variables made theming readily available to product teams.
Carbon Theming sandbox
We wanted to give designers and developers a quick way to experiment with color variables and understand how they effect a component. The sandbox allows you to build a custom theme by changing a color variable’s value and then exporting the theme sheet SCSS file. Users can also filter per component, to see as many or as few within the page view.
Building out additional themes
Our goal is to expand and scale Carbon Components to fit the needs of other teams within IBM. The idea that other products are interested in using Carbon as their component library is exciting for our team, and we’re here to support them in any way we can. Moving forward, we plan to add more variables such as text styling and stroke weight to further customize and build out additional themes.
To explore themes and experiment with colors, check out our Carbon Themes sandbox. We would love to see some themes you’ve built using Carbon Components, so send us a tweet of something you’ve made!
Bethany Sonefeld is a Design Lead and UX Designer at IBM Design based in Austin. The above article is personal and does not necessarily represent IBM’s positions, strategies or opinions.
