Build faster in Webflow with hatch.

Jumpstart your project with over 2,000 ready-to-use utility classes to help you quickly build your pages.

Setup your project
Hatch Mascot, a bird sitting inside of a cracked open egg shell.

Overview

Hatch is a utility framework for Webflow that is made up of over 2,000 low-level utility classes, helping you work insanely fast.

Need a section with some vertical padding? Try this.

Webflow Selector Desktop Icon.
Section In Base

Need a container div to center your content with a max width? Maybe at 1280px? Add this.

Webflow Selector Desktop Icon.
Container 1280

What about some margin-bottom? Say 2rem (32px).

Webflow Selector Desktop Icon.
Margin Bottom 8

Ok, but what if you want to remove that margin on Tablet sizes. Add a combo class like this.

Webflow Selector Desktop Icon.
Margin Bottom 8
Tablet Margin Bottom 0

Hatch works out of the box by scaling down font sizes and spacing at each breakpoint, but it's still flexible with breakpoint classes to set the exact style you want at each size.

Just start your class with Tablet, Landscape, or Portrait to apply a style at a specific breakpoint.

Be sure to check out the documentation to see all the utility classes Hatch has available. Or, press G and scroll through the Style Manager. That works too.

Colors

Hatch makes it easy to change update the colors throughout your site using global swatches.

To update the colors, select a color below and edit the global swatch under the background color section in the right sidebar.

Here's a video walking you through how to edit the global swatches.

Global Colors
Body Background Color
Body Text Color
Headings Color
Brand Color
Button Colors
Button Color
Button Hover Color
Button Text Color
Button Text Hover Color
Button Secondary Color
Button Secondary Hover Color
Button Secondary Text Color
Button Secondary Text Hover Color
Link Colors
Link Color
Link Hover Color
Nav Link Color
Nav Link Hover Color
Other
These apply to the background classes and you can use them however you'd like.
Border Color
Form Input Background Color
Form Input Placeholder Color
Background Colors (optional)
These are extra colors tied to background color utility classes for you to use however you'd like.
Background Color 1
Background Color 2
Background Color 3
Background Color 4
Text Colors (optional)
These are extra colors tied to text color utility classes for you to use however you'd like.
Text Color 1
Text Color 2
Text Color 3
Text Color 4

Typography

Hatch comes with Poppins font out of the box, and all of the headings and paragraphs inherit that font from the body element.

To update your font, first add your font in your project settings, then select the Body (All Pages) and change to your new font family.

Webflow Selector Desktop Icon.
Body (All Pages)

If you'd like to use a different font for your headings, select each of the headings below one by one and change the font under the typography section in the right sidebar.

Webflow Selector Desktop Icon.
All H1 Headings

Heading level one

Heading level two

Heading level three

Heading level four

Heading level five
Heading level six

Elements

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Got thoughts? Feedback? 

I'd love to hear what you think of Hatch! If you have any thoughts on what you like, or don't like, or ideas on how Hatch could be improved please let me know. Find me on Twitter (@mackenziechild) or email me mackenzie@flowmingo.co.

What's next for Hatch?

Next up I'm working on...

  • A homepage + searchable documentation site for Hatch.
  • A pixel version of Hatch. Rems are scalable and will work well for a lot of sites, but pixels are easier to wrap my head around lol.
  • Hatch UI. A UI kit built on top of the Hatch framework that will include dozens of pre-built components and layouts (like navigations, pricing tablets, features, etc) to help you go EVEN FASTER!
Brought to you by Webflow.