Style Guide

Headlines

The font for headlines is Spline sans. You can download the web fonts here.
Please use the WOFF and WOFF2 format for better performance.
Class
Size
Line height
Weight
Sample
Display -1
5rem
110%
Regular
Lorem Ipsu
H1 - Default
3.75rem
120%
Bold

Heading 1

H2 - Default
3rem
120%
Bold

Heading 2

H3 - Default
2.4375rem
120%
Semi Bold

Heading 3

H4 - Default
1.9375rem
120%
Semi Bold

Heading 4

H5 - Default
1.5625rem
130%
Medium
Heading 5
H6 -Default
1.25rem
130%
Medium
Heading 6

Buttons

The font for headlines is Spline sans Regular. You can download the webfonts here.
Please use the WOFF and WOFF2 format for better performance.
Class
Default
Hover
Pressed
Focused
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Success!

Thank you! We have received your submission.

Contact Form

Cross Icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Custom Styles
Some Form Elements
hs-form
form-columns-1
form-columns-2
hs-form is main form class.
form-columns-1 is class of wrapper with 1 column for inputs.
form-columns-2 is class of wrapper with 2 columns for inputs.
input and label
hs-input
Field Description / Help text
hs-field-desc
This is help text for the field
Field error message
hs-error-msgs inputs-list
hs-error-msg
  • Error message label
hs-error-msgs inputs-list is an HTML list element.
hs-error-msg is a text span inside HTML List Item element.
Text area Input
hs-input hs-fieldtype-textarea
hs-fieldtype-textarea is added as combo class.
Checkboxes
hs-form-booleancheckbox
hs-form-booleancheckbox-display
inputs-list
hs-input
Note: HubSpot uses basic HTML checkboxes, Webflow checkboxes work differently than the default HTML checkboxes, hence in order to style HubSpot checkboxes you need custom CSS.
you can use Webflow checkbox to style and then copy CSS from it.
Radio Buttons
inputs-list
hs-form-radio
hs-form-radio-display
inputs-list
hs-input
Success message
submitted-message
RecaptCHA
hs-recaptcha
Submit button
hs_submit
hs-button
Oops! Something went wrong while submitting the form.
});