Introduction

Want to get a modem, consistent and great looking sparking user experience and visual design? Why not take a look at the latest version 10 of the Carbon Design System with guidelines and resources from the IBM Design Language.

“Carbon is IBM’s open-source design system for products and 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”

This article presents a practical example of some of the highlights in the Carbon Design System and brings a pragmatical approach to a modernization task. In this example I use my rather simple portfolio website to apply Carbon-styling to an existing interface. I also demonstrate some of the basic elements of Carbon to help you get started.

First we will overview some of the Carbon Design System basics like colors, icons, typography and layouts. We will then look some practical examples of  applying the Carbon 10 resources to an existing visual design. The articles also shares a new few links to references and to reusable LESS/CSS and Sketch resources.

Great, let’s look at how Carbon can provide a foundation for a sparking carbonized design.

Carbon Design System and the IBM Design Language

As mentioned above, Carbon is an open-source design system built from the following guiding principles

  • Open for anyone to use and contribute
  • Inclusive of all, regardless of ability and situation
  • Modular and flexible in use
  • Putting the user first
  • Builds consistency by ensuring a consistent experience

The Carbon design system includes guidelines on the principles on the design, like color, themes, icons, typography and layout. This article will discuss the application of these principles. Carbon alos provides set rich set of key component building blocks designed and coded for a specific UI problem or purpose. The 30+ components and the principles are designed to seamlessly interact into the bigger consistency of the experience. The components are provided in the Carbon Design Kit, including Sketch libraries and React and Angular UI components. Additionally, Carbon also provides patterns as best practice experiences as combinations of components that address common user objectives with sequences and flows, like dialogs, notifications, filtering and search. 

In this article my focus will mainly be on the experience and visual aspects of applying Carbon.
To explore more on the Carbon Design Kit resources, visit www.carbondesignsystem.com.

Colors

The selection of colors creates uniqueness. Carbon provides a balanced and harmonic color anatomy. Colors are provided as base color palettes, themes and as tokens for a consistent user experience.

Let’s start with the color palettes. Carbon defines a natural gray and 7 color families; Green, Teal, Cyan, Blue, Purple and Magenta. Each color family is given as 10 values, ranging from light to dark colors, for example Blue-10, Blue-20, .. Blue-100. Additional single action colors values are provided in Red, Orange, Yellow and Green. The Blue and Grey color palettes and the corresponding HEX color codes in LESS syntax for Blue are shown below.

Carbon Design System – A Practical Example
@blue-100: #051243;
@blue-90: #051b75;
@blue-80: #0530ad;
@blue-70: #054ada;
@blue-60: #0062ff;
@blue-50: #418cff;
@blue-40: #6ea6ff;
@blue-30: #97c1ff;
@blue-20: #c9deff;
@blue-10: #edf4ff;

The visual design discussed in this article mainly uses gray and blue color values. The grey colors in the design comes with the White theme that we will discuss later. The blue colors comes from selected accent colors in the design.

Carbon Design System – A Practical Example
Portfolio home page with Carbon blue colors.

Themes and Tokens

Carbon uses tokens and themes to manage color to achieve a consistent experience and visual design. There are two light themes and two dark themes; White, Gray 10, Gray 90 and Gray 100. The design in this article is using the White theme.

To achieve a consistent experience, Carbon defines tokens as code identifiers for a unique role or set of roles in the design. Tokens are universal and identified by a name consistently used across the themes. For example, a page background is defined by the `@ui-background` value. In my White theme this takes the value `#fffff`. In the dark Gray 100 theme it would take the value `#171717`.

There are multiple other roles defined for the experience. For example primary, secondary, and tertiary buttons. Backgrounds for primary, low and high contrast containers. Primary, secondary and tertiary texts, and texts for error messages and links and hovers. And the list goes on … Check the details on www.carbondesignsystem.com/guidelines/color/usage.

In applying the Carbon White theme I used a LESS stylesheet that defines the colors and tokens, and sets the values for the White theme used in the design. A code snippet of the LESS definitions are exemplified below. The portfolio design example discussed in this article, mainly uses the ‘ui-background’, ‘text-01’, ‘link-01’, ‘ui-01’, ‘ui-03’ and ‘interactive-01’ tokens. 

// Core color tokens
@ui-background: @white; // Default page background.
@interactive-01: @blue-60; // Primary interactive color. Primary buttons
@interactive-02: @gray-80; // Secondary interactive color. Secondary button
@interactive-03: @blue-60; // Tertiary button.
@interactive-04: @blue-60; // Selected elements. Active elements. Accent icons.
@danger: @red-60; // Danger button background.
@ui-01: @gray-10; // Container background on @ui-background. Secondary page background.
@ui-02: @white; // Container background on @ui-01. ‘Light’ variant background.
@ui-03: @gray-20; // Subtle border. Tertiary background.
@ui-04: @gray-50; // Medium contrast border.
@ui-05: @gray-100; // High contrast border. Emphasis elements.

Layout and Spacing

Carbon defines a spacing scale useful when laying out individual components. It includes a range of large to small increments to create the appropriate relationships for detail-level layout designs.

@spacing-01: 2px;
@spacing-02: 4px;
@spacing-03: 8px;
@spacing-04: 12px;
@spacing-05: 16px;
@spacing-06: 24px;
@spacing-07: 32px;
@spacing-08: 40px;
@spacing-09: 48px;
#portfolio-headline {
background: @ui-01;
color : @black;
margin-top: @spacing-05;
}

#portfolio-headline-name {
.expressive-heading-05();
margin-bottom : @spacing-05;
}

