"Well, here we are in the Colours area, which you can access by the main menu. Go down to styles and then you can see Colours is the second tab along. And what you'll immediately notice is these three swatches that we used in the onboarding to get your Theme off to a flying start. So they were main, neutral and accent one. So what we're going to do now is update all of these swatches and then use the bot to go and populate it right the way around the website. But before we do, I'm just going to show you a couple of quick things to note. You can see here neutral, I put some emphasis on neutral in the onboarding as opposed to white. So white is absolute white, which is six Fs, and then we have a neutral, which is an off-white. Well, let me go and show you a cool example of why it's important to have these two swatches.

So I'm going to go over to the Alio Theme, which I'm going to be designing through the five day challenge, and you're going to see how I make all of these Layouts and you'll be able to do the same yourself. Well, here you can see we've got absolute white and our neutral in the background and it has this shadow effect which makes for a really cool look. So this is just one example of how we use white with an off-white and neutral. And you can see here on this particular Layout, bit of parallax motion in there as well, which you'll be learning. So this is why I don't want you to use two whites. I see that done a lot and it kind of ruins your ability to do cool stuff in the five day challenge. So what I want you to make sure is that you've got an off-white in here. And also you'll see this text and divide a Colour.

Well, text is obviously the Colour of your text and divide a Colour is often these separators which are a middle gray because the divider Colour works on both the darker background in the dark Theme and also on the lighter Theme. So if you're unsure with neutral, text and divider, what I want you to do is just remove these and when you update the Colour palette for these items, our AI Website Bots will then use those Colours to decide your neutral text and divider. Pretty cool stuff because often I see brand guidelines, if you've got a branding company, they might leave off a neutral Colour sometimes and often they do leave out, believe it or not, text Colours too. And then dark. You can just choose a dark Colour somewhere down here. You might just even use black for that one.

But what I'm going to do now is go over to my brand guidelines, which you can see here. You can see here are my main Colours and you can see, I'll just zoom in. You can see my hex codes. So what I'm going to do now is just copy each of these hex codes and paste them into here. So I'm just going to take one moment to do that now. And our Colours are updated magically. Well, what I'm going to do now is just press save, only because I've just added these hex codes. I don't want to have to do them again. If you don't press save, they won't save, right? So there's no auto save on here for obvious reasons. We don't want people editing and then accidentally messing things up. So just going to press save, it takes two seconds.

Now, at which point I'm going to now use our bot. So do notice that I've left the text and divider blank for demo purposes. I've put in the neutral because I already had my neutral there from the onboarding. It makes sense. But if you are unsure, you can remove that too. Okay, so let's do it. Let's now press the sync button. And you can see as quick as that the bot has now gone to update those around the website. Well, what I'm going to do now is just drawer your attention to a few of these swatches so that even though the bot has now updated those, you can go and customize some very specific swatches for your website.

Well, you can see here I've got a dark Theme going on here, which mainly you notice this from the dark header. But if I just put this to light, if my logo was darker than this, this light header might look quite nice. But I think you know from the onboarding I'm quite happy with a darker Theme. Well, there's a couple of things I don't like what the bot has done here. So notably the legibility of the text, I've got a sky blue with white text. That's not so good. Let's have a look at this. This is okay, but again, that sky blue in here with the white text on top is perhaps not so legible. So these are some obvious things I can go and fix up. You can see here it's put in some text and divided Colours for me, which is pretty good."

"So I can navigate via this anchor bar, and you can see it scrolls me down to all the swatches of the header. So let's explore that just to get your eye in. Well, you can see this is the header background. And this is the header background. So this is the header text. This is the header text in white. When I hover over a text link, it goes to the sky blue, which is this swatch. And the active text is when, let's say, I'm on the about us page, that's going to light up in blue to say I'm on this page, so that's active. Well, I've just said that I didn't like this white on hover. Well, you can see here the background of the dropdowns are this blue, and when I hover over, they're this blue. So you can see here it's the background and the background hover.

Okay, so active is when I'm on that page. It will light up in that Colour in the menu. So we can see here the dropdown text is white and the hover over text is white. So the text is white, and when I hover it's also white. So first things first, let me go and change this to a darker more legible Colour. So if I do that, now I can just press save. And what that'll do at the same time there it will just update the preview for us, which now when I hover over, you can see that it lights up in blue. Well, let's have a look at that active page. Let's make this active a bit more pronounced. And we could do that as well with this one if we wanted to as well. So if I press save now, just jump over here and press save. Again, it's just going to refresh that preview for us so that we can see it.

And now if I go to one of the pages, let's just say I'll go to the product page. You can see the pages lights up, and now this lights up too. So if I just want to refresh the preview, I can just hit refresh and it will bring me back to our main preview. So I want you now to go and update your dropdown menu Colours and your header Colours. But the main one I also want you to play with immediately is your Action Section button. You can see here that mine is the sky blue with white, which I don't like that because it's not so legible. So what I can do now is just go through these swatches and find where it says action button.

