Docs / Getting Started / Theme Settings Reference

Theme Settings Reference

A field-by-field breakdown of every option in the blox Theme Settings panel. Every entry below maps directly to an editable setting in HubSpot Theme Settings - if it is in the panel, it is documented here. For the procedural walkthrough on how to configure your brand, see Add Your Brand Style.

/// Start Here: Colors, Fonts

Primary (Pop!) Color

ColorDefault: #000000 @ 100% opacity

Main accent color used across the site

Secondary Accent Color

ColorDefault: #000000 @ 100% opacity

Secondary accent color for highlights and supporting elements

Default Heading Font

FontDefault: Inter / 16px / bold / #0F172A

Global default font for all headings

Default Body Font

FontDefault: Inter / 16px / normal / #0F172A

Global default font for body text and paragraphs

/// Typography

Global Typography Settings

Default Text Color

ColorDefault: #0F172A @ 100% opacity

Default color for all body text

Default Heading Color

ColorDefault: #0F172A @ 100% opacity

Default color for all headings

Header Navigation

Font Family

FontDefault: Inter / 16px / normal / #0F172A

Font Size (Desktop)

Number (px)Default: 16px

Range: min 8, max 48, step 1

Font Size (Mobile)

Number (px)Default: 14px

Range: min 8, max 48, step 1

Font Weight

SelectDefault: normal (Normal)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Font Case

SelectDefault: none (Normal)
  • none Normal
  • uppercase Uppercase
  • lowercase Lowercase
  • capitalize Capitalize

Letter Spacing

Number (px)Default: 0px

Range: min -10, max 10, step 0.5

H1

Font Family

FontDefault: Inter / 52px / bold / #0F172A

Font family for H1 elements

Font Size (Desktop)

Number (px)Default: 52px

Range: min 8, max 200, step 1

Font Size (Mobile/Tablet)

Number (px)Default: 32px

Range: min 8, max 200, step 1

Font Weight

SelectDefault: bold (Bold)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Font Case

SelectDefault: none (Normal)
  • none Normal
  • uppercase Uppercase
  • lowercase Lowercase
  • capitalize Capitalize

Letter Spacing

Number (px)Default: 0px

Range: min -10, max 10, step 0.5

Line Height

NumberDefault: 1.2

Range: min 0.5, max 3, step 0.1

H2

Font Family

FontDefault: Inter / 42px / bold / #0F172A

Font family for H2 elements

Font Size (Desktop)

Number (px)Default: 42px

Range: min 8, max 200, step 1

Font Size (Mobile/Tablet)

Number (px)Default: 28px

Range: min 8, max 200, step 1

Font Weight

SelectDefault: bold (Bold)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Font Case

SelectDefault: none (Normal)
  • none Normal
  • uppercase Uppercase
  • lowercase Lowercase
  • capitalize Capitalize

Letter Spacing

Number (px)Default: 0px

Range: min -10, max 10, step 0.5

Line Height

NumberDefault: 1.2

Range: min 0.5, max 3, step 0.1

H3

Font Family

FontDefault: Inter / 34px / bold / #0F172A

Font family for H3 elements

Font Size (Desktop)

Number (px)Default: 34px

Range: min 8, max 200, step 1

Font Size (Mobile/Tablet)

Number (px)Default: 24px

Range: min 8, max 200, step 1

Font Weight

SelectDefault: bold (Bold)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Font Case

SelectDefault: none (Normal)
  • none Normal
  • uppercase Uppercase
  • lowercase Lowercase
  • capitalize Capitalize

Letter Spacing

Number (px)Default: 0px

Range: min -10, max 10, step 0.5

Line Height

NumberDefault: 1.2

Range: min 0.5, max 3, step 0.1

H4

Font Family

FontDefault: Inter / 26px / bold / #0F172A

Font family for H4 elements

Font Size (Desktop)

Number (px)Default: 26px

Range: min 8, max 200, step 1

Font Size (Mobile/Tablet)

Number (px)Default: 22px

Range: min 8, max 200, step 1

Font Weight

SelectDefault: bold (Bold)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Font Case

SelectDefault: none (Normal)
  • none Normal
  • uppercase Uppercase
  • lowercase Lowercase
  • capitalize Capitalize

Letter Spacing

Number (px)Default: 0px

Range: min -10, max 10, step 0.5

Line Height

NumberDefault: 1.2

Range: min 0.5, max 3, step 0.1

H5

Font Family

FontDefault: Inter / 20px / bold / #0F172A

