Volvo Group logo

Creating a single design source of truth for digital products

2024-06-13 | 10 mins. | 10 mins.
Jennifer Tendell & Christian Cromnow
When we created our own design system, Kingbolt, it was in response to the organizational challenges we faced, particularly in delivering consistent and user-friendly digital products. In this articles we want to dive deeper into how we achieved coherent design across multiple building blocks. We will explain how we have solved different challenges connected to it — hopefully providing you with inspiration and some tips along the way.

Short summary of Kingbolt

Today, Kingbolt serves as the official design system for Customer Connect (the platform for the digital services we develop). It provides us with a single source of truth for designing and developing user interfaces within the Customer Connect eco-system and contributes to qualitative and coherent digital products — while also making our operations fast and efficient.

 

Kingbolt was created with both developers and UX designers in mind and was made to support multiple brands, each with its own set of colors, typography, icons and more. We describe the system as a collection of these three parts:

 

  1. Guidelines (our website with documentation on how to design UIs, containing guidance and examples)
  2. Building blocks (standardized and reusable components for designers and developers)
  3. Operations (the maintaining and improving of the guidelines and building blocks).

Definition of building blocks

Our building blocks consist of standardized and reusable components designed by and for both designers and developers.

 

Designers benefit from custom libraries featuring advanced functionalities like theme switching using variables and configurable properties aligned with our coded components. These enhancements streamline designers’ workflows, reducing the need for tedious pixel manipulation and enabling a greater focus on solving complex user-centered problems. Additionally, they foster smoother collaboration between designers and developers.

 

For development resources, we offer two React component libraries: one for our web platform and another for emails. By offering the same set of components and patterns to all building blocks it makes it seamless to go from sketch to code and vice versa.

Some examples of building blocks in Kingbolt:

Figma component library (Figma component)
A centralized collection of reusable design elements such as buttons, icons, and UI components within the Figma design tool.

 

Web component library (React, Material UI)
Provides pre-built UI elements and components for web development projects. Leveraging Material Design as our foundation enabled us to rely on Material UI (MUI) as a robust technical framework, while still maintaining flexibility, scalability, and adaptability to our product’s specific context and requirements.

 

Mailkit (React, mjml)
A framework that leverages React and MJML (Mailjet Markup Language) to streamline the creation of responsive email templates. By combining React’s component-based architecture with MJML’s markup language designed for email, Mailkit simplifies the process of designing and coding emails that render well across various email clients and devices.

 

Design tokens

The reality we were facing was that sometimes changes are made to guidelines that affect the design of graphical components and it can affect several building blocks. So, we needed something to help us sync, align, and maintain design across all parts of the system. Enter design tokens.

 

Design tokens in general
The concept of design tokens has existed for several years and are now used in most modern design systems. To create a single source of truth for design that can be applied to all building blocks, you extract all “design properties” (colors, fonts, sizes etc) and replace them with variables that can be defined as a set of tokens.

Updating design tokens will automatically update all building blocks.

 

Kingbolt design tokens
As mentioned, Kingbolt is created to support multiple brands with their own sets of colors, typography, icons etc. Most of the design tokens are straight forward (e.g. a title for a brand should use font X with font size Y). Others, such as colors are more complex. When using one color in combination with others (e.g. text/icon on a background), some combinations may not work due to low contrast ratio. Therefore, it can be challenging allowing a brand to select their colors as part of their brand profile, while also making sure the selected colors will work when used in all components/scenarios.


Our solution for this was to combine “Dynamic color creation” with parts of WCAG — a set of guidelines created to make web content more accessible to people with disabilities.


Let’s break it down:

Dynamic color creation
Instead of picking colors one by one and individually making sure that each combination is “readable”, we introduced dynamic color (tone) creation from Material design.

Each brand selects the following 6 base colors:

· Primary; Accent color
· Secondary; Interaction color
· Semantic colors; Information, Success, Warning and Error

 

The colors are used to create color scales with tones that are lighter and darker than the base color, as well as the color combinations.
Read more in-depth about the material design 3 color system here.

The picture above shows a base color (marked with a star icon) and its complimentary tones as well as 8 combinations with their respective WCAG color ratio.

 

WCAG (Web Content Accessibility Guideline)
WCAG currently consists of 13 guidelines. For each WCAG guideline, there are testable “success criteria”. For colors (contrast) the success criteria are that each combination should have a contrast ratio of at least 4.5:1 (AA, Small). The contrast ratio is a measurement on a scale from 1 to 21 where 1 is not visible (e.g. white on white) and 21 is highly readable (white on black and vice versa).

Find the complete set of WCAG guidelines here

 

Creating our color design tokens
The WCAG color ratio calculation is purely mathematical and doesn’t consider “perceived luminance”, that certain colors are more “luminant/brighter” than others.

You can see that blue has the lowest and yellow has the highest perceived value.

Therefore, we used HSL (Hue, Saturation, Lightness) based colors together with WCAG contrast ratio scores to generate color scales and combinations that fulfills the “readable criteria” while preserving as much of the original color as possible.

 

It’s necessary to mention that even though this strategy helps us to automatically find the best “tones” to use, some colors aren’t suitable to begin with (e.g. very dark/light colors may not generate enough distinguishable tones for the dynamic color combinations).

 

Using design tokens
There is no standard format for design tokens, all systems that we have looked at or integrated with have their own format/structure. In order to support all variations, we have used a library called Style Dictionary to transform our tokens into any format.

 

Some examples of transformers we have created:

  • Figma; Transformed into “Variables”.
  • Material UI; Transformed into MUI Theme (used in our web library).
  • Zeroheight; Transformed into zeroheight design token format.

What helped us create Kingbolt

When creating Kingbolt, we looked at existing design systems and reviewed several standards before selecting what we now use; those with high success rates that were already proven to work. We couldn’t have done it without a number of third party products and libraries that were crucial in the making of Kingbolt:

  • Material Design: One of the most comprehensive design documentations that exist today.
  • Zeroheight: A content management system specifically made for design systems.
  • Figma; Web based UI design application for creating components, sketches and more.
  • Material UI: React UI component library that implements material design.
  • Storybook: Library for creating code examples and documentation.
  • Style Dictionary: Library used for maintaining design tokens.

 

Summary
The reason why we decided to create our own design system was to create coherency in the design across multiple products that previously looked and felt different and were written in different languages. Our solution with different building blocks makes sure that everything follows the same pattern and logic and in this article we have described how we managed to maintain that common thread across the building blocks using design tokens. Meaning, if you change something at top level, all components change with it. Thanks to the building blocks, we don’t have to start from scratch all the time and designer’s sketches can easily be translated into code — and vice versa.

Author Bios:

Jennifer Tendell: Software engineer in UI Framework and Kingbolt. Loves bringing applications to life with animations and colors. Has been at Volvo Group Connected Solutions for two years. Spends most of her spare time on gaming and arts and craft.

 

Christian Cromnow: System Architect specializing in UI Frameworks. With a background in redesigning and reimagine systems both from a design and architectural perspective. Has been at Volvo Group Connected Solutions since 2017. Video game-enthusiast and takes great pleasure in “finding things out”.

 

Do you want to connect with Jennifer? Check out her LinkedIn page here.

 

Do you want to connect with Christian? Check out his LinkedIn profile page here.

Join the community and receive regular updates and invitations to #tecHER events.

Sign-up for #tecHER