Email Subscription Preferences¶

Purpose: The full subscription management page, where a recipient ticks which email types they want. Template: templates/system/email-subscription-preferences.html Settings live in: Theme settings › System page › Email subscription preferences Best for: The "manage preferences" link in an email footer.

What it does¶

Renders HubSpot's @hubspot/email_subscriptions module: a heading, the recipient's address, an explanatory line, then one row per subscription type with a checkbox, its name and a description, and finally a global unsubscribe option and the submit button. Every visible element in that markup has a field group; checkboxes, their labels and the button are styled from this group's own fields rather than from Theme › Form.

Elements and the group that styles each¶

On the page	Field group
Heading (`<h1>`)	Title
Recipient address (`<h2>`)	Email address
"If this is not your email address…"	Description — a bare text node, so the block itself is styled
"Uncheck the types…" and "Or check here…"	Instruction line — both `p.header` lines
Checkbox squares	Checkbox — size, corner, border
Text next to each checkbox	Checkbox label
Description under each subscription	Item description
Row gaps and the gap under the list	Between spacing
Submit button	Button — Style 1–8, mobile full width
Card behind the content	Add card → Card

Variants worth demoing¶

Default list — checkbox rows with descriptions beneath
Card layout — Add card on with a border
Dark — Color scheme → Dark
Roomy — larger Between spacing values
Compact — small checkboxes, tight row spacing

"I want to…" → do this¶

Goal	Setting
Resize the checkboxes	`Checkbox › Size`
Bolden the checkbox labels	`Checkbox label › Font` — the weight dropdown
Recolour the labels	`Checkbox label › Color type` → Custom
Space the subscription rows	`Between spacing › Spacing between email preferences`
Change the button style	`Button › Style` — eight theme presets
Full width button on phones	`Button › Make button full width in mobile`

Complete field reference¶