Well, you can see here, here's my action button, background, which is blue, but my text is white. So let me make that our space cadet blue. And then you can see here the header scroll. So when I scroll, this can change this bar as well. So I could change this background to a completely different set of Colours when I scroll. But in this case, I don't want to do that. I want to bring attention to this action button. So what I'm going to do is actually make this one pink when I scroll. So at which point I can go and press save. And again, that's just going to save, update the preview for us, and now we can see our button. And when I scroll, it's nice.

So once you've added your primary Colours and hit sync and let our AI Website Bots go and update those right the way around the website, I'm actually happy for you to move on to episode four. So it's as simple as that for this episode. But what I'm going to show you now is that there's actually hundreds of swatches and the reason why we use the AI Website Bots, if you were to actually go and update all of these swatches, then this could take you a considerable amount of time, right? Because there's swatches for everything. So in the rest of the episode here, I'm just going to drill down to all these swatches and show you what they are.

Sometimes you might find that you've got a conflict where one Colour isn't quite working, but what you can do is then go and come back to that particular swatch, press save, and that will go and adjust that right the way around the website. So you've actually completed the episode at this point, but now the rest of it's just going to be more of an education of what these swatches are, should you need to go and change them. And then at the very end of the episode, like I say, if you don't have a full Colour palette at this stage, I'm going to show you a few little tricks and hacks of how to generate a really good Colour palette."

"The top bar is when you have an extra bar on top. So when you choose a header, you might have an extra navigation bar. I don't recommend that. When we get to day two, I'll be explaining all of this for you. So I'd leave a top bar out for now. And you can also change the Colour of the top bar on scroll as well. Look at this. This is our default heading style. Well, I probably, that is a good idea from the bot, it's chosen the sky blue, which that will be legible on both backgrounds. If I've got a light neutral background here, and then I've got a dark space cadet blue background, this header is actually going to be legible on both, so that's quite smart of the bot. But in this design, my sky blue just isn't that legible and it's in my brand, so I have to make some key design choices. So I'm going to make my default dark blue, and that way when my content users use it on a neutral background, the heading will always be this Colour.

Now, I could change my link to blue, which I like that blue. It's going to work on both backgrounds maybe. But what I could do to make it absolutely legible is decide I'll have my links default in pink, and then when I hover, we will go to the blue. So those are some choices here. The key one on the shop is the cart items, which is the text, which is white, and the background, which is the blue. So that's what we call cart items. It's showing the number of items in the cart. So in this case, I'm going to make this my space cadet as well. And then you can update your blog. And if you want in the preview, you can just jump over to the blog. But this is just getting your eye in of what these mean. You can see it's not really rocket science, with the type of thing that as we go through the five day challenge, you'll look at these particular nuances and you'll say, "Oh, you want to change it." That's when you can come back and make those changes.

Member profile, you don't need to update member profile, that will just work. But this is your my account area. When people log in, they can go and see past orders or the rest of it. We can change those styles too. Now, the widget is one that you need to be aware of because we've got two types of widget Colours. We've got widget grid, and we've got widget card. So what's the difference of that? So this is just what I want you to learn now. So if I scroll down here, we can see card, which just means we have the information below the image in a card. And then if we go to grid widget, the information comes on top of the card, it comes over the image. So you can see here this is our grid overlay and it's in the blue, and this is our card background and it's in the blue. So I just want you to be aware of those for now. The bot will update those for you."

"Now, think of supporting Colours. It's extra Colours that you can play with. So let me just show you what I mean by this. Well, here I've got my main Colours, the neutral, my main and accent, 1, 2, 3, 4, 5, and 6. But if I look at accent five here, I might not like that. It's a bit muted, so I might want to change it to a different Colour. So what I'll do here is go and add an extra Colour to my palette. So I'm treating this like a playground. So what I'll do here is go and choose something. And now I know I've got a raspberry in my brand guidelines, which is somewhere around here, but I've just copied the exact hex code, so let me paste it in pretty close. So this is a raspberry that I'll be using throughout the course of the five day challenge. Now, notably, even though the bot just populated these Colours for us, because that was what was there, it didn't try to add extra than the main two and our six accents.

So if we notice here, we've still got our accent five. So a supporting Colour has added extra Colours to that, but notably, if I want to go and use that raspberry now, it's here in the swatches. So that's cool. So now what I'm going to do is jump over into the Editor and show you the swatches that we've created and now they're ready for our content team. So I'll hit save and jump over into the Editor. I'll open the Drawer and you can see our raspberry Colour is in there. But because I kept accent five, I kept the accent five, which was this Colour here. It's also added this extra. So it'll keep your main accents, but you can add extra supporting Colours. Now, that palette is updated everywhere now, right the way across the website. These aren't just the Colour palettes here, we've got Colour palettes all the way through the platform, including things like normal text, as you can see, and also buttons and forms, everywhere.