#portfolio-headline-quote {
.expressive-heading-03();
}

Here I find the that using Sketch with the Carbon library to come handy when creating and testing the carbonized design. The layout can be defined using spacing components that guides the implementation of margins and padding’s on the individual components on the page designs. The design below shows the layout in Sketch of the home portfolio page with inserted Carbon `@spacing-09`, `@spacing-07` and `@spacing-05` spacing’s. The Sketch design guides the final coding of the styling using the LESS stylesheet declarations implementing the component spacing’s.

Typography

Carbon uses type tokens to define the typography. A type token is a pre-set style with typographic elements such as font size, weight, and line height. The typography is calibrated for use with the open source IBM Plex typeface.

Download IBM Plex from the IBM Plex Github Repo. github.com/IBM/plex

IBM Plex is also available directly for use through Google fonts.

Carbon defines typographies for two situations. A Productive typography for product and web designs. The Expressive typography for web, graphic and print usage extends the Productive design with a more dynamic typographic hierarchies and more variety with a fluid Heading scale. My carbonised design portfolio will use the Productive design typography.

The Carbon design kit provides the type tokens in the Sketch library. The type tokens can be defined in LESS to simplify the style coring.

.body-long-01 { 
font-family: 'IBM Plex Sans', sans-serif;
font-size: 14px;
line-height: 20px;
font-weight: 400;
letter-spacing: 0.16px;
}

.body-long-02 {
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
line-height: 24px;
font-weight: 400;
letter-spacing: 0px;
}

Responsive design

Carbon defines fluid types for headings using 5 breakpoints across screen widths. The LESS definition uses these breakpoints in the header type definitions to implement the fluid types.

@sm: ~"(min-width: 320px)";
@md: ~"(min-width: 672px)";
@lg: ~"(min-width: 1056px)";
@xlg: ~"(min-width: 1312px)";
@max: ~"(min-width: 1584px)";

.expressive-heading-03 {
font-family: 'IBM Plex Sans', sans-serif;
@media @sm {
font-size: 20px;
font-size: 18px;
line-height: 26px;
}
@media @md {
font-size: 20px;
line-height: 26px;
}
@media @lg {
font-size: 20px;
line-height: 26px;
}
@media @xlg {
font-size: 20px;
line-height: 26px;
}
@media @max {
font-size: 20px;
line-height: 26px;
}
font-weight: 400;
letter-spacing: 0px;
}

Icons

Carbon provides a super-rich set of icons and pictograms for visual design consistency. Check out the icons at www.carbondesignsystem.com/guidelines/icons/library. Using icon library you can view and filter and then download the icons you need directly from the library.

Carbon Design System – A Practical Example

In the Carbon design example I only use a few icons from the library for page browsing, downloads and social media. The Up Right Arrow icon is used to indicate a navigation link to related articles. The Download icon for shared file based material.

Putting it all together

We have now explored some of the fundamental visual elements of the Carbon Design System; Colors, Themes, Spacing, Typography and Icons. Note that Carbon Design System provides many more advanced elements for web, product and digital designs, like Components, Patterns and Data Visualization. View it all on www.carbondesignsystem.com.

Let’s close this article with a few conclusions, examples and references on how to get this all together into a carbonized design. I find that Sketch and the Sketch library available with Carbon  provides a great help in expressing, specifying, and testing the design. Down to a pixel perfect implementation. The Carbon library provides direct selection of the design elements like colors and components directly in the Sketch tool. Using a LESS stylesheet, in combination with an any existing CSS / LESS stylesheet from an earlier design is a great way to incrementally lay the carbon design over en existing implementation. Then drive additional style changes or redesigns from there. All in all, the experience becomes guided, practical and productive. And providing a consistent experience.

Carbon Design System – A Practical Example
Portfolio project page design using the Carbon library with theme tokens. Carbon layout and spacings included in the visual design.

A few simple examples of designs of portfolio, project, article and session pages are provided below. These designs use Sketch and combines the definition of LESS/CSS and Carbon theme style classes for each design element. It also defines the layout using the Carbon spacing sizes in units of 48, 32 and 16 px.

Carbon Design System – A Practical Example
Portfolio page design using the Carbon library, theme tokens and LESS styles.
Carbon Design System – A Practical Example
Projects page design using the Carbon library, theme tokens and LESS styles.
Carbon Design System – A Practical Example
Article page design using the Carbon library, theme tokens and LESS styles.

Carbon Design System at and across enterprise scale

Carbon is IBM’s official design system and serves a wide range of designers and developers building digital products and experiences. View examples of applying the Carbon Design System to enterprise scale product, digital and event designs at IBM on carbondesignsystem.com.

Carbon is the foundation and design language for product design of AI application and Internet of Things at IBM. The two examples below exemplifies the use of the principles discussed above, and the use of components and patterns from Carbon Design System in IBM Maximo Asset Monitor product designs.

Carbon Design System – A Practical Example
Example design of a resource page using Data Table, Pagination, Buttons, Breadcrumb, Date Picker, Search, and the UI Shell components from Carbon 10.
Carbon Design System – A Practical Example
Example of a dashboard page design using Carbon data visualizations.

 

Visit my portfolio at design.gothe.se for additional exemplifies in the use of Carbon in our product design of AI applications and Internet of Things at IBM. And look luck in creating web and product designs using Carbon.

Mats Göthe, PhD
STSM, Senior Design Lead
Maximo Asset Monitor
AI Applications, IBM



Download Carbon 10 LESS stylesheet

 



Download Sketch file