Primary (Pop!) Color
Main accent color used across the site
Docs / Getting Started / 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.
#000000 @ 100% opacityMain accent color used across the site
#000000 @ 100% opacitySecondary accent color for highlights and supporting elements
Inter / 16px / bold / #0F172AGlobal default font for all headings
Inter / 16px / normal / #0F172AGlobal default font for body text and paragraphs
#0F172A @ 100% opacityDefault color for all body text
#0F172A @ 100% opacityDefault color for all headings
#374151 @ 100% opacityDefault color for hyperlinks
#000000 @ 100% opacityColor for hyperlinks on hover
Inter / 16px / normal / #0F172A16pxRange: min 8, max 48, step 1
14pxRange: min 8, max 48, step 1
normal (Normal)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 900none (Normal)none Normaluppercase Uppercaselowercase Lowercasecapitalize Capitalize0pxRange: min -10, max 10, step 0.5
Inter / 14px / normal / #0F172A16pxFont size for column headings (e.g. Product, Company)
Range: min 10, max 24, step 1
16pxFont size for column headings on mobile
Range: min 10, max 24, step 1
14pxFont size for navigation links
Range: min 8, max 48, step 1
14pxFont size for navigation links on mobile
Range: min 8, max 48, step 1
normal (Normal)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 900none (Normal)none Normaluppercase Uppercaselowercase Lowercasecapitalize Capitalize0pxRange: min -10, max 10, step 0.5
Inter / 52px / bold / #0F172AFont family for H1 elements
52pxRange: min 8, max 200, step 1
32pxRange: min 8, max 200, step 1
bold (Bold)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 900none (Normal)none Normaluppercase Uppercaselowercase Lowercasecapitalize Capitalize0pxRange: min -10, max 10, step 0.5
1.2Range: min 0.5, max 3, step 0.1
Inter / 42px / bold / #0F172AFont family for H2 elements
42pxRange: min 8, max 200, step 1
28pxRange: min 8, max 200, step 1
bold (Bold)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 900none (Normal)none Normaluppercase Uppercaselowercase Lowercasecapitalize Capitalize0pxRange: min -10, max 10, step 0.5
1.2Range: min 0.5, max 3, step 0.1
Inter / 34px / bold / #0F172AFont family for H3 elements
34pxRange: min 8, max 200, step 1
24pxRange: min 8, max 200, step 1
bold (Bold)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 900none (Normal)none Normaluppercase Uppercaselowercase Lowercasecapitalize Capitalize0pxRange: min -10, max 10, step 0.5
1.2Range: min 0.5, max 3, step 0.1
Inter / 26px / bold / #0F172AFont family for H4 elements
26pxRange: min 8, max 200, step 1
22pxRange: min 8, max 200, step 1
bold (Bold)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 900none (Normal)none Normaluppercase Uppercaselowercase Lowercasecapitalize Capitalize0pxRange: min -10, max 10, step 0.5
1.2Range: min 0.5, max 3, step 0.1
Inter / 20px / bold / #0F172AFont family for H5 elements
20pxRange: min 8, max 200, step 1
18pxRange: min 8, max 200, step 1
bold (Bold)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 900none (Normal)none Normaluppercase Uppercaselowercase Lowercasecapitalize Capitalize0pxRange: min -10, max 10, step 0.5
1.2Range: min 0.5, max 3, step 0.1
Inter / 16px / bold / #0F172AFont family for H6 elements
16pxRange: min 8, max 200, step 1
14pxRange: min 8, max 200, step 1
bold (Bold)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 900none (Normal)none Normaluppercase Uppercaselowercase Lowercasecapitalize Capitalize0pxRange: min -10, max 10, step 0.5
1.2Range: min 0.5, max 3, step 0.1
Inter / 16px / normal / #0F172A16pxRange: min 8, max 48, step 1
16pxRange: min 8, max 48, step 1
normal (Normal)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 9001.6Range: min 0.5, max 3, step 0.1
Inter / 16px / normal / #0F172A16pxRange: min 8, max 48, step 1
16pxRange: min 8, max 48, step 1
normal (Normal)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 9001.6Range: min 0.5, max 3, step 0.1
8pxSpace between list items
Range: min 0, max 40, step 1
Inter / 18px / normal / #0F172A18pxRange: min 8, max 48, step 1
16pxRange: min 8, max 48, step 1
normal (Normal)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 9001.6Range: min 0.5, max 3, step 0.1
#000000 @ 100% opacityLeft border accent color
4pxRange: min 1, max 10, step 1
#475569 @ 100% opacitysolid (Solid Color)Choose between a solid color or gradient background
solid Solid Colorgradient Gradient#000000 @ 100% opacity#000000 @ 100% opacity#374151 @ 100% opacityto right (Left to Right)to right Left to Rightto left Right to Leftto bottom Top to Bottomto top Bottom to Topto bottom right Top-Left to Bottom-Rightto bottom left Top-Right to Bottom-Leftto top right Bottom-Left to Top-Rightto top left Bottom-Right to Top-Left#FFFFFF @ 100% opacity#000000 @ 100% opacity1pxRange: min 0, max 10, step 1
100pxRange: min 0, max 100, step 1
#333333 @ 100% opacity#FFFFFF @ 100% opacity16pxRange: min 8, max 48, step 1
normal (Normal)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 90014pxRange: min 0, max 40, step 1
28pxRange: min 0, max 60, step 1
0pxRange: min -5, max 10, step 0.5
OnAdd a subtle shadow to the button
#000000 @ 5% opacityShadow color and opacity
solid (Solid Color)Choose between a solid color or gradient background
solid Solid Colorgradient Gradient#ffffff @ 100% opacity#000000 @ 100% opacity#374151 @ 100% opacityto right (Left to Right)to right Left to Rightto left Right to Leftto bottom Top to Bottomto top Bottom to Topto bottom right Top-Left to Bottom-Rightto bottom left Top-Right to Bottom-Leftto top right Bottom-Left to Top-Rightto top left Bottom-Right to Top-Left#000000 @ 100% opacity#000000 @ 100% opacity1pxRange: min 0, max 10, step 1
100pxRange: min 0, max 100, step 1
#000000 @ 100% opacity#FFFFFF @ 100% opacity16pxRange: min 8, max 48, step 1
normal (Normal)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 90014pxRange: min 0, max 40, step 1
28pxRange: min 0, max 60, step 1
0pxRange: min -5, max 10, step 0.5
OnAdd a subtle shadow to the button
#000000 @ 5% opacityShadow color and opacity
solid (Solid Color)Choose between a solid color or gradient background
solid Solid Colorgradient Gradient#374151 @ 100% opacity#000000 @ 100% opacity#374151 @ 100% opacityto right (Left to Right)to right Left to Rightto left Right to Leftto bottom Top to Bottomto top Bottom to Topto bottom right Top-Left to Bottom-Rightto bottom left Top-Right to Bottom-Leftto top right Bottom-Left to Top-Rightto top left Bottom-Right to Top-Left#FFFFFF @ 100% opacity#374151 @ 100% opacity1pxRange: min 0, max 10, step 1
100pxRange: min 0, max 100, step 1
#1f2937 @ 100% opacity#FFFFFF @ 100% opacity16pxRange: min 8, max 48, step 1
normal (Normal)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 90014pxRange: min 0, max 40, step 1
28pxRange: min 0, max 60, step 1
0pxRange: min -5, max 10, step 0.5
OnAdd a subtle shadow to the button
#000000 @ 5% opacityShadow color and opacity
solid (Solid Color)Choose between a solid color or gradient background
solid Solid Colorgradient Gradient#000000 @ 0% opacity#000000 @ 100% opacity#374151 @ 100% opacityto right (Left to Right)to right Left to Rightto left Right to Leftto bottom Top to Bottomto top Bottom to Topto bottom right Top-Left to Bottom-Rightto bottom left Top-Right to Bottom-Leftto top right Bottom-Left to Top-Rightto top left Bottom-Right to Top-Left#FFFFFF @ 100% opacity#FFFFFF @ 100% opacity1pxRange: min 0, max 10, step 1
100pxRange: min 0, max 100, step 1
#FFFFFF @ 100% opacity#000000 @ 100% opacity16pxRange: min 8, max 48, step 1
normal (Normal)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 90014pxRange: min 0, max 40, step 1
28pxRange: min 0, max 60, step 1
0pxRange: min -5, max 10, step 0.5
OffAdd a subtle shadow to the button
#000000 @ 5% opacityShadow color and opacity
gradient (Gradient)Choose between a solid color or gradient background
solid Solid Colorgradient Gradient#6366f1 @ 100% opacity#6366f1 @ 100% opacity#8b5cf6 @ 100% opacityto right (Left to Right)to right Left to Rightto left Right to Leftto bottom Top to Bottomto top Bottom to Topto bottom right Top-Left to Bottom-Rightto bottom left Top-Right to Bottom-Leftto top right Bottom-Left to Top-Rightto top left Bottom-Right to Top-Left#FFFFFF @ 100% opacity#6366f1 @ 0% opacity0pxRange: min 0, max 10, step 1
100pxRange: min 0, max 100, step 1
#4f46e5 @ 100% opacity#FFFFFF @ 100% opacity16pxRange: min 8, max 48, step 1
normal (Normal)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 90014pxRange: min 0, max 40, step 1
28pxRange: min 0, max 60, step 1
0pxRange: min -5, max 10, step 0.5
OnAdd a subtle shadow to the button
#6366f1 @ 20% opacityShadow color and opacity
gradient (Gradient)Choose between a solid color or gradient background
solid Solid Colorgradient Gradient#059669 @ 100% opacity#059669 @ 100% opacity#0d9488 @ 100% opacityto right (Left to Right)to right Left to Rightto left Right to Leftto bottom Top to Bottomto top Bottom to Topto bottom right Top-Left to Bottom-Rightto bottom left Top-Right to Bottom-Leftto top right Bottom-Left to Top-Rightto top left Bottom-Right to Top-Left#FFFFFF @ 100% opacity#059669 @ 0% opacity0pxRange: min 0, max 10, step 1
100pxRange: min 0, max 100, step 1
#047857 @ 100% opacity#FFFFFF @ 100% opacity16pxRange: min 8, max 48, step 1
normal (Normal)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 90014pxRange: min 0, max 40, step 1
28pxRange: min 0, max 60, step 1
0pxRange: min -5, max 10, step 0.5
OnAdd a subtle shadow to the button
#059669 @ 20% opacityShadow color and opacity
#000000 @ 100% opacity#FFFFFF @ 100% opacity#000000 @ 100% opacityBorder color for the submit button
1pxBorder width in pixels
Range: min 0, max 5, step 1
100pxRange: min 0, max 100, step 1
normal (Normal)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 900#333333 @ 100% opacity#FFFFFF @ 100% opacity#000000 @ 0% opacity#000000 @ 100% opacity#000000 @ 100% opacityBorder color for the alt submit button
1pxBorder width in pixels
Range: min 0, max 5, step 1
100pxRange: min 0, max 100, step 1
normal (Normal)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 900#000000 @ 100% opacity#FFFFFF @ 100% opacity#FFFFFF @ 100% opacity#CBD5E1 @ 100% opacity1pxRange: min 0, max 5, step 1
8pxRange: min 0, max 50, step 1
#0F172A @ 100% opacity#94A3B8 @ 100% opacity12pxRange: min 0, max 40, step 1
16pxRange: min 0, max 40, step 1
#000000 @ 100% opacityBorder color when field is focused
14pxRange: min 8, max 24, step 1
normal (Normal)normal Normalbold Bold100 100200 200300 300400 400500 500600 600700 700800 800900 900#0F172A @ 100% opacity6pxRange: min 0, max 20, step 1
#000000 @ 100% opacityColor for selected checkboxes and radio buttons
#0F172A @ 100% opacity12pxRange: min 8, max 18, step 1
#64748B @ 100% opacity12pxRange: min 8, max 18, step 1
#64748B @ 100% opacity#DC2626 @ 100% opacity#DC2626 @ 100% opacity#FEF2F2 @ 100% opacity20pxVertical space between form fields
Range: min 0, max 60, step 2
0pxInternal padding around the form
Range: min 0, max 60, step 2
1400pxMaximum width of the main content area
Range: min 700, max 1600, step 10
1000pxNarrower content width for text-heavy pages
Range: min 300, max 1000, step 10
32pxSpace below the badge (h6) element in all modules
Range: min 0, max 60, step 4
20pxBorder radius for all badge styles
Range: min 0, max 40, step 1
8pxRange: min 0, max 30, step 1
20pxRange: min 0, max 50, step 1
14pxRange: min 10, max 24, step 1
500 (Medium)normal Normal500 Medium600 Semiboldbold Bold0.02emRange: min -0.05, max 0.2, step 0.01
solid (Solid)solid Solidgradient Gradient#ffffff @ 100% opacity#ffffff @ 100% opacity#ffffff @ 100% opacityto right (Left to Right)to right Left to Rightto left Right to Leftto bottom Top to Bottomto top Bottom to Topto bottom right Top-Left to Bottom-Rightto top right Bottom-Left to Top-Right#1a1a1a @ 100% opacity#e0e0e0 @ 100% opacity1pxRange: min 0, max 5, step 1
solid (Solid)solid Solidgradient Gradient#000000 @ 0% opacity#000000 @ 100% opacity#000000 @ 100% opacityto right (Left to Right)to right Left to Rightto left Right to Leftto bottom Top to Bottomto top Bottom to Topto bottom right Top-Left to Bottom-Rightto top right Bottom-Left to Top-Right#000000 @ 100% opacity#000000 @ 100% opacity1pxRange: min 0, max 5, step 1
solid (Solid)solid Solidgradient Gradient#000000 @ 100% opacity#000000 @ 100% opacity#000000 @ 100% opacityto right (Left to Right)to right Left to Rightto left Right to Leftto bottom Top to Bottomto top Bottom to Topto bottom right Top-Left to Bottom-Rightto top right Bottom-Left to Top-Right#ffffff @ 100% opacity#000000 @ 100% opacity1pxRange: min 0, max 5, step 1
solid (Solid)solid Solidgradient Gradient#ffffff @ 15% opacity#000000 @ 100% opacity#000000 @ 100% opacityto right (Left to Right)to right Left to Rightto left Right to Leftto bottom Top to Bottomto top Bottom to Topto bottom right Top-Left to Bottom-Rightto top right Bottom-Left to Top-Right#ffffff @ 100% opacity#ffffff @ 30% opacity1pxRange: min 0, max 5, step 1
gradient (Gradient)solid Solidgradient Gradient#6366f1 @ 100% opacity#6366f1 @ 100% opacity#8b5cf6 @ 100% opacityto right (Left to Right)to right Left to Rightto left Right to Leftto bottom Top to Bottomto top Bottom to Topto bottom right Top-Left to Bottom-Rightto top right Bottom-Left to Top-Right#ffffff @ 100% opacity#6366f1 @ 100% opacity0pxRange: min 0, max 5, step 1
gradient (Gradient)solid Solidgradient Gradient#059669 @ 100% opacity#059669 @ 100% opacity#0d9488 @ 100% opacityto right (Left to Right)to right Left to Rightto left Right to Leftto bottom Top to Bottomto top Bottom to Topto bottom right Top-Left to Bottom-Rightto top right Bottom-Left to Top-Right#ffffff @ 100% opacity#059669 @ 100% opacity0pxRange: min 0, max 5, step 1
OffDisables scroll animations, auto-playing tickers, and other motion effects. Improves page load performance and Core Web Vitals. Modules will show static fallback states instead.
card_shadow (Card with Shadow)Visual style for blog post cards
card_shadow Card with Shadowcard_flat Flat Card16:9 (16:9)16:9 16:94:3 4:31:1 1:13:2 3:2OnShow author name next to the date at the top of the post
OffShow the author avatar + name + bio box at the bottom of the post
#F8FAFC @ 100% opacity#E2E8F0 @ 100% opacity0pxRange: min 0, max 8, step 1
12pxRange: min 0, max 40, step 1
#0F172A @ 100% opacity#64748B @ 100% opacityOnOnOffAdds a sticky side menu on desktop and a sticky dropdown on mobile. Edit the menu items in the Post TOC module on each post.
OnShows 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.
100pxDistance from the top of the viewport when the side menu is pinned.
Range: min 0, max 300, step 5
260pxRange: min 180, max 380, step 10
#FFFFFF @ 100% opacity#E2E8F0 @ 100% opacity1pxRange: min 0, max 8, step 1
12pxRange: min 0, max 40, step 1
#0F172A @ 100% opacity#475569 @ 100% opacity#0F172A @ 100% opacity#0F172A @ 100% opacity#0F172A @ 100% opacitysticky (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)OffHide the top header bar on blog posts
OffWhen ON, the header floats on top of the first section (useful for full-bleed hero images).
OffHide the global header's default/standard logo on blog posts.
OffHide the global header's sticky logo on blog posts.
#ffffff @ 100% opacityHeader background color while at the top of the page in Sticky mode.
1100pxMax width of the blog post content area
Range: min 600, max 1600, step 10
#0F172A @ 100% opacity#FFFFFF @ 100% opacity#0F172A @ 85% opacity#FFFFFF @ 100% opacity30pxRange: min 0, max 50, step 1
Inter / 32px / normal / #0F172ASets the font specific to the blog post page.
normal (normal)normal normaluppercase uppercaselowercase lowercasecapitalize capitalize28pxRange: min 8, max 100
Inter / 26px / normal / #0F172ASets the font specific to the blog post page.
normal (normal)normal normaluppercase uppercaselowercase lowercasecapitalize capitalize26pxRange: min 8, max 100
Inter / 22px / normal / #0F172ASets the font specific to the blog post page.
normal (normal)normal normaluppercase uppercaselowercase lowercasecapitalize capitalize20pxRange: min 8, max 100
Inter / 18px / normal / #0F172ASets the font specific to the blog post page.
normal (normal)normal normaluppercase uppercaselowercase lowercasecapitalize capitalize16pxRange: min 8, max 100
Inter / 16px / normal / #0F172ASets the font specific to the blog post page.
normal (normal)normal normaluppercase uppercaselowercase lowercasecapitalize capitalize14pxRange: min 8, max 100
Inter / 17px / normal / #1F2937Sets the paragraph font for the blog post body.
16pxRange: min 8, max 100
Inter / 20px / #1F2937Sets the blockquote font and color.
18pxRange: min 8, max 100
#0F172A @ 100% opacity4pxThickness of the vertical line on the left of the blockquote
Range: min 0, max 20, step 1
Inter / 17px / normal / #1F2937Sets the list item font for bullet and numbered lists.
16pxRange: min 8, max 100
#000000 @ 100% opacity#444444 @ 100% opacityOffShow underline under links by default
OnShow underline under links when hovered
#ffffff @ 100% opacityBackground color of the password page
#1a1a1a @ 30% opacityColor and opacity of the lock icon
#1a1a1a @ 100% opacity#334155 @ 100% opacity#e2e8f0 @ 100% opacity12pxRange: min 0, max 50, step 2
#000000 @ 100% opacity#ffffff @ 100% opacity100pxRange: min 0, max 100, step 2
#333333 @ 100% opacity#ffffff @ 100% opacity#1a1a1a @ 100% opacityColor of the large 404/500 number
#1a1a1a @ 100% opacity#334155 @ 100% opacity#1a1a1a @ 15% opacity