Typography
HTML headings
All H1 Headings

Heading 1

All H2 Headings

Heading 2

All H3 Headings

Heading 3

All H4 Headings

Heading 4

All H5 Headings
Heading 5
All H6 Headings
Heading 6
Heading classes
heading-xxlarge

Heading-xxlarge

heading-xlarge

Heading-xlarge

heading-large

Heading-large

heading-medium

Heading-medium

heading-small

Heading-small

heading-xsmall

Heading-xsmall

Other HTML tags
All Paragraphs

All Paragraph (HTML Tag) In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

All Links
All Links
All Block Quotes
Block quote
All Unordered Lists
  • No bullet list

  • No bullet list

All Unordered Lists
  • No bullet list

  • No bullet list

All Ordered Lists
  1. No bullet list

  2. No bullet list

  3. No bullet list

Text sizes
text-size-large

In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

text-size-medium

In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

text-size-regular

In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

text-size-small

In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

text-size-tiny

In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.

Text weights
text-weight-bold
text-weight-bold
text-weight-semibold
text-weight-semibold
text-weight-medium
text-weight-medium
text-weight-normal
text-weight-normal
Text letter spacings
text-letterspacing-xwide
A Lorem ipsum dolor sit amet
text-letterspacing-wide
A Lorem ipsum dolor sit amet
text-letterspacing-normal
A Lorem ipsum dolor sit amet
text-letterspacing-tight
A Lorem ipsum dolor sit amet
text-letterspacing-xtight
A Lorem ipsum dolor sit amet
Text line heights
text-lineheight-xtall
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
text-lineheight-tall
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
text-lineheight-normal
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
text-lineheight-short
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
text-lineheight-xshort
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
text-lineheight-none
In a world older and more complete than ours, they move finished and complete, gifted with the extension of the senses we have lost or never attained, living by voices we shall never hear. They are not brethren, they are not underlings: they are other nations, caught with ourselves in the net of life and time, fellow prisoners of the splendour and travail of the earth.
Text styles
text-style-italic
text-style-italic
text-style-strikethrough
text-style-strikethrough
text-style-allcaps
text-style-allcaps
text-style-nowrap
text-style-nowrap
text-style-quote
text-style-quote
text-style-link
text-style-2lines
text-style-2lines
text-style-3lines
text-style-3lines
text-style-muted
text-style-muted
Text alignment
text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right
Rich text
text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
This is a block quote

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

This is a link inside of a rich text

  • List item
  • List item
  • List item
  1. List item
  2. List item
  3. List item
Caption goes here

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Even the most well-oiled construction projects can face scheduling problems, layout errors, or trade conflicts. These issues slow down productivity and make it nearly impossible to complete construction projects on time and within budget. Improving construction productivity is critical for managing costs, especially with an increasing skilled labor shortage and rising material costs. Read on to learn the 5 tips to improve construction productivity, significantly compress schedules, and reduce laborious rework.

  1. Utilize Technology

Many companies already invest in Building Information Modeling (BIM) technology for designing and planning construction projects. This enables architects, engineers, and contractors to collaborate on building designs in real-time and identify potential conflicts before they cause problems in the field. However, the accuracy and detail of the BIM model get lost in translation during manual chalk-line layout.

With BIM-to-field layout, companies can optimize their existing investment in BIM while maximizing the benefits of BIM data. Dusty Robotics’ FieldPrinter autonomously prints all trades’ layout directly onto the construction site floor with 100% accuracy. The robotic layout solution works seamlessly with existing CAD or Revit files, acting as a single source of truth for all trades’ data. Technology is improving the way construction is done, and using tools like Dusty’s FieldPrinter can help your company complete construction layout in half the time with fewer errors.

  1. Reduce Risk

Manual layout introduces risk into a construction project. Using the chalk-line method is the most physically demanding part of a foreman’s job, and manually measuring and marking reference points is prone to errors. With each trade conducting layout separately, mistakes are often not identified until the installation has already started, resulting in lengthy and expensive rework.

Using a robotic layout solution eliminates those risks and reduces rework. By automating multi-trade layout in a single pass with 100% accuracy to the BIM data, the layout reflects the exact building design. The coordinated layout on the floor enables foremen from each trade to walk the floor together and identify any potential conflicts sooner, giving them more time to resolve issues that may derail the project. For instance, Dusty’s FieldPrinter gave one of the world’s largest construction companies a 75% reduction in rework.

  1. Compress Schedules

Traditionally, layout typically consumes several weeks on the construction schedule per floor. Each floor of the construction site would be cleared for each trade to manually lay out their necessary points, lines, and labels.  Once the installation has started, any mistakes from the manual layout would require additional time to resolve issues.