Font family for H5 elements

Font Size (Desktop)

Number (px)Default: 20px

Range: min 8, max 200, step 1

Font Size (Mobile/Tablet)

Number (px)Default: 18px

Range: min 8, max 200, step 1

Font Weight

SelectDefault: bold (Bold)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Font Case

SelectDefault: none (Normal)
  • none Normal
  • uppercase Uppercase
  • lowercase Lowercase
  • capitalize Capitalize

Letter Spacing

Number (px)Default: 0px

Range: min -10, max 10, step 0.5

Line Height

NumberDefault: 1.2

Range: min 0.5, max 3, step 0.1

H6

Font Family

FontDefault: Inter / 16px / bold / #0F172A

Font family for H6 elements

Font Size (Desktop)

Number (px)Default: 16px

Range: min 8, max 200, step 1

Font Size (Mobile/Tablet)

Number (px)Default: 14px

Range: min 8, max 200, step 1

Font Weight

SelectDefault: bold (Bold)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Font Case

SelectDefault: none (Normal)
  • none Normal
  • uppercase Uppercase
  • lowercase Lowercase
  • capitalize Capitalize

Letter Spacing

Number (px)Default: 0px

Range: min -10, max 10, step 0.5

Line Height

NumberDefault: 1.2

Range: min 0.5, max 3, step 0.1

Paragraph

Font Family

FontDefault: Inter / 16px / normal / #0F172A

Font Size (Desktop)

Number (px)Default: 16px

Range: min 8, max 48, step 1

Font Size (Mobile)

Number (px)Default: 16px

Range: min 8, max 48, step 1

Font Weight

SelectDefault: normal (Normal)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Line Height

NumberDefault: 1.6

Range: min 0.5, max 3, step 0.1

Lists

Font Family

FontDefault: Inter / 16px / normal / #0F172A

Font Size (Desktop)

Number (px)Default: 16px

Range: min 8, max 48, step 1

Font Size (Mobile)

Number (px)Default: 16px

Range: min 8, max 48, step 1

Font Weight

SelectDefault: normal (Normal)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Line Height

NumberDefault: 1.6

Range: min 0.5, max 3, step 0.1

Item Spacing

Number (px)Default: 8px

Space between list items

Range: min 0, max 40, step 1

Blockquote

Font Family

FontDefault: Inter / 18px / normal / #0F172A

Font Size (Desktop)

Number (px)Default: 18px

Range: min 8, max 48, step 1

Font Size (Mobile)

Number (px)Default: 16px

Range: min 8, max 48, step 1

Font Weight

SelectDefault: normal (Normal)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Line Height

NumberDefault: 1.6

Range: min 0.5, max 3, step 0.1

Border Color

ColorDefault: #000000 @ 100% opacity

Left border accent color

Border Width

Number (px)Default: 4px

Range: min 1, max 10, step 1

Text Color

ColorDefault: #475569 @ 100% opacity

/// Call To Actions

CTA Primary

Background Type:

SelectDefault: solid (Solid Color)

Choose between a solid color or gradient background

  • solid Solid Color
  • gradient Gradient

Background Color

ColorDefault: #000000 @ 100% opacity

Gradient Start Color:

ColorDefault: #000000 @ 100% opacity

Gradient End Color:

ColorDefault: #374151 @ 100% opacity

Gradient Direction:

SelectDefault: to right (Left to Right)
  • to right Left to Right
  • to left Right to Left
  • to bottom Top to Bottom
  • to top Bottom to Top
  • to bottom right Top-Left to Bottom-Right
  • to bottom left Top-Right to Bottom-Left
  • to top right Bottom-Left to Top-Right
  • to top left Bottom-Right to Top-Left

Text Color

ColorDefault: #FFFFFF @ 100% opacity

Border Color

ColorDefault: #000000 @ 100% opacity

Border Width

Number (px)Default: 1px

Range: min 0, max 10, step 1

Border Radius

Number (px)Default: 100px

Range: min 0, max 100, step 1

Hover Background Color

ColorDefault: #333333 @ 100% opacity

Hover Text Color

ColorDefault: #FFFFFF @ 100% opacity

Font Size

Number (px)Default: 16px

Range: min 8, max 48, step 1

Font Weight

SelectDefault: normal (Normal)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Padding (Top/Bottom)

Number (px)Default: 14px

Range: min 0, max 40, step 1

Padding (Left/Right)

Number (px)Default: 28px

Range: min 0, max 60, step 1

