Follow this design system to quickly produce, iterate and ship world-class design work for a world-class product.
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.
Need a container div to center your content with a max width? Maybe at 1280px? Add this.
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.
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.
Triple Whale uses a split of Dark theme and Light theme for all marketing materials.
Dark Theme Usage:
Light Theme Usage:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Text Base - 1.0 EM (16px)
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.
Text Medium 1.25 EM (20px)
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.
Text Small
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.
Buttons
Forms
