What is a design system?
A design system provides a unified system for building user experience for applications.
Let's see a few key components of a design system. In this article, we will explore two aspects of the design system.
Color palette
Before we even look at what a color palette is let's see how you define a color. Color is defined as RGB (Red, Blue, Gree) or HSL (Hue, Saturation, and Lightness/Brightness).
RGB — Red, Blue, and Green are called primary colors. Why? That dates back to Newton’s experiment which also originated the concept of the color wheel.
Newton discovered that when the light from three separate parts of his rainbow, the red, green, and blue regions, were recombined they would regenerate white light. He called these the primary colors.
You can generate any color by varying combinations of RGB.
HSL — While color is emitted as a combination of RGB values understanding the color as HSL is more appropriate from human eye perception.
Hue — A color denoted in the color wheel
Saturation — is the intensity of a hue from gray tone (0% saturation) to pure, vivid color (100% saturation).
Lightness — is the relative lightness or darkness of a particular color, from black to white.
Canva has a good tool to see the color wheel and play around. On the circumference of the inner circle is a pure hue. If you pick a point and drag it towards the center, you see every color goes to gray (no saturation). Brightness can be increased (to white) and decreased (to black).
Hue: color (denoted as a point in circumference 0 to 360 degree)
Saturation: Gray ← →Hue (denoted as a percentage)
Lightness: White ←Hue →Black (denoted as a percentage)(denoted as a percentage)
color: hsl(200, 40%, 88%) is same as color: rgb(212, 228, 237)
There are other color models like RYB, CMYK, HSB etc.
Back to the design system. You can define the color scheme for your design system typically using RGB or HSL model. HSL is easier to understand the system as you start with a color and vary its saturation and lightness. While in RGB each shade of color needs to be defined as the value of RGB.
As part of the design system, you define the color palette for your brand. There are various ways to categorize the color palette. Check out Goldman Sachs Design System on what the process looks like to create their color design system.
Typography
Provides visual hierarchy in the design. It is one of the most important aspects of the design system. Primarily it is about defining the typefaces, font-size, weight, and usage.
It is important that Typography defines behavior across different screen sizes (responsiveness).
Typically you define the definition of all heading tags (<h1>…<h6>), body text (<p>), and other various font types and size combinations for various usages like section header, list, caption, forms etc.
Here are two design systems and how they define this.
In the next article, we will see other aspects of the design system — Spacing, Iconography, Elevation, Logos, Illustrations, Layout, and Brand.
If you enjoyed this, please click the 👏 button and follow me for more updates.
