404 Error¶

Purpose: The theme's 404 "page not found" system page. Template: templates/system/404.html Settings live in: Theme settings › System page › 404 Error Best for: The system page HubSpot serves when a visitor hits a missing page.

What it does¶

Renders a large error number, a heading, a short description and a single button, over an optional coloured or gradient background with up to two radial glows. This is a template, not a module: there is no page editor, so every setting below comes from Theme settings and the wording comes from the theme's translation files (transl_404_title, transl_404_desc, transl_404_btn).

Elements and the group that styles each¶

Variants worth demoing¶

1. Classic centred — code, title, description and button, all centred
2. Left aligned — Content alignment set to Left
3. Gradient numeral — Error code › Color type set to Gradient
4. Glow backdrop — one or two radial glows behind the content
5. Minimal — Show large error number off, leaving title and button

"I want to…" → do this¶

Complete field reference¶

Every field in Theme settings › System page › 404 Error (exhaustive). Generated from the theme fields.json, do not hand edit. (required) marks required fields. Conditional fields note what reveals them.

• Color scheme (required) — color_scheme · [choice] · choices: light / dark · default: light Light or Dark for this error page
• Background «background» (group)
• Background type (required) — type · [choice] · choices: none / color / gradient · default: none
• Color (required) — color · [color] · default: {"color":"#000046","opacity":100} (shown when type = color)
• Gradient (required) — gradient · [gradient] · default: {"colors":[{"color":{"r":108,"g":71,"b":255,"a":1}},{"color":{"r":1… (shown when type = gradient)
• Add radial glow — add_radial_glow · [boolean] · default: False Enable a radial gradient glow overlay on top of the section background.
• Glow color (required) — glow_color · [color] · default: {"color":"#1CB5E0","opacity":100} (shown when add_radial_glow = true)
• Glow position (required) — glow_position · [choice] · choices: top center / top left / top right / left center / center center / right center / bottom center / bottom left / bottom right · default: top center (shown when add_radial_glow = true)
• Glow size (required) — glow_size · [number] · default: 800 (shown when add_radial_glow = true)
• Glow opacity (required) — glow_opacity · [number] · default: 20 (shown when add_radial_glow = true)
• Add second glow — add_second_glow · [boolean] · default: False (shown when add_radial_glow = true) Enable a second radial glow for a layered depth effect.
• Second glow color (required) — glow_2_color · [color] · default: {"color":"#C084FC","opacity":100} (shown when add_second_glow = true)
• Second glow position (required) — glow_2_position · [choice] · choices: top center / top left / top right / left center / center center / right center / bottom center / bottom left / bottom right · default: bottom right (shown when add_second_glow = true)
• Second glow size (required) — glow_2_size · [number] · default: 600 (shown when add_second_glow = true)
• Second glow opacity (required) — glow_2_opacity · [number] · default: 18 (shown when add_second_glow = true)
• Page container «page_container» (group)
• Choose container (required) — customize_container · [choice] · choices: default / full-width / custom · default: default Theme default, full width, or your own
• Large screen (required) — large_screen · [number] · default: 1240 (shown when customize_container = custom) Applies when Custom
• Medium screen (required) — medium_screen · [number] · default: 600 (shown when customize_container = custom) Applies when Custom
• Small screen (required) — small_screen · [number] · default: 600 (shown when customize_container = custom) Applies when Custom
• Container alignment (required) — container_alignment · [choice] · choices: center / left / right · default: center (shown when customize_container = custom) Applies when Custom
• Inner page container «inner_container» (group)
• Choose container (required) — customize_container · [choice] · choices: default / full-width / custom · default: default Theme default, full width, or your own
• Large screen (required) — large_screen · [number] · default: 760 (shown when customize_container = custom) Applies when Custom
• Medium screen (required) — medium_screen · [number] · default: 760 (shown when customize_container = custom) Applies when Custom
• Small screen (required) — small_screen · [number] · default: 760 (shown when customize_container = custom) Applies when Custom
• Content alignment (required) — content_alignment · [choice] · choices: center / left / right · default: center
• Spacing «spacing» (group)
• Desktop (required) — desktop · [spacing] · default: {"padding":{"top":{"value":120,"units":"px"},"bottom":{"value":120,… · hides: margin
• Tablet (required) — tablet · [spacing] · default: {"padding":{"top":{"value":80,"units":"px"},"bottom":{"value":80,"u… · hides: margin
• Mobile (required) — mobile · [spacing] · default: {"padding":{"top":{"value":60,"units":"px"},"bottom":{"value":60,"u… · hides: margin
• Error code «error_code» (group)
• Show large error number — show_error_code · [boolean] · default: True Hides the large error number on this page
• Font — font · [font] · default: {"variant":"800"} · hides: bold, color, italic, size, underline (shown when show_error_code = true) Family and weight only
• Font size desktop — font_size_desktop · [number] · default: 180 (shown when show_error_code = true)
• Font size tablet — font_size_tablet · [number] · default: 130 (shown when show_error_code = true)
• Font size mobile — font_size_mobile · [number] · default: 96 (shown when show_error_code = true)
• Color type (required) — color_type · [choice] · choices: color / gradient · default: gradient (shown when show_error_code = true)
• Color (required) — color · [color] · default: {"color":"#1CB5E0","opacity":100} (shown when show_error_code = true AND color_type = color)
• Color gradient (required) — color_gradient · [gradient] · default: {"colors":[{"color":{"r":108,"g":71,"b":255,"a":1}},{"color":{"r":1… (shown when show_error_code = true AND color_type = gradient)
• Letter spacing — letter_spacing · [number] · default: -2 (shown when show_error_code = true) Adjust the space between letters in pixels.
• Line height — line_height · [number] · default: 1 (shown when show_error_code = true) 1 keeps the number tight
• Spacing below element desktop — spacing_below_desktop · [number] · default: 8 (shown when show_error_code = true)
• Spacing below element tablet — spacing_below_tablet · [number] · default: 8 (shown when show_error_code = true)
• Spacing below element mobile — spacing_below_mobile · [number] · default: 6 (shown when show_error_code = true)
• Error title «error_title» (group)
• Font — font · [font] · default: {"variant":"700"} · hides: bold, color, italic, size, underline Family and weight only
• Font size desktop — font_size_desktop · [number] · default: 48
• Font size tablet — font_size_tablet · [number] · default: 36
• Font size mobile — font_size_mobile · [number] · default: 28
• Color type (required) — color_type · [choice] · choices: default / color / gradient · default: default Default follows the color scheme
• Color — color · [color] · default: {"color":"#12151B","opacity":100} (shown when color_type = color) Shown when Color type is Color
• Color gradient — color_gradient · [gradient] · default: {"colors":[{"color":{"r":108,"g":71,"b":255,"a":1}},{"color":{"r":1… (shown when color_type = gradient) Shown when Color type is Gradient
• Font Style (required) — font_style · [choice] · choices: none / uppercase / lowercase / capitalize · default: none
• Letter spacing — letter_spacing · [number] · default: -1
• Line height — line_height · [number] · default: 1.15
• Spacing below element desktop — spacing_below_desktop · [number] · default: 18
• Spacing below element tablet — spacing_below_tablet · [number] · default: 16
• Spacing below element mobile — spacing_below_mobile · [number] · default: 14
• Error description «error_description» (group)
• Show description text — show_error_description · [boolean] · default: True Hides the description text on this page
• Font — font · [font] · default: {"variant":"400"} · hides: bold, color, italic, size, underline (shown when show_error_description = true) Family and weight only
• Font size desktop — font_size_desktop · [number] · default: 18 (shown when show_error_description = true)
• Font size tablet — font_size_tablet · [number] · default: 16 (shown when show_error_description = true)
• Font size mobile — font_size_mobile · [number] · default: 16 (shown when show_error_description = true)
• Color type (required) — color_type · [choice] · choices: default / color / gradient · default: default (shown when show_error_description = true) Default follows the color scheme
• Color — color · [color] · default: {"color":"#5A6472","opacity":100} (shown when show_error_description = true AND color_type = color) Shown when Color type is Color
• Color gradient — color_gradient · [gradient] · default: {"colors":[{"color":{"r":108,"g":71,"b":255,"a":1}},{"color":{"r":1… (shown when show_error_description = true AND color_type = gradient) Shown when Color type is Gradient
• Letter spacing — letter_spacing · [number] · default: 0 (shown when show_error_description = true)
• Line height — line_height · [number] · default: 1.7 (shown when show_error_description = true)
• Spacing below element desktop — spacing_below_desktop · [number] · default: 34 (shown when show_error_description = true)
• Spacing below element tablet — spacing_below_tablet · [number] · default: 28 (shown when show_error_description = true)
• Spacing below element mobile — spacing_below_mobile · [number] · default: 24 (shown when show_error_description = true)
• Error button «error_button» (group)
• Show button — show_button · [boolean] · default: True Hides the button on this page
• Style (required) — style · [choice] · choices: btn-1 / btn-2 / btn-3 / btn-4 / btn-5 / btn-6 / btn-7 / btn-8 · default: btn-1 (shown when show_button = true)
• Size (required) — size · [choice] · choices: small / regular / large · default: regular (shown when show_button = true) Overrides the size set on the button style
• Make button full width in mobile — make_full_width_button_in_mobile · [boolean] · default: False (shown when show_button = true) Mobile only

Total fields: 70 · Template: templates/system/404.html

Notes¶

Where the content comes from¶

System pages have no page editor. HubSpot renders the body from its own stock module, and the theme only styles what that module emits. That is why this group holds typography, colour, spacing and layout but no text fields: there is nowhere in the UI to type page copy, so the wording comes from HubSpot (or, for the error pages, from the theme's translation files).

Colour scheme¶

Color scheme is the first field and drives scheme-light / scheme-dark on the section. Every element whose Color type is left on Default follows it, so the page flips between palettes with one control. Set the palettes themselves in Theme settings › Light / Dark color scheme.

Containers¶

Page container sets the outer width, Inner page container the content column. Both offer Theme's default (inherit Theme settings › Container spacing), Full width, or Custom with per breakpoint widths.

Total fields: 70

Known limits¶

• The button link is hardcoded to /. Theme fields.json accepts only boolean / choice / color / font / gradient / group / number / spacing, so a link field cannot exist here. Same reason there is no button icon and no background image option.
• Error title has no show/hide toggle on purpose: it is the page's <h1>, and an error page without one is bad for users and for crawlers.