 In particular businesses or websites, you'll find that they have a consistency in color, in typography, because that's the way it was designed from the start go for the business coming from the logo, the different things provided by the graphics designer. This is what we call a design system. So in the design system, you are allowed to have a particular font for maybe the header ones, header tools, the body text, the buttons in the active state, in the deactivated state. You have defined colors and defined ways they should be exhibited. Let's see how we can use this in Elementor to make sure that our website follows our brand guideline. The way we use this with Elementor is by going to the styles, going to the site settings and we choose the global colors. So with these colors that are available, I am going to try to mimic what we have for a brand guide. Here I have a header of sort and I am going to choose to name this to be the header line. And I would choose to say this is the color for the body, body text. This will be the color for the buttons. And since I don't need these others, as I come here below, you'll see that I am able to delete the small pieces of data. So I'm going to take these away so that I can stick to my brand guide and not mess up in any way. We are ready with this, so this is what we're going to choose. So you can see that we have a button here which is color green and it's because it's connected to the accent. Our header here is actually connected to the header line color that we do have here. So if I choose to change this into a different color, instinctively Elementor will know that I'm trying to change the header line color that has been connected here. So it will change it automatically here and I can update this and save this. So let's imagine we had different headlines across our website and we wanted to change the color because we've changed our brand guideline. All I would need to do is come and check on the color that was clearly connected before and just change it. Or maybe if I wanted to change the buttons, it would also apply in something similar. So I can change this with just a click of a button and would be ready to move to the next project. So let me show you by adding other content here and then we'll see whether that will be true for all of them. So we have another header line, connect some text here, then I'll connect another button here. You'll see automatically that globally as I add them, they're following the different guide that we've always had. So if I choose to change the buttons color, come to settings, go to global, change the buttons. I can give them maybe a green and that would be the new color of our green. And you can actually type in a hexadecimal value and just go for BA, DD, A, E and you have that showing up. So that's how Element allows you to work reducing the workload that you do have and making it very simple for you to have inside the global settings here in version 3. Now, just like we did for the cameras, we can do it for the phones. We can decide to set up a primary font for our headers and we can choose a size. Maybe we want to choose something that's either pixels, EMs, rims and view heights. Now, this depends on what kind of gadget you're going to use. So you can use pixels to have it static and remain the same size even though you go on mobile or if you go on tablet, it remain the same size. However, you can have what we call relative sizes. Those are the EMs or the rims if you choose to have. So we have EM rims and view heights which follow the guidance of the size of that gadget that you're using. So for example, on desktop, we can have a 2.6 view heights on a desktop. But when we go to tablet, it reduces further and if we choose to go to mobile, it even becomes smaller because it's responding to the size of the screen. So these 3 pieces that we do have EMs here allow you to do that so that as you scale up from mobile to desktop, your site is becoming much more accessible and readable and more legible on the different screen sizes that you have because you cannot determine what kind of screen that as a user are going to have. But with Element, it allows you to do this just straight out of the box. So you can set the typography, you can change the weight and say I want this a little thicker. You can say I want to have them always capitalized or I can have them in uppercase. So you can also change the style and have them slanting in oblique and you can always underline them since they are your headers. So give them a different line height and spacing and this is what will be across your site every time you add in a primary header. Let me save this, come back to our widgets and then I'm going to drop another header right here. And you will see that it attracts the same color, the same font. Everything is just similar to what we have here and that is by setting the global fonts. So the same thing can happen to the body text. You can change it and have a different body text with different sizes and different weights and transforms. So that's how you can change. We can also do it for our buttons and say we'll have the same font for the buttons but give them a different size or words and font and line height so that our buttons all look identical across our site. Whenever we add a new button it is actually that same color and that same behavior. So that's what we can do with the global fonts inside our design system. Now you might want to handle the different pieces individually for example in the typography you might want to handle the body text by checking the color and editing the typography that it should be or you might decide to do the links the different headers from one all the way to six and you can impact on the color and the typography and choose it to make it like how your design system has set it out to be or it could be the buttons that you want to set up and show how they act when they are normal or how they are when you hover over them and you can make all these settings even for the images or for the form field. Now there is one caveat to using the theme style section here you need to actually deactivate the global fonts and colors in the settings page and this settings page is right here when you click on this text it's actually linkable all you need to do is come and disable the default colors here and also disable the default fonts and once you save that then you will be able to use what you have set here inside as the theme style onto your website so that's how you work with the design system inside Elementor if you enjoyed this video please give it a thumbs up share it with your friends like it or subscribe to the channel if you haven't yet subscribe to it enjoy your day