Theme settings¶

Theme settings change the whole site at once. Set them first, and every module follows.

Where to find them: open the Themes tool in HubSpot (it sits next to Design Manager), choose Flexoraa Lite and open its settings. You can also open them from a page in the editor, through the theme settings icon in the left toolbar.

Tip

Many module settings say Starts from the Primary color or Starts from the Global Round Corner. That means the module copies the theme value until you change it on that module. Change the theme value and every module that has not been changed follows.

Colors¶

Four colors, the base of everything.

Setting	Default	Used for
Primary	`#1830A9`	Main buttons, links and key accents.
Secondary	`#029CF5`	Supporting buttons, highlights and link hover.
Dark	`#131516`	Dark backgrounds, headings and high-contrast text.
Light	`#F7F7FA`	Light backgrounds and soft surfaces such as cards.

Fonts¶

Setting	Default	Used for
Primary	Plus Jakarta Sans	Titles and headings.
Secondary	Inter	Body text and buttons.

Pick any Google font, or a font you have uploaded to HubSpot.

Typography¶

H1 to H6: the font weight and size of each heading level. Sizes are set for desktop, with a smaller mobile size.
Body font: size, line height, letter spacing and the text color. Body text takes this color everywhere unless a module sets its own.
Link font: weight, size, underline and underline offset for links in text. Links use the Primary color, and the Secondary color on hover.
Spacing under headings and spacing under description: the gap that follows each.

Buttons¶

Six button styles, each with its own look: Primary, Secondary, Primary outline, Secondary outline, White and White outline.

Size: Small, Regular and Large, each with a font size and padding. Default button size is the one buttons use unless a module changes it. Regular is the default.
A module's Style choice on a button picks one of the six. Change a style here and every button using it changes.

Form¶

Forms are styled here, so every HubSpot form on the site matches.

Form element: the text size for help text, input labels, input text, checkboxes and radios, placeholders, error text and consent text.
Spacing: the space below each field (desktop and mobile) and between fields.
Form style 1: a filled light form with soft-tinted fields. Good on light backgrounds.
Form style 2: a second preset, with its own colors, built for dark backgrounds.

The Form module and the blog comment form both let you pick Style 1 or Style 2.

Container and spacing¶

Setting	What it does	Default
Container > Maximum content width	How wide content can grow before it stops and centers.	1240 px
Container > Add container for different device	Turns on separate widths for desktop, tablet and mobile.	Off
Vertical spacing	Space above and below sections, for desktop, tablet and mobile.	80 / 60 / 40 px
Horizontal spacing	Space at the left and right edge, for desktop, tablet and mobile.	40 / 30 / 20 px

Each module's Spacing settings start from these numbers.

Elements¶

Global Shadow: X, Y, blur, spread and color. Any module set to Global Shadow uses it.
Global Round Corner: the corner radius for cards, images and inputs. Default 8 px. Set 0 for square corners or 24 for very round ones.

Website header¶

Mobile menu breakpoint: the screen width up to which the header shows the hamburger menu. Default 1023 px.
Add search functionality: shows a search icon that opens a full-screen search.
Add language switcher: shows a language picker in the header.
Search input: the look of the search field (colors, border, round corner and shadow).

The header's logo, menu and buttons are set on the Simple Navigation module. See the module reference.

System pages¶

Each system page (404, 500, password, search results and the email pages) has its own group for the title, text, card and spacing. See System pages.