So with this particular palette here now, you can see the advantage. What we don't want content users to be doing is choosing their own Colours. They might choose a Colour that's close, the hex code is different, but it looks close. Okay. Well, that's not good because what we want to do is to ensure that we work with the exact Colours to keep the brand consistent. And this has also got the benefit of when we go and change things in the future. So I might decide that I don't like my accent one anymore because with white on top, it's causing too many complications due to legibility. I might say it's a new campaign and we want to change the new raspberry Colour. Well, when we update it in the Colours area, it updates the swatches right the way around the site, but it also updates every instant of that Colour. Every time it's used on every single page, it will update it everywhere. So think about that. We can redo campaigns and we can even redo the entire website redesign just with a few clicks.

So you'll also see this philosophy next when we move on to fonts, because we do give you a pallet of fonts, it works in the same way. When we update one font, it will go and update that across the entire website. So you can see how this is working. The AI Website Bots are helping us get there quickly, but then we're also thinking about the future, new content Editors coming in, always staying on brand and then lining ourselves up so we can do redesigns quickly without ever having to go through this process again."

"Okay, so now I'm going to show you how to pick a really cool Colour palette. And this is going to be important for two things. One, if you're not a website designer. If you are a website designer, you already know this stuff. But if you are not a website designer and you've only got a very limited Colour palette and you now need to add more Colours to your palette, I'm going to show you really cool tricks of how to do this quite quickly.

So number one is the Colour we are. Well, let's say that your brand has got one or two, maybe three Colours, and for the purposes of this website design practice, you might want to add some more. So a very simple way to do this is actually to use what we call the Colour wheel. Okay. So let me show you what I mean by this. This is a very basic tip, but if you already have two Colours, you could copy one Colour and actually paste it into another swatch. And now you can use the Colour wheel to slide up and pick a Colour of the same tone. So now you could repeat this for Colours four, five, and six, and just broaden out that palette with a few more Colours in the spectrum, and that will keep your Colours to the exact same tone. And this means later on, if you use things like gradients, as you've seen before, you've got much more of a chance at those gradients playing nicely together.

Now, building on the concept of a Colour wheel, there are actually websites that generate Colours, a Colour palette for you based on an algorithm around a Colour wheel. Okay. Colour wheels are really important for designers. You might have seen in the past designers having Colour wheels on the table, which is moving circles around to pick Colours. Well, there's websites that do that for you. And one of those sites is a website called Coolors. And this is a great resource.

I actually use it all the time when I'm creating brands for the first time just to give me a bit of inspiration for extra Colours in a palette. And it also gives you really cool names as well, sort of the exact names of those Colours. So let's just have a look at this. So what I'm going to do is pop in a couple of my first Colours and hit the lock icon. Okay. Now I can hit the space bar and it will generate new Colours. And these are based on the principle of a Colour wheel. And once I'm happy with one, I can hit the lock icon again and hit the space bar. I can then copy those hex codes, go back into my Colours area, add the Colours, and press safe.

The third really useful tip that I would suggest to anyone who's not a website designer is to go and install a Chrome extension called ColorZilla. I use this tool all the time for many different purposes in my sort of design life. So you can go and install this extension in Chrome and be using it too. So let's say I did a search, for example, tech Colour palette. And in my browser now, I can see what Google has brought up in Google images for tech Colour palettes. Well, I could now click on the ColorZilla extension to pick a Colour, and I could now hover over and grab the exact hex code. I could now put that hex code into something like Coolors, and hit the space bar and start to build out my palette. Okay, so there's three very simple techniques there of how you can build out a Colour palette for your brand."

"And we'll finish the session with an FAQ. At this point in training, clients always ask me, I really like this preview feature, but can I go in and edit it? Well, the answer is yes. You can edit it via this link here, which says boilerplate. But you can also share that boilerplate with people. Too often you might have people that want to see it, like someone who's doing ads for you. They might say, "Can I see all of your hex codes? Can I see your fonts?" And you can say, "Yes, I am going to share with you my boilerplate," which is just your domain name or site name forward slash boilerplate. Okay. And you can just send that as a link on your mobile, in messages wherever. And they will actually see this as a page which they can view on their mobile, or of course on desktop or wherever they are. So forward slash boilerplate. You can actually share this page with all of your Colour swatches and so on and so forth. Okay.

Now, I will just go and update this. I'll show you two things. So let's go into the boilerplate. The first thing I might do is change this image. This image looks really cool, but you can see all of my images have come across from the onboarding, but I can improve this by changing the button Colours. See, the Colours have already also come across into our buttons, so I can choose the pink here if I wish. And then I also mentioned that they've come across into forms. Well, the forms, this is a dynamic element. It's pulling in a particular form. In this case, it's pulling in the form that's called short light. These are all the other forms that are currently made.

Now, because this is a dynamic element, it doesn't always pull through the Colours in the back end, but on the front end, you can actually preview this and it will be in the exact Colours. So just be conscious of that. Now, you can change all of your forms, all of your form Colours and settings in the forms area, which we're going to cover later on today. The key takeaway from this bit is just be aware that this is a placeholder. So when you see a form, it's not always the exact, it's just we've taken almost like a screenshot of it. You're going to learn much more about the reasons why, and I'll go through that in day three. But just know now, if you're looking at this, don't try and change the Colour here. It's actually in the forms area. So that's it. That's a quick FAQ on boilerplates."