Case Study : Design System. Hi readers, a new day with a new blog… | by Avishek Nayak | Dec, 2021


Step 3: Creating design foundation.

As of now, we have everything ready, so let’s start with the design foundation. It will consist of colors, typography, grids, styles, shadows, and icons.

First comes the typography. Here, typefaces need to be picked. What typeface, how much font size, and what should be the weight of everything.


Next come the colors. Separating and dividing it on the basis of its usage property. Here in this product, blue is the dominant color, so it will be included as a primary color. Moreover, call-to-action buttons’ colors are also included in the primary colors.


The website should be aligned properly so that its grid should be followed.


Websites not only contain text but also icons in different pixels.

The website also contains drop shadows and border strokes.


Finally, the assets arrive. Assets are basically the images, logos, and PNGs used on websites.

Assets of the website.

Here, our design foundation comes to an end. This is all created as a component and stored in the library for further use.

Now comes the part of creating master components. If you don’t know what the components are, no worries my friend, I will explain that too.

Source link

Leave a reply

Please enter your comment!
Please enter your name here