Letter Spacing

Number (px)Default: 0px

Range: min -5, max 10, step 0.5

Add Shadow

ToggleDefault: On

Add a subtle shadow to the button

Shadow Color:

ColorDefault: #000000 @ 5% opacity

Shadow color and opacity

CTA Secondary

Background Type:

SelectDefault: solid (Solid Color)

Choose between a solid color or gradient background

  • solid Solid Color
  • gradient Gradient

Background Color

ColorDefault: #ffffff @ 100% opacity

Gradient Start Color:

ColorDefault: #000000 @ 100% opacity

Gradient End Color:

ColorDefault: #374151 @ 100% opacity

Gradient Direction:

SelectDefault: to right (Left to Right)
  • to right Left to Right
  • to left Right to Left
  • to bottom Top to Bottom
  • to top Bottom to Top
  • to bottom right Top-Left to Bottom-Right
  • to bottom left Top-Right to Bottom-Left
  • to top right Bottom-Left to Top-Right
  • to top left Bottom-Right to Top-Left

Text Color

ColorDefault: #000000 @ 100% opacity

Border Color

ColorDefault: #000000 @ 100% opacity

Border Width

Number (px)Default: 1px

Range: min 0, max 10, step 1

Border Radius

Number (px)Default: 100px

Range: min 0, max 100, step 1

Hover Background Color

ColorDefault: #000000 @ 100% opacity

Hover Text Color

ColorDefault: #FFFFFF @ 100% opacity

Font Size

Number (px)Default: 16px

Range: min 8, max 48, step 1

Font Weight

SelectDefault: normal (Normal)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Padding (Top/Bottom)

Number (px)Default: 14px

Range: min 0, max 40, step 1

Padding (Left/Right)

Number (px)Default: 28px

Range: min 0, max 60, step 1

Letter Spacing

Number (px)Default: 0px

Range: min -5, max 10, step 0.5

Add Shadow

ToggleDefault: On

Add a subtle shadow to the button

Shadow Color:

ColorDefault: #000000 @ 5% opacity

Shadow color and opacity

CTA Tertiary

Background Type:

SelectDefault: solid (Solid Color)

Choose between a solid color or gradient background

  • solid Solid Color
  • gradient Gradient

Background Color

ColorDefault: #374151 @ 100% opacity

Gradient Start Color:

ColorDefault: #000000 @ 100% opacity

Gradient End Color:

ColorDefault: #374151 @ 100% opacity

Gradient Direction:

SelectDefault: to right (Left to Right)
  • to right Left to Right
  • to left Right to Left
  • to bottom Top to Bottom
  • to top Bottom to Top
  • to bottom right Top-Left to Bottom-Right
  • to bottom left Top-Right to Bottom-Left
  • to top right Bottom-Left to Top-Right
  • to top left Bottom-Right to Top-Left

Text Color

ColorDefault: #FFFFFF @ 100% opacity

Border Color

ColorDefault: #374151 @ 100% opacity

Border Width

Number (px)Default: 1px

Range: min 0, max 10, step 1

Border Radius

Number (px)Default: 100px

Range: min 0, max 100, step 1

Hover Background Color

ColorDefault: #1f2937 @ 100% opacity

Hover Text Color

ColorDefault: #FFFFFF @ 100% opacity

Font Size

Number (px)Default: 16px

Range: min 8, max 48, step 1

Font Weight

SelectDefault: normal (Normal)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Padding (Top/Bottom)

Number (px)Default: 14px

Range: min 0, max 40, step 1

Padding (Left/Right)

Number (px)Default: 28px

Range: min 0, max 60, step 1

Letter Spacing

Number (px)Default: 0px

Range: min -5, max 10, step 0.5

Add Shadow

ToggleDefault: On

Add a subtle shadow to the button

Shadow Color:

ColorDefault: #000000 @ 5% opacity

Shadow color and opacity

CTA Four

Background Type:

SelectDefault: solid (Solid Color)

Choose between a solid color or gradient background

  • solid Solid Color
  • gradient Gradient

Background Color

ColorDefault: #000000 @ 0% opacity

Gradient Start Color:

ColorDefault: #000000 @ 100% opacity

Gradient End Color:

ColorDefault: #374151 @ 100% opacity

Gradient Direction:

SelectDefault: to right (Left to Right)
  • to right Left to Right
  • to left Right to Left
  • to bottom Top to Bottom
  • to top Bottom to Top
  • to bottom right Top-Left to Bottom-Right
  • to bottom left Top-Right to Bottom-Left
  • to top right Bottom-Left to Top-Right
  • to top left Bottom-Right to Top-Left

