The style guide feature on CodeDesign.ai empowers you to effortlessly manage color palettes across your website, making it easy to experiment with different themes and make changes on the fly. Whether you’re creating a new website or updating an existing one, style guides streamline the process of swapping out colors and maintaining visual consistency.

I would suggest a quick look at the introduction article on Style Guide if you've skipped that.

For this guide, I'll be starting off from this simple page that I've dropped to the canvas from the design library. If you notice, we have three main colors within this design.

If we're doing this the basic way, we need to individually change the color of each button, text and then background when we want to try our a different color palette for this page.

But here's the deal! We are going to link the color of all the elements to primary, text and bg color. Once setup this way, we can seamlessly create and switch to new themes on the go using the Style Guide feature like this. Let's get started!

To make this easier to comprehend, let's see what's ahead of us. The following are the three key parts of the process:

1. Access the Style Guide Panel

Navigate to the footer of your project and click on the style guide options. This will open the style guide panel on the sidebar.

2. Add a New Theme

Click the "Add New Theme" button. You can now begin defining the colors for this new theme.

3. Defining the Theme Variable and selecting colors for each.

Don't be scared! 'Theme Variables' are just the sets of colors the theme. In this case, we have three: Primary, Text and BG. We'll create and label there three Theme Variables.

To do that,In the theme variable section, click the plus sign to add the Theme Variables. You can start with primary, then repeat the same for text, and background colors. Renaming each Theme Variable to it's label will help keep things organized.

Having the theme variables created and named, let's select color for each.

For example, here is what i've selected using the color picker.

Once you have the Theme Variable colors sorted for the Primary, you will have something like this.

Now you can rename the theme by clicking on the pencil icon right next to the default theme name. I'm going with Orange for this theme.

Once we have a pilot theme ready, we can link each element color to one of the three variable colors. Here is how you do it:

1. Link Buttons to Theme Colors

2. Link Text Elements

Select text elements like headings or paragraphs. In the typography settings, change the text color to your predefined 'text' color from the style guide.

3. Update the Background

Select the body outline of your page. In the body settings, change the background color to the one defined in your style guide.

Note that as you link each element colors to the Theme Variables, the color will be changing to the theme in realtime. Once the process is done for all the elements and background, the webpage will be based on the orange palette/theme that we defined.

If you have a hard time grasping this guide, we've put together a video guide as well that might help.

Style guides in CodeDesign.ai simplify managing and updating your website’s color scheme. By linking elements to theme colors and creating multiple themes, you ensure a cohesive, visually appealing design that updates effortlessly.

For any questions or assistance, reach out through comments, support chats, or the CodeDesign.ai forum.