Triple Whale
Web Design System

Follow this design system to quickly produce, iterate and ship world-class design work for a world-class product.

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.

Colours

Triple Whale uses a split of Dark theme and Light theme for all marketing materials.

Dark Theme Usage:

Light Theme Usage: 

Dark Theme
D - Body Background 01
D - Body Background 02
D - Body Background 03
D - Body Text
D - Heading Color
D - Highlight Color
D - Links
D - Stroke
SUMMARY

The full picture, in
Real-Time, Anywhere

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.

Light Theme
D - Body Background 01
D - Body Background 02
D - Body Background 03
D - Body Text
D - Heading Color
D - Highlight Color
D - Links
D - Stroke
SUMMARY

The full picture, in
Real-Time, Anywhere

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.

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

Type Scale

H1 Hero Titles

H2 Page Heading

H3 Section Heading

H4 Item Titles

H5 Sub Item Titles
H6 Paragraph Titles

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.

Elements

Buttons

Small Button
Scrolling Text Here
Scrolling Text Here
Scrolling Text Here
Scrolling Text Here
Primary Button
Scrolling Text Here
Scrolling Text Here
Scrolling Text Here
Scrolling Text Here
Primary Button
Scrolling Text Here
Scrolling Text Here
Scrolling Text Here
Scrolling Text Here
Become a Partner
#ToTheMoon!
#ToTheMoon!
#ToTheMoon!
#ToTheMoon!

Forms

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