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.
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 at some practical examples of applying the Carbon 10 resources to an existing visual design. The article also shares a new few links to references and 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 of the design, like color, themes, icons, typography, and layout. This article will discuss the application of these principles. Carbon also 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 with 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 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.
The visual design discussed in this article mainly uses gray and blue color values. The grey colors in the design comewith the White theme that we will discuss later. The blue colors come from selected accent colors in the design.