Text Color

ColorDefault: #FFFFFF @ 100% opacity

Border Color

ColorDefault: #FFFFFF @ 100% opacity

Border Width

Number (px)Default: 1px

Range: min 0, max 10, step 1

Border Radius

Number (px)Default: 100px

Range: min 0, max 100, step 1

Hover Background Color

ColorDefault: #FFFFFF @ 100% opacity

Hover Text Color

ColorDefault: #000000 @ 100% opacity

Font Size

Number (px)Default: 16px

Range: min 8, max 48, step 1

Font Weight

SelectDefault: normal (Normal)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Padding (Top/Bottom)

Number (px)Default: 14px

Range: min 0, max 40, step 1

Padding (Left/Right)

Number (px)Default: 28px

Range: min 0, max 60, step 1

Letter Spacing

Number (px)Default: 0px

Range: min -5, max 10, step 0.5

Add Shadow

ToggleDefault: Off

Add a subtle shadow to the button

Shadow Color:

ColorDefault: #000000 @ 5% opacity

Shadow color and opacity

CTA Five

Background Type:

SelectDefault: gradient (Gradient)

Choose between a solid color or gradient background

  • solid Solid Color
  • gradient Gradient

Background Color

ColorDefault: #6366f1 @ 100% opacity

Gradient Start Color:

ColorDefault: #6366f1 @ 100% opacity

Gradient End Color:

ColorDefault: #8b5cf6 @ 100% opacity

Gradient Direction:

SelectDefault: to right (Left to Right)
  • to right Left to Right
  • to left Right to Left
  • to bottom Top to Bottom
  • to top Bottom to Top
  • to bottom right Top-Left to Bottom-Right
  • to bottom left Top-Right to Bottom-Left
  • to top right Bottom-Left to Top-Right
  • to top left Bottom-Right to Top-Left

Text Color

ColorDefault: #FFFFFF @ 100% opacity

Border Color

ColorDefault: #6366f1 @ 0% opacity

Border Width

Number (px)Default: 0px

Range: min 0, max 10, step 1

Border Radius

Number (px)Default: 100px

Range: min 0, max 100, step 1

Hover Background Color

ColorDefault: #4f46e5 @ 100% opacity

Hover Text Color

ColorDefault: #FFFFFF @ 100% opacity

Font Size

Number (px)Default: 16px

Range: min 8, max 48, step 1

Font Weight

SelectDefault: normal (Normal)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Padding (Top/Bottom)

Number (px)Default: 14px

Range: min 0, max 40, step 1

Padding (Left/Right)

Number (px)Default: 28px

Range: min 0, max 60, step 1

Letter Spacing

Number (px)Default: 0px

Range: min -5, max 10, step 0.5

Add Shadow

ToggleDefault: On

Add a subtle shadow to the button

Shadow Color:

ColorDefault: #6366f1 @ 20% opacity

Shadow color and opacity

CTA Six

Background Type:

SelectDefault: gradient (Gradient)

Choose between a solid color or gradient background

  • solid Solid Color
  • gradient Gradient

Background Color

ColorDefault: #059669 @ 100% opacity

Gradient Start Color:

ColorDefault: #059669 @ 100% opacity

Gradient End Color:

ColorDefault: #0d9488 @ 100% opacity

Gradient Direction:

SelectDefault: to right (Left to Right)
  • to right Left to Right
  • to left Right to Left
  • to bottom Top to Bottom
  • to top Bottom to Top
  • to bottom right Top-Left to Bottom-Right
  • to bottom left Top-Right to Bottom-Left
  • to top right Bottom-Left to Top-Right
  • to top left Bottom-Right to Top-Left

Text Color

ColorDefault: #FFFFFF @ 100% opacity

Border Color

ColorDefault: #059669 @ 0% opacity

Border Width

Number (px)Default: 0px

Range: min 0, max 10, step 1

Border Radius

Number (px)Default: 100px

Range: min 0, max 100, step 1

Hover Background Color

ColorDefault: #047857 @ 100% opacity

Hover Text Color

ColorDefault: #FFFFFF @ 100% opacity

Font Size

Number (px)Default: 16px

Range: min 8, max 48, step 1

Font Weight

SelectDefault: normal (Normal)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Padding (Top/Bottom)

Number (px)Default: 14px

Range: min 0, max 40, step 1

