Colour Palette
#1
DEFAULT ACCENT
#942D1A
#2
HOVER
#BA3920
#3
BLACK
#333333
#4
TEXT
#391404
#5
BACKGROUND 1
#DC9C8F
#6
BACKGROUND 2
#EECDC7
#7
BACKGROUND 3
#F8EBE8
#8
BACKGROUND 4
#F9F9F9
#9
WHITE
#FFF
9 colour variables available in WordPress theme default panel
Blocks Palette swatches available at page level, managed in right sidebar
Typography & Font Pairing
HERO HEADLINE
H1 TITLE: 300 LIGHT
3rem 48PX / 100%
LETTERSPACING OPTIONAL
H1 Body 3 rem 48px / 115%
Heading (in body)
H2 Heading 2.5 rem 40px / 120%
Heading Goes Here
H3 Heading 2 rem 32px / 125%
Heading Goes Here
H4 Heading 1.75 rem 28px / 125%
Heading Goes Here
H5 Heading 1.5 rem 24px / 135%
Heading Goes Here
H6 Heading 1.25 rem 20px / 135%
Heading Goes Here
Kadence Theme Default Font Sizes
Font Size | Equivalent | Line Height | Color | Note | Line49 | |
---|---|---|---|---|---|---|
H1 Page Title | 32px | 2 rem / 200% | 1.5em / 48px | Swatch 3 | .entry-title | 4 |
H1 | 32px | 2 rem / 200% | 1.5em / 48px | Swatch 3 | Small | 3rem/1.15em |
H2 | 28px | 1.75 rem | 1.5em / 42px | Swatch 3 | 2.5rem/1.2em | |
H3 | 24px | 1.5 rem | 1.5em / 36px | Swatch 3 | 2/1.25 | |
H4 | 22px | 1.375 rem | 1.5em / 33px | Swatch 4 | Weird | 1.75/1.25 |
H5 | 20px | 1.25 rem | 1.5em / 30px | Swatch 4 | 1.5/1.35 | |
H6 | 18px | 1.125 rem | 1.5em / 27px | Swatch 5 | 1.25/1.35 | |
Body | 17px | 1.0625 rem | 1.6 em / 27px | Swatch 4 | Weird | 1em/1.35 |
WordPress Default Font Variables
XL 42px
L 32px (2 rem)
M 24px (1.5 rem)
S 14px
- –wp–preset–font-size–small: 14px;
- –wp–preset–font-size–medium: 24px;
- –wp–preset–font-size–large: 32px;
- –wp–preset–font-size–x-large: 42px;
- –wp–preset–font-size–larger: 40px;
Kadence Blocks Default Variable Font Sizes
Variable | Desktop | Equiv | Change to? | Note/Use for: |
---|---|---|---|---|
XXXL | 5 rem | 80px | Hero Row | |
XXL | 4 rem | 64px | H1 Title | |
XL | 3 rem | 48px | H1 Body | |
LG | 2 rem | 32px | H2 | |
MD | 1.25 rem | 20px | Back to 1.5 rem | H6 ? |
SM | .875 rem | 14px | N/A too small |
Variable Ranges
- –global-kb-font-size-sm: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem);
- –global-kb-font-size-md: clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem);
- –global-kb-font-size-lg: clamp(1.75rem, 1.576rem + 0.543vw, 2rem);
- –global-kb-font-size-xl: clamp(2.25rem, 1.728rem + 1.63vw, 3rem);
- –global-kb-font-size-xxl: clamp(2.5rem, 1.456rem + 3.26vw, 4rem);
- –global-kb-font-size-xxxl: clamp(2.75rem, 0.489rem + 7.065vw, 6rem);
Line49 Ideal Variable Font Size Chart
H1 | XL | 3 rem | 48px |
H2 | 2XL | 2.5 rem | 40px |
H3 | XL | 2 rem | 32px |
H4 | LG | 1.75 rem | 28px |
H5 | MD | 1.5 rem | 24px |
H6 | SM | 1.25 rem | 20px |
Body | 1 rem | 16px |
Heading + Titles:
FONT NAME HERE
Font weight: 700 Bold
(except where indicated)
Base colour: Swatch 3
Base Font:
FONT NAME HERE
Font size: 1 rem (16px)
Line height: 135%
Font weight: 400 Regular
Base colour: Swatch 4
Here is a paragraph of text. This is a link. Here is a paragraph of text. Here is a paragraph of text. Here is a paragraph of text. This is a visited link.
Set heading font in Heading Font Family, Page Title, Buttons and Navigation