The Style Guide

Typography

Work Hard &
Be Nice To People

H1

Work Hard &
Be Nice To People

H2

Work Hard &
Be Nice To People

H3

Work Hard &
Be Nice To People

H4
Work Hard &
Be Nice To People
H5

God, she thought lying in bed naked and re-reading Aldington's Portrait of a Genius, But... he's an impostor! Not D.H. Lawrence, but her husband-Henry-with his bauble of a belly and all the hair he never combed and the way he stood around in his shorts, and the way he stood naked before the window like an Arabian and howled; and he told her that he was turning into a toad and that he wanted to buy a Buddha and that he wanted to be old and drown in the sea, and that he was going to grow a beard and that he felt as if he was turning into a woman.

And Henry was poor, poor and worthless and miserable and sick. And he wanted to join the Mahler Society. His breath was bad, his father was insane and his mother was dying of cancer.

P

And Henry was poor, poor and worthless and miserable and sick. And he wanted to join the Mahler Society. His breath was bad, his father was insane and his mother was dying of cancer.

SMALL-P

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.

Heading

Global colors
Buttons / Links
Click Here
CTA Button
Click Here
GHOST BUTTON
Text Link
TEXT LINK
Click Here
CTA Button
Click Here
GHOST BUTTON
Text Link
TEXT LINK
My container
Flex Columns
pop up modal
Open Pop Up

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.

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 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.