Padding (Left/Right)

Number (px)Default: 28px

Range: min 0, max 60, step 1

Letter Spacing

Number (px)Default: 0px

Range: min -5, max 10, step 0.5

Add Shadow

ToggleDefault: On

Add a subtle shadow to the button

Shadow Color:

ColorDefault: #059669 @ 20% opacity

Shadow color and opacity

/// Forms

Submit Form Button

Background Color

ColorDefault: #000000 @ 100% opacity

Text Color

ColorDefault: #FFFFFF @ 100% opacity

Border Color:

ColorDefault: #000000 @ 100% opacity

Border color for the submit button

Border Width:

Number (px)Default: 1px

Border width in pixels

Range: min 0, max 5, step 1

Border Radius

Number (px)Default: 100px

Range: min 0, max 100, step 1

Font Weight

SelectDefault: normal (Normal)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Hover Background Color

ColorDefault: #333333 @ 100% opacity

Hover Text Color

ColorDefault: #FFFFFF @ 100% opacity

Submit Form Button - Alt Version

Background Color

ColorDefault: #000000 @ 0% opacity

Text Color

ColorDefault: #000000 @ 100% opacity

Border Color:

ColorDefault: #000000 @ 100% opacity

Border color for the alt submit button

Border Width:

Number (px)Default: 1px

Border width in pixels

Range: min 0, max 5, step 1

Border Radius

Number (px)Default: 100px

Range: min 0, max 100, step 1

Font Weight

SelectDefault: normal (Normal)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Hover Background Color

ColorDefault: #000000 @ 100% opacity

Hover Text Color

ColorDefault: #FFFFFF @ 100% opacity

Input Field

Background Color

ColorDefault: #FFFFFF @ 100% opacity

Border Color

ColorDefault: #CBD5E1 @ 100% opacity

Border Width

Number (px)Default: 1px

Range: min 0, max 5, step 1

Border Radius

Number (px)Default: 8px

Range: min 0, max 50, step 1

Text Color

ColorDefault: #0F172A @ 100% opacity

Placeholder Color

ColorDefault: #94A3B8 @ 100% opacity

Padding (Top/Bottom)

Number (px)Default: 12px

Range: min 0, max 40, step 1

Padding (Left/Right)

Number (px)Default: 16px

Range: min 0, max 40, step 1

Focus Border Color

ColorDefault: #000000 @ 100% opacity

Border color when field is focused

Labels

Font Size

Number (px)Default: 14px

Range: min 8, max 24, step 1

Font Weight

SelectDefault: normal (Normal)
  • normal Normal
  • bold Bold
  • 100 100
  • 200 200
  • 300 300
  • 400 400
  • 500 500
  • 600 600
  • 700 700
  • 800 800
  • 900 900

Text Color

ColorDefault: #0F172A @ 100% opacity

Margin Bottom

Number (px)Default: 6px

Range: min 0, max 20, step 1

Checkboxes & Radio Buttons

Accent Color

ColorDefault: #000000 @ 100% opacity

Color for selected checkboxes and radio buttons

Label Color

ColorDefault: #0F172A @ 100% opacity

Help Text

Font Size

Number (px)Default: 12px

Range: min 8, max 18, step 1

Text Color

ColorDefault: #64748B @ 100% opacity

GDPR Text

Font Size

Number (px)Default: 12px

Range: min 8, max 18, step 1

Text Color

ColorDefault: #64748B @ 100% opacity

Error Messages

Text Color

ColorDefault: #DC2626 @ 100% opacity

Border Color

ColorDefault: #DC2626 @ 100% opacity

Background Color

ColorDefault: #FEF2F2 @ 100% opacity

Spacing

Field Gap

Number (px)Default: 20px

Vertical space between form fields

Range: min 0, max 60, step 2

Form Padding

Number (px)Default: 0px

Internal padding around the form

Range: min 0, max 60, step 2

/// Layout

Standard Content Width

Number (px)Default: 1400px

Maximum width of the main content area

Range: min 700, max 1600, step 10

Slim Content Width

Number (px)Default: 1000px

Narrower content width for text-heavy pages

Range: min 300, max 1000, step 10

/// Badge

Badge Bottom Spacing:

Number (px)Default: 32px

Space below the badge (h6) element in all modules

Range: min 0, max 60, step 4

Border Radius:

Number (px)Default: 20px

Border radius for all badge styles

Range: min 0, max 40, step 1

Padding (Top/Bottom):

