Sign up for a FREE Website Audit — 1 slot left for July 👀

Style Guide

A central guide for common components and styles used in Gauge.

Primary

Primaries colours controlled by the Global Swatch feature.
Primary 1A
#BEEDF1
Primary 1B
#3EBFCC
Primary 1C
#102323
Primary 2A
#F2F8A9
Primary 2B
#C6D32B
Primary 2C
#414211
Primary 3A
#FDE8D3
Primary 3B
#FAD400
Primary 3C
#3F3712
Primary 4A
#FCC8A7
Primary 4B
#F97B26
Primary 4C
#3F2313
Primary 5A
#8BBBEB
Primary 5B
#1A79D6
Primary 5C
#0E2335
Primary 6A
#C2DE9E
Primary 6B
#87C440
Primary 6C
#1E2C0C

Neutrals

Neutral colours controlled by the Global Swatch feature.
Off White
#F9F8F4
NS Beige
#EEECE3
Dark Beige
#C0BAA0
Black
#2C2826

Typography

Headings, body and other common text elements.
Display One

Heading One

Heading Two

Heading Two

Heading Two

Heading Three

Heading Four

Heading Five
Heading Five – Body Family
Large Text    Large Link
Body Text    Body Link
Body Text Italicized 
Small Text    Small Link

Buttons

Component, text style and size variations
Small
Default
Default
Default
Default
Default
Default
Default
Default
Default
Large Button

Form Inputs

General style and state variations for text inputs.
Inputs
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
This is some text inside of a div block.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Text Area
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Form Selectables

Styling for checkboxes, selects and radios.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Purchase Gauge for Webflow.

Exclusive to the
Webflow Marketplace.
Buy Gauge