Colors and text styles

In the previous section, you were briefly introduced to two important concepts: text styles and site colors. Makeswift allows you to build a color palette and text styles that you can use across your site. This is a great way to ensure consistency and make changes quickly.

​

Site colors

You can access your site colors and text styles by clicking on the Site tab in the top right corner of the Properties Sidebar. Notice, there is a handful of colors and text styles that come with this template. If you don’t see the Site tab initially, you can deselect the selected component by pressing the Esc key.

In the Site colors section, click on the green color and change it to something else. Notice that all the elements that use that color will update automatically in the Canvas. This change will also be reflected in each of your different pages.

For consistentcy, change the color back to the original green accent color (#2BFEC5).

​

Text styles

Now, take a look at the Text styles section. You can see the different text styles that are used on the site. You can change the font, size, weight, color, and more for each text style. The text you previously edited on the hero uses the Heading 1 text style. Click on the Heading 1 text style and change the font size to 80. Then, click Save. You should see the text in the hero get bigger.

As you create new Text components, you’ll want to assign each one a text style to stay true to your brand. For more information, check out the Theming docs.

​

In the next section…

You’ll learn about Global Components and how they can be reused across your site.