Day 146 - Creating A Design System • Colors

What is a Design System? This is the question to which I will answer by learning and creating a Design System of my own for a project. But first of all what is a Design System. A Design System according to Wikipedia is "a set of interconnected patterns and shared practices coherently organized whihc aid in digital product design and development of products such as apps or websites".

For most of my projects I use Bootstrap's coloring scheme and sometimes button styles or GitHubs coloring scheme for colors for dark and light theme styling as designing these things for yourself is pretty difficult. Every time I try to create a color pelette for my some project I fail to do so and get someone else's colors for the project becuase if one color looks good but some other does not I change it with a new one but then some other color does not look good with the new one that I have and this continues into infinte loop where the only way to get out of it is to not do it.

But now for some time I have been thinking of doing this once and for all of creating a little Design System for myself and learn something new in the process. This Design System will have following parts.

  • Color Scheme
  • Typography
  • Sizing & Spcaing
  • Buttons & Forms
  • Grid & Layout

Benefits Of A Design System

A Design System can help us by following ways:

  • Single Souce of Truth
  • Time/Cost Saving
  • Increases Consistency

Also I will be making this design system completely in SASS and not in some app like Figma or Illustrator. So I could compile it to CSS and use it in the web project.

Color

First of all come the colors. So there must be a primary color and a secondary color for your design system and after spending some time on the internet I found these ones. From these ones I will be selecting a primary color and a secondary color.

$colors: (
  "gray": #8d99ae,
  "red": #ec4740,
  "green": #28a745,
  "blue": #0087e6,
  "yellow": #ffbd00,
  "orange": #ff6d00,
  "purple": #7400b8,
  "pink": #bf36b4,
);

Tints & Shades

Next we should create tints/shades of these colors. Most of the systems that I looked have 5 to 9 variants of all the colors they have in thier system. To create tints and shades for these colors I use the following functions in SCSS.

@function tint($color, $percent) {
  @return mix(white, $color, $percent);
}

@function shade($color, $percent) {
  @return mix(black, $color, $percent);
}

We loop through the $colors array in the SCSS file and use the above mentioned functions to create tints and shades of the colors. For my colors after some testing I have decided to use the following percentages of tint and shade. You can use whatever you like the most for your colors.

:root {
  @each $color-name, $color in $colors {
    --#{$color-name}-100: #{tint($color, 80%)};
    --#{$color-name}-200: #{tint($color, 60%)};
    --#{$color-name}-300: #{tint($color, 40%)};
    --#{$color-name}-400: #{tint($color, 20%)};
    --#{$color-name}-500: #{$color};
    --#{$color-name}-600: #{shade($color, 20%)};
    --#{$color-name}-700: #{shade($color, 40%)};
    --#{$color-name}-800: #{shade($color, 60%)};
    --#{$color-name}-900: #{shade($color, 80%)};
  }
}

After compiling these I got the following results.

Color Variants

Next stuff will be about Typography.

zainscizainsci