Every field in Theme settings › System page › Email subscription preferences (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 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: custom 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: left
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
Title «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: 36
Font size tablet — font_size_tablet · [number] · default: 28
Font size mobile — font_size_mobile · [number] · default: 24
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: -0.2
Line height — line_height · [number] · default: 1.35
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
Email address «email_address» (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: 20
Font size tablet — font_size_tablet · [number] · default: 18
Font size mobile — font_size_mobile · [number] · default: 16
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: -0.2
Line height — line_height · [number] · default: 1.35
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
Description «description» (group)
Font — font · [font] · default: {"variant":"400"} · hides: bold, color, italic, size, underline Family and weight only
Font size desktop — font_size_desktop · [number] · default: 16
Font size tablet — font_size_tablet · [number] · default: 16
Font size mobile — font_size_mobile · [number] · default: 15
Line height — line_height · [number] · default: 1.35
Color type (required) — color_type · [choice] · choices: default / color / gradient · default: default Default follows the color scheme
Color — color · [color] · default: {"color":"#3A4250","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: -0.2
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
Instruction line «instruction_line» (group)
Font — font · [font] · default: {"variant":"400"} · hides: bold, color, italic, size, underline Family and weight only
Font size desktop — font_size_desktop · [number] · default: 16
Font size tablet — font_size_tablet · [number] · default: 16
Font size mobile — font_size_mobile · [number] · default: 15
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: -0.2
Line height — line_height · [number] · default: 1.35
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
Item description «item_description» (group)
Font — font · [font] · default: {"variant":"400"} · hides: bold, color, italic, size, underline Family and weight only
Font size desktop — font_size_desktop · [number] · default: 16
Font size tablet — font_size_tablet · [number] · default: 15
Font size mobile — font_size_mobile · [number] · default: 14
Color type (required) — color_type · [choice] · choices: default / color / gradient · default: default Default follows the color scheme
Color — color · [color] · default: {"color":"#3A4250","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: -0.2
Line height — line_height · [number] · default: 1.35
Spacing below element desktop — spacing_below_desktop · [number] · default: 4
Spacing below element tablet — spacing_below_tablet · [number] · default: 4
Spacing below element mobile — spacing_below_mobile · [number] · default: 4
Between spacing «between_spacing» (group)
Spacing between email preferences desktop (required) — spacing_between_email_preferences_desktop · [number] · default: 32 Desktop value
Spacing between email preferences tablet (required) — spacing_between_email_preferences_tablet · [number] · default: 28 Tablet value
Spacing between email preferences mobile (required) — spacing_between_email_preferences_mobile · [number] · default: 20 Mobile value
Spacing below subscription options desktop (required) — spacing_below_subscription_options_desktop · [number] · default: 18 Desktop value
Spacing below subscription options tablet (required) — spacing_below_subscription_options_tablet · [number] · default: 18 Tablet value
Spacing below subscription options mobile (required) — spacing_below_subscription_options_mobile · [number] · default: 18 Mobile value
Checkbox «checkbox» (group)
Size (required) — size · [number] · default: 20 Width and height
Round corner (required) — round_corner · [number] · default: 6 100 makes it fully round
Show border — show_border · [boolean] · default: True Border when unselected
Border width (required) — border_width · [number] · default: 1 (shown when show_border = true) Shown when Show border is on
Checkbox label «checkbox_label» (group)
Font — font · [font] · default: {"variant":"700"} · hides: bold, color, italic, size, underline Family and weight only
Font size desktop (required) — font_size_desktop · [number] · default: 16 Desktop size
Font size tablet (required) — font_size_tablet · [number] · default: 15 Tablet size
Font size mobile (required) — font_size_mobile · [number] · default: 14 Mobile size
Letter spacing (required) — letter_spacing · [number] · default: 0 Negative tightens
Line height (required) — line_height · [number] · default: 1.25 1.25 is comfortable
Color type (required) — color_type · [choice] · choices: default / custom · default: default Default follows the color scheme
Color — color · [color] · default: {"color":"#3A4250","opacity":100} (shown when color_type = custom) Shown when Label color type is Custom
Button «button» (group)
Style (required) — style · [choice] · choices: btn-1 / btn-2 / btn-3 / btn-4 / btn-5 / btn-6 / btn-7 / btn-8 · default: btn-1 Overrides the Form style's own button
Make button full width in mobile — make_full_width_button_in_mobile · [boolean] · default: False Mobile only
Add card — add_card · [boolean] · default: False
Card «card» (group — inline) (shown when add_card = true)
Background type (required) — background_type · [choice] · choices: default / color / gradient · default: default Default follows the color scheme
Background color — background_color · [color] · default: {"color":"#FBFCFE","opacity":100} (shown when background_type = color) Shown when Background type is Color
Background gradient (required) — background_gradient · [gradient] · default: {"colors":[{"color":{"r":108,"g":71,"b":255,"a":1}},{"color":{"r":1… (shown when background_type = gradient)
Round corner (required) — round_corner · [choice] · choices: round-0 / round-s / round-m / round-l / round-xl / round-xxl / custom · default: round-xl Theme scale, or Custom for your own value
Custom round corner (required) — custom_round_corner · [number] · default: 16 (shown when round_corner = custom) Shown when Round corner is Custom
Show border — show_border · [boolean] · default: False
Border width — border_width · [number] · default: 1 (shown when show_border = true)
Border color (required) — border_color · [choice] · choices: default / custom · default: default (shown when show_border = true) Default follows the color scheme
Custom border color — custom_border_color · [color] · default: {"color":"#E3E7EE","opacity":100} (shown when show_border = true AND border_color = custom) Shown when Border color is Custom
Shadow (required) — shadow · [choice] · choices: none / light-shadow / regular-shadow / dark-shadow · default: none Presets from Theme Settings, Elements, Shadows
Card spacing desktop (required) — spacing_in_card_desktop · [spacing] · default: {"padding":{"top":{"value":44,"units":"px"},"bottom":{"value":44,"u… · hides: margin
Card spacing tablet (required) — spacing_in_card_tablet · [spacing] · default: {"padding":{"top":{"value":36,"units":"px"},"bottom":{"value":36,"u… · hides: margin
Card spacing mobile (required) — spacing_in_card_mobile · [spacing] · default: {"padding":{"top":{"value":28,"units":"px"},"bottom":{"value":28,"u… · hides: margin

Total fields: 126 · Template: templates/system/email-subscription-preferences.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: 126

Checkboxes¶

Colours are fixed to the scheme and are not fields: white when unselected with a --f-border border, the Accent colour when selected, white tick. Only size, corner radius and border width are adjustable. The same styling covers the global "Unsubscribe me from all mailing lists" checkbox.

No Form style group¶

This page has no link to Theme › Form. Its checkbox, label and button are fully self contained, so changing a form style in Theme settings does not affect it.