Brand Settings

Play around with the settings in the customizer to see how changing the settings in your customizer will affect the global styles. To get started, preview this page. Using the black toolbar at the top of the page, click “customize” and begin editing the fonts, colors, buttons, and more.

You may have the setting turned off if you do not see a black toolbar while logged into your site. Go to Users, select your user, and make sure the “Show Toolbar when viewing site” option is checked.

Global Colors

Swatch #1

Swatch #2

Swatch #3

Swatch #4

Swatch #5

Swatch #6

Swatch #7

Swatch #8

Swatch #9

Light WEbsite

Accent – Button & link color
Accent Alt – Hover color on buttons & links
Strongest text – headings color
Strong text – body text color
Medium text color
Subtle text – borders + Woo*
Subtle background color
Lighter background color
Lightest color (white or off-white)

Dark website

Accent – Button & link color
Accent Alt – Hover color on buttons & links.
Lightest text – headings color
Lighter text – body text color
Subtle background color
Subtle text – borders + Woo*
Medium background color
Stronger background color
Strongest color

*Color Palette #6 – If you have the WooCommerce plugin, this color is used for your coupon code field, so make sure it’s strong enough to read in a form field!

Accent Colors:

“Your accent color will likely be used the least on your actual site. This is the attention-grabber that highlights the important things. Your calls to action and your powerful one-liners. This is the color you should really put the most time into, as it truly will set the rhythm for your brand. Once you have it dialed in, then select an alt accent color; this could be another color that compliments your main accent or just a darker or lighter shade of your accent color.” Source

Color Palette #1 – This is your link & button color

Color Palette #2 – This is your link & button hover color

Contrast Text Colors:

“Contrast or Text colors are great ways to create a design hierarchy with your text, borders, etc. Usually, these are the darker “gray” colors that determine the text color for your heading and main site text.” Source

Color Palette #3

Strongest text – headings color

Color Palette #4

Strong text – body text color

Color Palette #5

Medium text color

Color Palette #6

Subtle text – borders + Woo*

Base Colors

“Your base or background colors are usually at the lightest end, white with two off-white variations that have just enough contrast to show a visual difference without having so much contrast that the text is lost in the color. Your base color is the color that people will notice the least, but if selected well makes all the rest of your colors come together,” according to the colors KadenceWP Help Doc.

Color Palette #6

This is your subtle background color

Color Palette #7

This is your lighter background color

Color Palette #8

White or offwhite color

Button Styles

As a general rule of thumb, these colors should only be used for calls to action on your site. Use this color when you want someone to click a hyperlink or button! Try not to use this color for accent colors or in any other part of your site design.

Your buttons will look like this if you choose the theme settings on a light background:

Call To Action – Auto

Button With Icon

Call To Action – Fullwidth

Button With Icon – Fullwidth

Here’s how some hyperlinked text will appear.

Your buttons will look like this if you choose the theme settings on a dark background:

Call To Action – Auto

Button With Icon

Call To Action – Fullwidth

Button With Icon – Fullwidth

Here’s how some hyperlinked text will appear.

Typography

Within your customizer/ Kadence Theme settings, you can swap out the heading font selection and sizes. Make sure the styles look good on all three device views!

This is an H1 heading

This is what your body text looks like in a paragraph. Gingerbread topping cake carrot cake dessert cotton candy. Fruitcake sweet cake marshmallow gummies powder bear claw.

Check out this H2 heading

Pudding tootsie roll sugar plum tootsie roll dessert pudding. Gingerbread jelly beans biscuit icing candy canes jelly beans oat cake sweet roll.

What do you think about this H3 heading?

Biscuit brownie topping brownie lemon drops. Dragée biscuit chocolate cake cotton candy toffee. Tiramisu pie dessert chocolate cake caramels biscuit.

Here’s what the H4 heading looks like

Wafer macaroon sugar plum tootsie roll chocolate cake.

This is an H5 heading

Lemon drops croissant dragée pudding sesame snaps muffin gummi bears.

Check out your H6 heading style

I typically use this as an accent for a pre-headline text.