Style Guide
Every element the theme settings control, on one page. Open Theme settings beside this preview and change anything: the specimens below are the real components, so they repaint as you edit.
Section 1
Colours
The six brand slots. Everything else in the theme points at these, so changing one here cascades across the site rather than needing an edit per module.
Theme settings › ColorsPrimary
#1830A9
Secondary
#029CF5
Tertiary
#5B80F4
Dark
#131516
Light
#F7F7FA
White transparent
#FFFFFF · 8%
Section 2
Fonts
Two families carry the whole theme. Primary sets every heading, Secondary sets body copy and button labels. Each row below is set entirely in the font it names.
Theme settings › FontsPlus Jakarta Sans
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. 0123456789
Inter
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs. 0123456789
Section 3
Headings
Each row is a real heading element, not a copy styled to look like one, with every value from its own field group printed beside it. Heading colour is not in this group: the colour subfield is hidden on the field, so it comes from the colour scheme instead. See section 7.
Theme settings › TypographyHeading level 1
- Element
- h1 / .h1
- Font
- Plus Jakarta Sans
- Weight
- 800
- Size
- 44px desktop · 38px tablet · 32px mobile
- Case
- none
- Letter spacing
- -1.5px
- Line height
- 1.1
Heading level 2
- Element
- h2 / .h2
- Font
- Plus Jakarta Sans
- Weight
- 800
- Size
- 38px desktop · 32px tablet · 28px mobile
- Case
- none
- Letter spacing
- -1px
- Line height
- 1.15
Heading level 3
- Element
- h3 / .h3
- Font
- Plus Jakarta Sans
- Weight
- 800
- Size
- 30px desktop · 26px tablet · 24px mobile
- Case
- none
- Letter spacing
- -0.5px
- Line height
- 1.2
Heading level 4
- Element
- h4 / .h4
- Font
- Plus Jakarta Sans
- Weight
- 600
- Size
- 28px desktop · 22px tablet · 22px mobile
- Case
- none
- Letter spacing
- -0.3px
- Line height
- 1.3
Heading level 5
- Element
- h5 / .h5
- Font
- Plus Jakarta Sans
- Weight
- 700
- Size
- 22px desktop · 20px tablet · 20px mobile
- Case
- none
- Letter spacing
- -0.2px
- Line height
- 1.35
Heading level 6
- Element
- h6 / .h6
- Font
- Plus Jakarta Sans
- Weight
- 600
- Size
- 18px desktop · 18px tablet · 18px mobile
- Case
- none
- Letter spacing
- -0.2px
- Line height
- 1.4
Body, links and the two extra styles
Body copy. The quick brown fox jumps over the lazy dog, and keeps jumping until the line wraps so the line height and measure are both visible.
- Element
- body / p
- Font
- Inter
- Weight
- Size
- 16px desktop · 16px tablet · 16px mobile
- Letter spacing
- 0px
- Line height
- 1.7
An inline text link inside a paragraph, which is where the link styles are really seen.
- Font
- Inter
- Weight
- 500
- Size
- 16px desktop · 16px tablet · 16px mobile
- Underline
- off
- Letter spacing
- 0px
- Line height
- 1.7
Typo 1. A secondary text style for captions, meta lines and small print.
- Class
- .typo-1
- Font
- Inter
- Weight
- 300
- Size
- 18px desktop · 16px mobile
Typo 2. A secondary text style for captions, meta lines and small print.
- Class
- .typo-2
- Font
- Inter
- Weight
- Size
- 16px desktop · 16px mobile
Section 4
Buttons
Eight presets, three sizes each. The grid is shown twice, once on a light surface and once on a dark one, because White and White outline are invisible on white and a buyer who only sees them there will think they are broken.
Theme settings › ButtonsWith an icon
Size values
- Size
- small
- Font size
- 14px
- Padding
- 10 / 22 / 10 / 22px
- Size
- regular
- Font size
- 16px
- Padding
- 14 / 31 / 14 / 31px
- Size
- large
- Font size
- 18px
- Padding
- 18 / 40 / 18 / 40px
Site default size: regular. Outline presets subtract their border width from the padding above, so an outline button and a solid one at the same size end up the same height.
Section 5
Navigation
Both navigation types, one after the other, whichever one the theme is set to. Each has its first panel held open, which is the one thing you cannot check on a live page without holding a hover, and the nav row above it keeps its resting colours so both states read at once. The moon in the corner of each frame flips that frame to dark, and leaves the rest of the page alone.
Theme settings › Website header Theme settings › Website footerSimple menu
Simple menu, with the language switcher, the search trigger and the first submenu held open
Megamenu
Megamenu, with the first panel held open: link columns, a badge, the featured card and the footer bar
Footer
The footer is not drawn here. Unlike the header, it is built and styled entirely in its own module, so there is no theme level setting for this page to preview: open footer_classic in the page editor and every column, link and colour is in front of you. Theme settings only chooses which of the footers runs by default.
Theme settings › Website footerThe mobile drawer is not framed either: it covers the whole screen by design, so there is nothing to put a frame around. Narrow the preview to see it. The language switcher only appears on a portal with more than one language, which is HubSpot's own rule and not a theme setting.
Section 6
Container and spacing
Two of these are drawn inside a browser frame at true size, because a width and a gap only mean something against the edge of a screen. Everything inside the frames is the real value from your settings, not an illustration of one.
Theme settings › Container & spacingContainer width
Everything on a page sits inside this. Sections paint edge to edge, their content stops here.
Section spacing, as every module ships it
This is what a module looks like out of the box: .top-xl and .bottom-xl, with .left-m and .right-m either side. Checked across the module set, 34 of 38 ship exactly this pairing and all 38 share the side value. Change it per section in the module's own Spacing settings, or change what XL means for the whole site here.
The rest of the vertical scale
Horizontal scale
Sections 7 and 8
Light and dark
The same eleven things in both schemes, side by side. Dark mode is a separate set of values rather than a filter over the light one, which is only obvious when the two sit next to each other. Every module on the site picks one of these two schemes per section.
Theme settings › Light color scheme Theme settings › Dark color schemeCard
Card title
A card on the light scheme, with the icon, title, description and button a real module would put inside it.
Card buttonBordered card
The same card with the border variant on, so the card border colour is visible against the card surface.
Text
Subtitle
Heading colour
Body text colour, the value most of the reading on the site is set in.
Muted text, for dates, captions and anything secondary.
Error text, used by form validation.
Links
A link at rest and the hover colour, shown side by side because a hover state cannot be printed any other way.
Borders and lines
Divider line, a separate value from the border.
Icons
Accent
Every role in this scheme
Card
Card title
A card on the dark scheme, with the icon, title, description and button a real module would put inside it.
Card buttonBordered card
The same card with the border variant on, so the card border colour is visible against the card surface.
Text
Subtitle
Heading colour
Body text colour, the value most of the reading on the site is set in.
Muted text, for dates, captions and anything secondary.
Error text, used by form validation.
Links
A link at rest and the hover colour, shown side by side because a hover state cannot be printed any other way.
Borders and lines
Divider line, a separate value from the border.
Icons
Accent
Every role in this scheme
Section 9
Forms
All three form styles, side by side. These are written with HubSpot's own form markup and class names, so the theme's form stylesheet paints them exactly as it paints a live form, without needing a form embedded on the page first. Pick the style you want in Theme settings and every form on the site follows.
Theme settings › FormForm style 1
Form style 2
Form style 3
Style 2 is drawn on a dark panel here, since that is the ground it is designed for. The fields are inert on this page by design: it is a specimen, not a form that collects anything.