# Style Guide

##### Colors

Primaries and grays controlled by the Webflow Variables feature.

- Primary 100
- Primary 80
- Primary 40
- Secondary 100
- Secondary 80
- Light Tone
- Mid Tone
- Dark Tone
- Dark Tone - Text
- Dark Tone - Border

##### Typography

Modular type scale based on a ratio of 1.26 (Major third)

# Heading One

## Heading Two

### Heading Three

#### Heading Four

##### Heading Five

Large Text

Bold

[Link](/content/template/style-guide#/index.html)

Body Text

Bold

[Link](/content/template/style-guide#/index.html)

Small Text

Bold

[Link](/content/template/style-guide#/index.html)

##### Buttons

Component, text style and size variations

[Small](/content/template/style-guide#/index.html) [Default](/content/template/style-guide#/index.html) [Large](/content/template/style-guide#/index.html)

##### 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

Name

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.

I have read and agree to the [Terms & Conditions](/content/template/style-guide#/index.html)

Radio

Choose an option
- First Choice
- Second Choice
- Third Choice

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.