Instead, with BIM-to-field layout, multi-trade layout can be accurately printed in one pass and schedules can be compressed from weeks to days. This enables the installation to happen immediately, improving installation speed and accuracy while reducing costly rework.

  1. Improve Communication

With so many individuals involved in construction projects, communication can determine the overall project's success. Miscommunication throughout the design, layout or installation process threatens this success and leads to expensive and time-consuming errors. Technology is critical in improving communication at every stage of the construction project. Using BIM for the project design helps facilitate timely and clear communication between all of the architects, engineers, and trades involved. Moreover, leveraging BIM-driven layout carries that coordination into the field.

With BIM-to-field layout, collaboration is facilitated and conflict is eliminated between trades. Using Dusty’s FieldPrinter to print multi-trade layout is proven to enhance communication between trades, while the coordinated layout provides clear instructions for starting installation. As Southland Industries noted, “Dusty is helping trades communicate with each other. Everyone is on the same page.”

  1. Invest in Safety & Training

The construction industry is going through generational changes, with many seasoned workers retiring and fewer young workers joining the workforce. With this shortage of skilled workers, it’s imperative that new talent is trained properly on rules, safety, and compliance. Compliance is a complex but critical aspect of construction work, and the consequences of breaking compliance can be damaging to the entire company. Training helps ensure that all contractors and subcontractors in the field are aware of and able to comply with the different rules and regulations for every project.

The construction industry has the highest average of missed work days due to workplace injuries, with 36% of injuries occurring during a worker’s first year on the job. Companies can help prevent workplace injuries by implementing an effective safety program with comprehensive safety training for new and existing employees. Using technology like the autonomous FieldPrinter can also assist in improving safety by reducing the amount of arduous manual labor performed during layout.

Now is the Time to Invest in Improving Construction

The construction industry is facing some of the most significant challenges yet– skilled labor shortages, supply chain issues, rising costs, and delays. However, there are also technological breakthroughs that are helping overcome these challenges, such as Dusty’s robotic layout solution. Companies investing in this transformative technology are investing in their own success, and it pays off.

Discover how Dusty Robotics’ FieldPrinter helps the largest GCs in the world.  

