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:
Here's how some hyperlinked text will appear.
Your buttons will look like this if you choose the theme settings on a dark background:
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.
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.
Here's how your other blocks will look on your site:
This is how a standard Gutenberg list block will look.
- Croissant lollipop pie ice cream
- Lemon drops pastry bear claw
- Sweet carrot cake candy canes macaroon sugar plum topping
This is how a standard Kadence icon list block will look with standard settings.
This is what a gutenberg quote block looks like. Chocolate bar wafer candy canes dessert cheesecake. Chocolate cake marzipan sesame snaps powder carrot cake. Cheesecake jelly-o chocolate bar chocolate cake cookie pastry icing.
By Aristotle
This is what a gutenberg quote pull quote block looks like. The quote mark uses your subtle background color. Chocolate cake marzipan sesame snaps powder carrot cake.
By Aristotle
Here's how your other blocks will look on your site:
This is how a standard Gutenberg list block will look.
- Croissant lollipop pie ice cream
- Lemon drops pastry bear claw
- Sweet carrot cake candy canes macaroon sugar plum topping
This is how a standard Kadence icon list block will look with standard settings.
This is what a gutenberg quote block looks like. Chocolate bar wafer candy canes dessert cheesecake. Chocolate cake marzipan sesame snaps powder carrot cake. Cheesecake jelly-o chocolate bar chocolate cake cookie pastry icing.
By Aristotle
This is what a gutenberg quote pull quote block looks like. The quote mark uses your subtle background color. Chocolate cake marzipan sesame snaps powder carrot cake.
By Aristotle