## Colors, fonts, and style kits

Product: Verba - Modern Blog & Magazine WordPress Theme
URL: https://hub.jkdevstudio.com/docs/verba/theme-settings/theme-styles
Updated: 2026-09-24
Summary: Apply a style kit, then adjust fonts, type sizes, headings, buttons, and the light and dark color pairs in Theme Styles, without touching your layout.

Everything about how the site looks, as opposed to how it's laid out, lives in one Customizer panel: [[Appearance > Customize > Theme Styles]]. Start from a style kit, then change what you need.

## Start from a style kit

A style kit sets the whole look in one click: fonts, the type scale, headings, buttons, labels, forms, and both color schemes. Find the kits on the **General** tab, under **Style Kit**.

Verba ships a default look and eight kits: Geometric, Sepia, Minimal, Studio, News, Terminal, Blush, and Cobalt. Each card shows a preview, and the **Current** card shows what you have now.

<div data-callout="warning">

Applying a kit replaces every Theme Styles value except the **Layout** tab. If you've already tuned colors or fonts by hand, those changes are overwritten. Pick the kit first, then adjust.

</div>

Your container widths and corner radii live on the **Layout** tab, which kits leave alone. See [Site layout](https://hub.jkdevstudio.com/docs/verba/theme-settings/site-layout).

## Fonts and type

The **Typography** tab holds four groups:

:::deflist

Fonts
: **Heading Font** for titles and **Text Font** for body copy. Change both together; a new body font under the old heading font rarely looks planned.

Font Weights
: The regular, medium, and bold weights used across the site.

Font Sizes
: The type scale every element draws from.

Line Heights
: Tight, snug, normal, and relaxed spacing between lines, from display titles to long-form copy.

:::

The **Headings** tab sets each level, H1 to H6, separately, with its own values for desktop, tablet, and phone. The **Buttons**, **Labels**, and **Forms** tabs set the type used by buttons, by category pills and tag chips, and by input fields.

Which fonts you can choose depends on the font library. See [Adding fonts to your site](https://hub.jkdevstudio.com/knowledge-base/jkd-toolkit/adding-fonts-to-your-site).

## Colors come in pairs

The **Color Scheme** tab has three groups. **Universal** holds the white used for text over images. **Light Scheme** and **Dark Mode** each hold the same eight colors:

<table> <thead> <tr> <th>Color</th> <th>What it paints</th> </tr> </thead> <tbody> <tr> <td>Accent</td> <td>Fills, borders, and active states in your brand color</td> </tr> <tr> <td>On Accent</td> <td>Text and icons on top of the accent</td> </tr> <tr> <td>Background</td> <td>The page</td> </tr> <tr> <td>Background Secondary</td> <td>Cards, inputs, and panels</td> </tr> <tr> <td>Border</td> <td>Separators and outlines</td> </tr> <tr> <td>Border on Color Surface</td> <td>Borders over colored areas and images</td> </tr> <tr> <td>Heading</td> <td>Titles and strong interface states</td> </tr> <tr> <td>Body Text</td> <td>Paragraphs</td> </tr> </tbody> </table>

Dark values apply only while the dark scheme is active. How visitors switch schemes is covered in [Set up dark mode](https://hub.jkdevstudio.com/docs/verba/theme-settings/dark-mode).

## Rounding and spacing

The **Layout** tab also holds the corner radius scale (small, medium, base, large, and pill) and **Section Spacing Scale**, which tightens or opens up the vertical space between page sections. At 1 the spacing stays as designed.

<details><summary>I changed a color and part of the site ignored it</summary>

That element is probably using the other color in its pair. Check whether you're looking at the light or the dark scheme, then change the matching value.

</details>

<details><summary>Can I undo a style kit?</summary>

Before you press **Publish**, yes: close the Customizer without publishing and the kit is discarded, like any other unpublished change. After publishing, apply another kit or set the values again by hand.

</details>