Number (px)Default: 8px

Range: min 0, max 30, step 1

Padding (Left/Right):

Number (px)Default: 20px

Range: min 0, max 50, step 1

Font Size:

Number (px)Default: 14px

Range: min 10, max 24, step 1

Font Weight:

SelectDefault: 500 (Medium)
  • normal Normal
  • 500 Medium
  • 600 Semibold
  • bold Bold

Letter Spacing:

Number (em)Default: 0.02em

Range: min -0.05, max 0.2, step 0.01

/// Badge Primary

Background Type:

SelectDefault: solid (Solid)
  • solid Solid
  • gradient Gradient

Background:

ColorDefault: #ffffff @ 100% opacity

Gradient Start:

ColorDefault: #ffffff @ 100% opacity

Gradient End:

ColorDefault: #ffffff @ 100% opacity

Gradient Direction:

SelectDefault: to right (Left to Right)
  • to right Left to Right
  • to left Right to Left
  • to bottom Top to Bottom
  • to top Bottom to Top
  • to bottom right Top-Left to Bottom-Right
  • to top right Bottom-Left to Top-Right

Text Color:

ColorDefault: #1a1a1a @ 100% opacity

Border Color:

ColorDefault: #e0e0e0 @ 100% opacity

Border Width:

Number (px)Default: 1px

Range: min 0, max 5, step 1

/// Badge Secondary

Background Type:

SelectDefault: solid (Solid)
  • solid Solid
  • gradient Gradient

Background:

ColorDefault: #000000 @ 0% opacity

Gradient Start:

ColorDefault: #000000 @ 100% opacity

Gradient End:

ColorDefault: #000000 @ 100% opacity

Gradient Direction:

SelectDefault: to right (Left to Right)
  • to right Left to Right
  • to left Right to Left
  • to bottom Top to Bottom
  • to top Bottom to Top
  • to bottom right Top-Left to Bottom-Right
  • to top right Bottom-Left to Top-Right

Text Color:

ColorDefault: #000000 @ 100% opacity

Border Color:

ColorDefault: #000000 @ 100% opacity

Border Width:

Number (px)Default: 1px

Range: min 0, max 5, step 1

/// Badge Three

Background Type:

SelectDefault: solid (Solid)
  • solid Solid
  • gradient Gradient

Background:

ColorDefault: #000000 @ 100% opacity

Gradient Start:

ColorDefault: #000000 @ 100% opacity

Gradient End:

ColorDefault: #000000 @ 100% opacity

Gradient Direction:

SelectDefault: to right (Left to Right)
  • to right Left to Right
  • to left Right to Left
  • to bottom Top to Bottom
  • to top Bottom to Top
  • to bottom right Top-Left to Bottom-Right
  • to top right Bottom-Left to Top-Right

Text Color:

ColorDefault: #ffffff @ 100% opacity

Border Color:

ColorDefault: #000000 @ 100% opacity

Border Width:

Number (px)Default: 1px

Range: min 0, max 5, step 1

/// Badge Four

Background Type:

SelectDefault: solid (Solid)
  • solid Solid
  • gradient Gradient

Background:

ColorDefault: #ffffff @ 15% opacity

Gradient Start:

ColorDefault: #000000 @ 100% opacity

Gradient End:

ColorDefault: #000000 @ 100% opacity

Gradient Direction:

SelectDefault: to right (Left to Right)
  • to right Left to Right
  • to left Right to Left
  • to bottom Top to Bottom
  • to top Bottom to Top
  • to bottom right Top-Left to Bottom-Right
  • to top right Bottom-Left to Top-Right

Text Color:

ColorDefault: #ffffff @ 100% opacity

Border Color:

ColorDefault: #ffffff @ 30% opacity

Border Width:

Number (px)Default: 1px

Range: min 0, max 5, step 1

/// Badge Five

Background Type:

SelectDefault: gradient (Gradient)
  • solid Solid
  • gradient Gradient

Background:

ColorDefault: #6366f1 @ 100% opacity

Gradient Start:

ColorDefault: #6366f1 @ 100% opacity

Gradient End:

ColorDefault: #8b5cf6 @ 100% opacity

Gradient Direction:

SelectDefault: to right (Left to Right)
  • to right Left to Right
  • to left Right to Left
  • to bottom Top to Bottom
  • to top Bottom to Top
  • to bottom right Top-Left to Bottom-Right
  • to top right Bottom-Left to Top-Right

Text Color:

ColorDefault: #ffffff @ 100% opacity

