This tutorial is part 2 of a 3 part series focused on taking a landing page designed in Figma and building it Webflow. In this series, we're using the newly released Hatch Utility Framework to build out the beginning pieces, such as Typography, Color, and Elements (Buttons & Form Fields). Once the styles are built, we will use them as a jumping point to build our landing page.

‍

The Hatch Utility Framework can be cloned from Webflow here.

‍

We recommend checking out the Hatch Documentation, which goes in depth on how to use the framework. In many ways, Hatch is similar to the Tailwind.CSS documentation.  Also if you'd like to check out the documentation on the Hatch Framework, you can get it here.

‍

In this part of the series, we walk through how to edit color swatches and apply these styles globally. We also go over how to create styles for gradient buttons.

‍