Step 10 - The Design System

[00:00 - 00:18] And now let's go to step number 10, which is a design system because this looks great. This is also some very good information, but we need some more details on how to use it actually in our app.

[00:19 - 00:25] This was the final and most important output of the plan page. Now there is one more step, as I told you.

[00:26 - 00:33] And as I've been saying, I've been experimenting with this so I'm on extra stuff. I did not this stuff until very recently, the final part.

[00:34 - 00:48] So this should be the final part until now. So this takes into consideration everything we discussed before, which is also a big reason why we discussed them in the first place.

[00:49 - 01:13] And it creates components and guidelines for every part of our application. So it will tell us what the button should look like when active, disabled, loading or secondary, what fun to use for its heading, body and that what size, what's best to use between components, the color palette with exact codes for every part of the app, and more.

[01:14 - 01:24] So the prompt here is again very simple. Now you shall make it a design here, what is up?

[01:25 - 02:01] And if we place it in, we get a complete design system. So this is our color palette, color primary, color secondary for CPA contrast, title focused color deep column, light background, color background, primary label text, secondary label text, input borders validation, dark background, color text light, survey dark, or spacing for each or spacing general depending on the screen size, let's go up here.

[02:02 - 02:32] Now, as you saw, some of the stuff we already have, we already know, for example, what wants to we want to use, but now it's in much more detail, what heading should have, what size, what weight and what font, and how it would look on any screen type, etc, etc. So it takes everything that we created before hunt and enhance it massively.

[02:33 - 02:47] We have our input fields, we have our cards, everything in great detail. And we have a lot of stuff here.

[02:48 - 03:16] Again, these might seem overwhelming, because normally in the past, you would have to take this and just start implementing based on this. So you would have to keep it in mind, keep it next to you, maybe in a pretty dark document, and whenever you build something, you would have to go back and read the design system to make sure you are doing it right and persistently.

[03:17 - 03:27] In this workflow, we want how to do that, and because we have a tool that will do that for us. But this will be on the next workshop.

[03:28 - 03:29] For now let's go to our final step.