Border Color:

ColorDefault: #6366f1 @ 100% opacity

Border Width:

Number (px)Default: 0px

Range: min 0, max 5, step 1

/// Badge Six

Background Type:

SelectDefault: gradient (Gradient)
  • solid Solid
  • gradient Gradient

Background:

ColorDefault: #059669 @ 100% opacity

Gradient Start:

ColorDefault: #059669 @ 100% opacity

Gradient End:

ColorDefault: #0d9488 @ 100% opacity

Gradient Direction:

SelectDefault: to right (Left to Right)
  • to right Left to Right
  • to left Right to Left
  • to bottom Top to Bottom
  • to top Bottom to Top
  • to bottom right Top-Left to Bottom-Right
  • to top right Bottom-Left to Top-Right

Text Color:

ColorDefault: #ffffff @ 100% opacity

Border Color:

ColorDefault: #059669 @ 100% opacity

Border Width:

Number (px)Default: 0px

Range: min 0, max 5, step 1

/// Performance

Reduce Motion:

ToggleDefault: Off

Disables scroll animations, auto-playing tickers, and other motion effects. Improves page load performance and Core Web Vitals. Modules will show static fallback states instead.

/// Blog Settings

Post Page

Post Card Style

SelectDefault: card_shadow (Card with Shadow)

Visual style for blog post cards

  • card_shadow Card with Shadow
  • card_flat Flat Card

Featured Image Aspect Ratio

SelectDefault: 16:9 (16:9)
  • 16:9 16:9
  • 4:3 4:3
  • 1:1 1:1
  • 3:2 3:2

Show Author (in meta)

ToggleDefault: On

Show author name next to the date at the top of the post

Show Author Profile (below post)

ToggleDefault: Off

Show the author avatar + name + bio box at the bottom of the post

Author Profile Style

Background Color
ColorDefault: #F8FAFC @ 100% opacity
Border Color
ColorDefault: #E2E8F0 @ 100% opacity
Border Width
Number (px)Default: 0px

Range: min 0, max 8, step 1

Border Radius
Number (px)Default: 12px

Range: min 0, max 40, step 1

Name Color
ColorDefault: #0F172A @ 100% opacity
Bio Text Color
ColorDefault: #64748B @ 100% opacity

Show Date

ToggleDefault: On

Show Category Tags

ToggleDefault: On

Show Side Menu (Table of Contents)

ToggleDefault: Off

Adds a sticky side menu on desktop and a sticky dropdown on mobile. Edit the menu items in the Post TOC module on each post.

Show Related Posts Tiles

ToggleDefault: On

Shows a grid of recent blog posts at the bottom of each post. Edit the global Blog Post Tiles module to set the blog, columns, and visibility.

Side Menu Settings

Sticky Top Offset
Number (px)Default: 100px

Distance from the top of the viewport when the side menu is pinned.

Range: min 0, max 300, step 5

Sidebar Width (Desktop)
Number (px)Default: 260px

Range: min 180, max 380, step 10

Background
ColorDefault: #FFFFFF @ 100% opacity
Border Color
ColorDefault: #E2E8F0 @ 100% opacity
Border Width
Number (px)Default: 1px

Range: min 0, max 8, step 1

Border Radius
Number (px)Default: 12px

Range: min 0, max 40, step 1

Heading Color
ColorDefault: #0F172A @ 100% opacity
Link Color
ColorDefault: #475569 @ 100% opacity
Link Hover Color
ColorDefault: #0F172A @ 100% opacity
Active Link Color
ColorDefault: #0F172A @ 100% opacity
Active Left Bar Color
ColorDefault: #0F172A @ 100% opacity

Header Override

Menu Mode
SelectDefault: sticky (Sticky (header stays pinned on scroll))
  • standard Standard (header sits in flow)
  • sticky Sticky (header stays pinned on scroll)
  • hidden Hidden (no menu shown at all)
Hide Top Header
ToggleDefault: Off

Hide the top header bar on blog posts

Overlap First Section
ToggleDefault: Off

When ON, the header floats on top of the first section (useful for full-bleed hero images).

Sticky Background Color (at top of page)
ColorDefault: #ffffff @ 100% opacity

Header background color while at the top of the page in Sticky mode.

Post Content

Content Width
Number (px)Default: 1100px

Max width of the blog post content area

Range: min 600, max 1600, step 10

