LEARNING PATHWAYS

Workplace English

Our step-by-step guide to improving your English for work
BASIC CONVERSATION
Looking to learn the basics or upgrade the language skills you already have? You’re in the right place to learn how to:
• Increase your vocabulary
• Improve your pronunciation
• Develop better speaking and listening skills
• Get better at taking exams

English Basics 1

Become more confident in your English speaking, listening, and writing.

English Basics 2

Continue to grow your English speaking, listening, and writing skills.
AMERICAN CULTURE
Interested in learning more about norms and customs in the United States?  The following resources will help you to:
• Evaluate your own media literacy level
• Understand the path to American citizenship
• Improve your conversations with Americans
• Develop your networking skills

Cultural Basics 1

Learn how to identify facts versus opinions in the media, and understand the citizenship process.

Cultural Basics 2

Improve your confidence in social situations through developing your conversation and networking skills.
WORKPLACE ENGLISH
Do you want to improve your speaking and writing for the work environment? The following resources will help you to:
• Improve your public speaking skills
• Write excellent emails and memos
• Get promoted in your U.S. workplace

Speak Like a Professional

Learn how to make great presentations in front of colleagues and during job interviews.

Write Like a Professional

Improve your digital communication skills for the work world.

Advance Your Career

Understand how the job search, application, and interview process U.S. differs from other countries.

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.

Webflow Selector Desktop Icon.
Margin Bottom 8

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

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.

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

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.

Webflow Selector Desktop Icon.
Margin Bottom 8

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

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.

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

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.