> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.weblium.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Customizing website styles

When you create a website, it is important that all its elements look harmonious. Global style settings will help you with this: just choose the colors, fonts, and button design once, and they will automatically apply to all pages of the website.

This way, you don't have to edit each heading or button separately — it saves time, makes your work more convenient, and allows you to create a cohesive, professional website design.

**Contents**:
[Color settings](#1-color-settings)
[Font settings](#1-font-settings)
[Button design settings](#1-button-design-settings)

To open your site's style settings, click on the **paint icon** in the top bar:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stiliv-saitu-an_i7lt0e.png)
# Color settings

| ${color}[#1aa900](Tip:) You can learn more about palette settings [in our article.](/en-us/article/site-color-palette-1vllsl8/)

The first setting is your website's color palette: it is responsible for the colors of various elements — for example, text in contact form fields, dates in blog posts, or product prices. It also allows you to quickly select colors for elements, backgrounds, etc., without having to adjust each shade separately every time.

You can either **customize your palette** ① yourself or choose one of the ready-made **presets** ②:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stiliv-saitu-an_123hd37.png)
The palette consists of five shades: **brand color** (your main color), two **accent colors** (complementary colors to your brand color), **light and dark base** (for text, background, etc.):
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stiliv-saitu-an_bpt5lc.png)
# Font settings

| ${color}[#1aa900](Tip:) You can learn more about font settings [in our article.](/en-us/article/changing-sites-font-1hqas9r/)

In the **Text** section, you can configure font sets for different situations, such as different levels of headings, regular text, or links, as in many well-known text editors.  

Similar to the palette, you can either manually **configure different text types** ① or select a ready-made **preset** ②:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stiliv-saitu-an_vgzqgx.png)
You will have 12 text types available for editing:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stiliv-saitu-an_1afhwvx.png)
For each of them, you can choose a font from the available ones, upload your own, adjust its size, height, character spacing, etc. for each screen size separately:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stiliv-saitu-an_2wdzfd.png)
# Button design settings

| ${color}[#1aa900](Tip:) You can learn more about button design settings [in our article.](/en-us/article/changing-the-design-of-a-button-les3mi/)

There are currently two button design options available that you can customize: **Primary** ① and **Secondary** ②. You can also choose a ready-made preset ③:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stiliv-saitu-an_d1zdnn.png)
Each of these options can have a **Primary** ① and **Alternate** ② design, and for each button option, you can customize the design for **light** ③ and **dark** ④ backgrounds separately:
![](https://storage.crisp.chat/users/helpdesk/website/-/f/a/8/4/fa84b4d83a50e800/nalashtuvannya-stiliv-saitu-an_1tv1m4s.png)
Don't forget to [publish your site](/en/article/publishing-a-site-16hom55/) after making changes so that they take effect.