Colors
Primary colors
These are the main colors that make up the majority of the colors used in the design system.
Gray (neutral)
Gray is a neutral color and is the foundation of the color system. Almost everything in UI design — text, form fields, backgrounds, dividers — are usually gray.
gray25
gray50
gray100
gray200
gray300
gray400
gray500
gray600
gray700
gray800
gray900
Primary
The primary color is your "brand" color, and is used across all interactive elements such as buttons, links, inputs, etc. This color can define the overall feel and can elicit emotion.
primary25
primary50
primary100
primary200
primary300
primary400
primary500
primary600
primary700
primary800
primary900
Error
Error colors are used across error states and in "destructive" actions. They communicate a destructive/negative action, such as removing a user from your team.
error25
error50
error100
error200
error300
error400
error500
error600
error700
error800
error900
Warning
Warning colors can communicate that an action is potentially destructive or "on-hold". These colors are commonly used in confirmations to grab the users' attention.
warning25
warning50
warning100
warning200
warning300
warning400
warning500
warning600
warning700
warning800
warning900
Success
Success colors communicate a positive action, positive trend, or a successful confirmation. If you're using green as your primary color, it can be helpful to introduce a different hue for your success green.
success25
success50
success100
success200
success300
success400
success500
success600
success700
success800
success900
Secondary colors
Along with primary colors, it's helpful to have a selection of secondary colors to use in components such as pills, alerts and labels. These secondary colors should be used sparingly or as accents, while the primary color(s) should take precedence.
indigo25
indigo50
indigo100
indigo200
indigo300
indigo400
indigo500
indigo600
indigo700
indigo800
indigo900
blue25
blue50
blue100
blue200
blue300
blue400
blue500
blue600
blue700
blue800
blue900
pink25
pink50
pink100
pink200
pink300
pink400
pink500
pink600
pink700
pink800
pink900
orange25
orange50
orange100
orange200
orange300
orange400
orange500
orange600
orange700
orange800
orange900
Click and paste color samples (optional)
Background colors
.background-color-white
.background-color-gray800
.background-color-gray50
.background-color-gray100
.background-color-primary50
.background-color-primary100
.background-color-primary200
.background-color-primary300
Click and paste background colors (optional)
Text colors
text-color-white
text-color-white
text-color-gray25
text-color-gray25
text-color-gray50
text-color-gray50
text-color-gray100
text-color-gray100
text-color-gray200
text-color-gray200
text-color-gray300
text-color-gray300
text-color-gray400
text-color-gray400
text-color-gray500
text-color-gray500
text-color-gray600
text-color-gray600
text-color-gray700
text-color-gray700
text-color-gray800
text-color-gray800
text-color-gray900
text-color-gray900
text-color-primary25
text-color-primary25
text-color-primary50
text-color-primary50
text-color-primary100
text-color-primary100
text-color-primary200
text-color-primary200
text-color-primary300
text-color-primary300
text-color-primary400
text-color-primary400
text-color-primary500
text-color-primary500
text-color-primary600
text-color-primary600
text-color-primary700
text-color-primary700
text-color-primary800
text-color-primary800
text-color-primary900
text-color-primary900
Click and paste Text Colors (optional)
Effects
Box shadows
Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.
shadow-xxsmall
Shadow xs in Figma.
shadow-xsmall
Shadow sm in Figma.
shadow-small
Shadow md in Figma.
shadow-small
Shadow lg in Figma.
shadow-large
Shadow xl in Figma.
shadow-xlarge
Shadow 2xl in Figma.
shadow-xxlarge
Shadow 3xl in Figma.
UI elements
Buttons
button
is-button-large
Button
Button 2xl in Figma.
button
Button
Button lg in Figma.
button
is-button-small
Button
Button md in Figma.
button
is-button-xsmall
Button
Button sm in Figma.
button-secondary-stroke
is-button-large
button-secondary-stroke
button-secondary-stroke
is-button-small
button-secondary-stroke
is-button-xsmall
button-secondary
is-button-large
button-secondary
button-secondary
is-button-small
button-secondary
is-button-xsmall
button-tertiary
is-button-large
button-tertiary
button-tertiary
is-button-small
button-tertiary
is-button-xsmall
button-tertiary-gray
is-button-large
button-tertiary-gray
button-tertiary-gray
is-button-small
button-tertiary-gray
is-button-xsmall
button-link
is-button-large
button-link
button-link
is-button-xsmall
button-link-gray
is-button-large
button-link-gray
button-link-gray
is-button-xsmall
button
is-button-large
icon-only
Button 2xl in Figma.
button
icon-only
Button lg in Figma.
button
is-button-small
icon-only
Button md in Figma.
button
is-button-xsmall
icon-only
Button sm in Figma.
button-secondary-gray
is-button-large
icon-only
button-secondary-gray
icon-only
button-secondary-gray
is-button-small
icon-only
button-secondary-gray
is-button-xsmall
icon-only
button-secondary
is-button-large
icon-only
button-secondary
icon-only
button-secondary
is-button-small
icon-only
button-secondary
is-button-xsmall
icon-only
button-tertiary
is-button-large
icon-only
button-tertiary
icon-only
button-tertiary
is-button-small
icon-only
button-tertiary
is-button-xsmall
icon-only
button-tertiary-gray
is-button-large
icon-only
button-tertiary-gray
icon-only
button-tertiary-gray
is-button-small
icon-only
button-tertiary-gray
is-button-xsmall
icon-only
button-link-rich-text-link
Badges
badge
is-badge-large
Label
badge
Label
badge
is-badge-small
Label
badge
is-badge-large
is-primary
Label
badge
is-primary
Label
badge
is-badge-small
is-primary
Label
badge
is-badge-large
is-error
Label
badge
is-error
Label
badge
is-badge-small
is-error
Label
badge
is-badge-large
is-warning
Label
badge
is-warning
Label
badge
is-badge-small
is-warning
Label
badge
is-badge-large
is-success
Label
badge
is-success
Label
badge
is-badge-small
is-success
Label
Form elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form elements
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Common SVG icons
Need more? Download 1,100+ free icons at untitledui.com/icons
Feather SVG icons
Button icons
Fixed height and fixed width so icons are constrained 1:1.
Image icons (no fixed width)
Fixed height with no fixed width so images remain constrained proportionally.
Image icons (fixed height and width)
Fixed height and fixed width so images are constrained 1:1.
Featured icons
Featured icons outline
Featured icons square
Images
Image aspect ratio 1:1
Image aspect ratio 4:3
Image aspect ratio 3:2
Image aspect ratio 16:9
Global utility classes
Core structures
Client-first defines a flexible core structure you can use on most pages. It's recommended that you don't delete these.
Containers
Client-first comes with 3 defined container sizes - small, medium, and large. It's recommended that you don't delete these.
Spacing
Spacing system (margin and padding) that keeps vertical and horizontal spacing global on your website. It's recommended that you don't delete these.
Responsive visibility
Show and hide elements by screen size. It's recommended that you don't delete these.
Advanced classes
More advanced but useful classes as you're building. Not required to use.
Global embed
Client-first comes with a 'global' symbol embed block. This embed block goes on every page and holds CSS styles that are used everywhere in the project.
Custom Styles

Hubspot Form Elements in Webflow

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 works 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.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.