BankingOn Design System

Apps members deserve

Overview

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

Colors

Global Colors
Background Color 1
Background Color 2
Text Color 1
Button Colors
Button Color
Small Button Color 2
Secondary Button Color 1
Secondary Button Color 2
Small Button Color 1
Small Button Outline 1
Button Text
Small Button Outline 2
Button Text

Typography

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

+Yellow Underline Heading

Blue Underline Heading

Green Underline Heading

Product Page Section

This is the section that repeats on the Product page. The graphic and content switch positions from section to section. Scroll down!

Product Page Section

This is the section that repeats on the Product page. The graphic and content switch positions from section to section.