Tag Style
Tag Background
ColorDefault: #0F172A @ 100% opacity
Tag Text
ColorDefault: #FFFFFF @ 100% opacity
Tag Hover Background
ColorDefault: #0F172A @ 85% opacity
Tag Hover Text
ColorDefault: #FFFFFF @ 100% opacity
Tag Border Radius
Number (px)Default: 30px

Range: min 0, max 50, step 1

Typography
///// H2
FontDefault: Inter / 32px / normal / #0F172A

Sets the font specific to the blog post page.

H2 Font Case
SelectDefault: normal (normal)
  • normal normal
  • uppercase uppercase
  • lowercase lowercase
  • capitalize capitalize
H2 Size (Mobile)
Number (px)Default: 28px

Range: min 8, max 100

///// H3
FontDefault: Inter / 26px / normal / #0F172A

Sets the font specific to the blog post page.

H3 Font Case
SelectDefault: normal (normal)
  • normal normal
  • uppercase uppercase
  • lowercase lowercase
  • capitalize capitalize
H3 Size (Mobile)
Number (px)Default: 26px

Range: min 8, max 100

///// H4
FontDefault: Inter / 22px / normal / #0F172A

Sets the font specific to the blog post page.

H4 Font Case
SelectDefault: normal (normal)
  • normal normal
  • uppercase uppercase
  • lowercase lowercase
  • capitalize capitalize
H4 Size (Mobile)
Number (px)Default: 20px

Range: min 8, max 100

///// H5
FontDefault: Inter / 18px / normal / #0F172A

Sets the font specific to the blog post page.

H5 Font Case
SelectDefault: normal (normal)
  • normal normal
  • uppercase uppercase
  • lowercase lowercase
  • capitalize capitalize
H5 Size (Mobile)
Number (px)Default: 16px

Range: min 8, max 100

///// H6
FontDefault: Inter / 16px / normal / #0F172A

Sets the font specific to the blog post page.

H6 Font Case
SelectDefault: normal (normal)
  • normal normal
  • uppercase uppercase
  • lowercase lowercase
  • capitalize capitalize
H6 Size (Mobile)
Number (px)Default: 14px

Range: min 8, max 100

///// Paragraph
FontDefault: Inter / 17px / normal / #1F2937

Sets the paragraph font for the blog post body.

Paragraph Size (Mobile)
Number (px)Default: 16px

Range: min 8, max 100

///// Blockquote
FontDefault: Inter / 20px / #1F2937

Sets the blockquote font and color.

Blockquote Size (Mobile)
Number (px)Default: 18px

Range: min 8, max 100

Blockquote Border Color
ColorDefault: #0F172A @ 100% opacity
Blockquote Line Width
Number (px)Default: 4px

Thickness of the vertical line on the left of the blockquote

Range: min 0, max 20, step 1

///// Lists (UL / OL)
FontDefault: Inter / 17px / normal / #1F2937

Sets the list item font for bullet and numbered lists.

List Size (Mobile)
Number (px)Default: 16px

Range: min 8, max 100

///// Link Color
ColorDefault: #000000 @ 100% opacity
Link Hover Color
ColorDefault: #444444 @ 100% opacity
Underline Links
ToggleDefault: Off

Show underline under links by default

Underline Links on Hover
ToggleDefault: On

Show underline under links when hovered

/// System Pages

Password Page

Background Color:

ColorDefault: #ffffff @ 100% opacity

Background color of the password page

Icon Color:

ColorDefault: #1a1a1a @ 30% opacity

Color and opacity of the lock icon

Title Color:

ColorDefault: #1a1a1a @ 100% opacity

Description Color:

ColorDefault: #334155 @ 100% opacity

Input Border Color:

ColorDefault: #e2e8f0 @ 100% opacity

Input Border Radius:

Number (px)Default: 12px

Range: min 0, max 50, step 2

Button Background:

ColorDefault: #000000 @ 100% opacity

Button Text Color:

ColorDefault: #ffffff @ 100% opacity

Button Border Radius:

Number (px)Default: 100px

Range: min 0, max 100, step 2

Button Hover Background:

ColorDefault: #333333 @ 100% opacity

Error Pages (404/500)

Background Color:

ColorDefault: #ffffff @ 100% opacity

Error Code Color:

ColorDefault: #1a1a1a @ 100% opacity

Color of the large 404/500 number

Title Color:

ColorDefault: #1a1a1a @ 100% opacity

Description Color:

ColorDefault: #334155 @ 100% opacity

Divider Color:

ColorDefault: #1a1a1a @ 15% opacity