> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.jboard.io/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).

# How to Customize Your Job Board's Colors and Fonts?

Watch how to set your brand colors and fonts once and apply them across your whole job board: 

${frame}[How to Customize Your Job Board's Colors and Fonts?](https://fast.wistia.net/embed/iframe/mx9byyxyg3?web_component=true&seo=true)

# How Global Colors Work

Every color in [Global Website Styles](https://app.jboard.io/board/current-team/theme-builder#global-website-styles) is a **global color**: a named color such as **Primary Color**, **Website Background** or **Section Titles & Headings**. Every element on your job board is linked to one of these global colors.

When you change a global color, every element linked to it updates everywhere: on every page, in every section, and in any section you add later. Your Global Website Styles are also carried into your **forms**, **employer dashboard** and **job seeker dashboard**, so your whole job board stays on-brand. That's what makes rebranding your whole job board a two-minute job instead of an afternoon of editing sections one by one.

You can customize at two levels:

1. **Site-wide (start here):** Set your global colors and fonts once in [Global Website Styles](https://app.jboard.io/board/current-team/theme-builder#global-website-styles). This covers almost everything.
2. **Per section (optional):** For a single section, you can **pick a different global color** or **use a custom color**. Everything else keeps following your global colors.

# Step 1: Open Global Website Styles

Navigate to **Dashboard** > **Appearance** to open the website builder, or [open it directly here](https://app.jboard.io/board/current-team/theme-builder).

![](https://storage.crisp.chat/users/helpdesk/website/-/8/0/3/0/8030a322aa1b180/01-appearance_1qw81bk.png)

Click on **Global Website Styles**, the second icon in the left panel.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/0/3/0/8030a322aa1b180/02-palette_q79yrq.png)

This is where you manage the styles every page shares: **Colors**, **Typography**, **Buttons**, **Forms** and more. Click on **Colors**.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/0/3/0/8030a322aa1b180/03-colors_18dzv9.png)

# Step 2: Set Your Global Colors

Click on any color, enter a HEX value (or pick one), and click **Apply**. Usually, matching your **Primary Color** to your brand and choosing a **Website Background** is enough to make the whole job board feel on-brand.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/0/3/0/8030a322aa1b180/04-primary-picker_mma5qd.png)

Change as many colors as you like, then click **Save**.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/0/3/0/8030a322aa1b180/05-save_7iyish.png)

**Note:** Click **Save** before leaving the Colors panel. Changes that aren't saved are discarded when you switch to another panel.

### What Each Global Color Controls

| Global color | What it changes on your job board |
| ---- | ---- |
| **Primary Color** | Buttons, links and highlights, such as Sign Up, Post a Job and Search |
| **Text on Primary Color** | Text shown on top of primary-colored buttons |
| **Success / Error / Info / Warning Color** | Status messages and alerts |
| **Website Background** | The background behind every section of your pages |
| **Header Background** | The background of the header (the top menu bar) |
| **Card Background** | The background of cards, such as job and category cards |
| **Dark Section Background** | Sections that use a dark style |
| **Borders & Dividers** | Card outlines and lines that separate content |
| **Section Titles & Headings** | The titles above each section |
| **Card Titles** | The titles inside cards |
| **Body Text** / **Secondary Text** | Main text and less prominent text, such as job info items, job counts |
| **Form Labels** | Labels above form fields |
| **Header Menu Links** | The links in the header menu |
| **Dark Section Text** | Text inside dark sections |

### See Your Colors Across the Whole Site

Once saved, go back to your website pages. Without editing a single section, your new colors are already applied everywhere.

**Primary Color** now shows on your buttons, like **Sign Up**, **Post a Job** and **Search**.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/0/3/0/8030a322aa1b180/06-tour-buttons_8arga6.png)

**Website Background** now sits behind every section.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/0/3/0/8030a322aa1b180/07-tour-background_n5jrhy.png)

**Section Titles & Headings** now colors titles like **Browse Jobs by Category** and **Featured Companies**.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/0/3/0/8030a322aa1b180/08-tour-headings_1nid6i8.png)

**Borders & Dividers** now outlines your cards.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/0/3/0/8030a322aa1b180/09-tour-borders_1exbb5.png)

# Step 3: Set Your Fonts

Fonts are global too. In **Global Website Styles**, click on **Typography**, open **Default Heading Font** (or **Default Font** for body text), search for a font, select it, and click **Save**.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/0/3/0/8030a322aa1b180/10-font_2psqpy.png)

Every heading on your job board now uses the new font.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/0/3/0/8030a322aa1b180/11-font-preview_7e3xjj.png)

# Step 4 (Optional): Customize a Single Section

Your global colors cover the whole site. When you want one section to look different, you can fine-tune it in the builder without touching anything else.

Each section is linked to a global color. For example, the header is linked to **Header Background**, which is separate from **Website Background**. That's why the header stays white while the page behind it changes.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/0/3/0/8030a322aa1b180/12-header-white_8i2xmj.png)

To change it, click on the section (here, the header), then go to **Styles** > **Section Style** > **Background Color**. You have two options:

- **Pick a different global color**, for example **Website Background**. The section stays linked to your global colors, so if you change **Website Background** later, the header follows automatically.
- **Use a custom color**. The section gets a fixed color of its own. It won't change when you update your global colors.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/0/3/0/8030a322aa1b180/13-header-options_q2qo7x.png)

After switching the header to **Website Background**, it matches the rest of the page.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/0/3/0/8030a322aa1b180/14-header-done_w7gdsy.png)

**Tip:** Use global colors instead of custom colors when you can. Sections that use a global color keep following your brand, so a future rebrand is still a single change in **Global Website Styles**.

# New Sections Are On-Brand Automatically

Any section you add uses your global colors and fonts from the start. To add one, hover between two sections, click **Add Section**, and choose a layout, for example **CTAs & Banners** > **Two Quick Actions**.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/0/3/0/8030a322aa1b180/15-add-section_173uput.png)

The new section arrives with your primary color, heading font and borders already applied. There's nothing to restyle.

![](https://storage.crisp.chat/users/helpdesk/website/-/8/0/3/0/8030a322aa1b180/16-section-added_1ba91o3.png)

Click **Save**, and your changes are live on your job board.

# Frequently Asked Questions

### Do I need to change the colors of each page or section separately?

No. Changing a color in **Global Website Styles** updates every page and section that uses it, as well as your forms, employer dashboard and job seeker dashboard.

### Why didn't my header change color?

The header uses its own global color, **Header Background**. Change it in **Global Website Styles**, or pick a different global color for the header under **Styles** > **Section Style** > **Background Color**.

### What's the difference between a global color and a custom color?

A section that uses a global color keeps following your brand when you change it. A custom color is fixed for that one section.

### Why did my color changes disappear?

Changes are only kept after you click **Save** in the Colors panel.