# Webflow Style Guide

Techbot X is our ultimate AI App Webflow Template & UI Kit designed for modern tech startups looking to launch an amazing website. It was designed & developed by the team of Webflow Experts from [Brix Agency](https://www.brixagency.com/).

## Colors

### Accent color
**Primary 1**  
#0276FF

### Neutral colors
| Color Level  | Color Name  | Hex Code  |
|--------------|-------------|-----------|
| 800          | Neutral 800 | #111111   |
| 700          | Neutral 700 | #333335   |
| 600          | Neutral 600 | #606062   |
| 500          | Neutral 500 | #777779   |
| 400          | Neutral 400 | #B4B4B7   |
| 300          | Neutral 300 | #ECECEC   |
| 200          | Neutral 200 | #F8F8F8   |
| 100          | Neutral 100 | #FFFFFF   |

### System colors
| Color Level  | Color Name    | Hex Code  |
|--------------|----------------|-----------|
| 400          | Blue 400      | #086CD9   |
| 300          | Blue 300      | #1D88FE   |
| 200          | Blue 200      | #8FC3FF   |
| 100          | Blue 100      | #EAF4FF   |
| 400          | Green 400     | #11845B   |
| 300          | Green 300     | #05C168   |
| 200          | Green 200     | #7FDCA4   |
| 100          | Green 100     | #DEF2E6   |
| 400          | Red 400       | #DC2B2B   |
| 300          | Red 300       | #FF5A65   |
| 200          | Red 200       | #FFBEC2   |
| 100          | Red 100       | #FFEFF0   |
| 400          | Orange 400    | #D5691B   |
| 300          | Orange 300    | #FF9E2C   |
| 200          | Orange 200    | #FFD19B   |
| 100          | Orange 100    | #FFF3E4   |

## Typography

### Special headings

#### Display 1
Thicccboi Semi Bold  
100px / 0.980em  
# Donec etdolr odio pelle ntesqu.

#### Display 2
Thicccboi Bold  
60px / 1.2em  
# Donec et odio lom pellen tesqu diam.

#### Display 3
Thicccboi Bold  
34px / 1.118em  
# Donec et odio pellen tesqu diam lorem ipsum dolor.

#### Display 4
Thicccboi Bold  
28px / 1.357em  
# Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.

### Headings

#### Heading H1
Thicccboi Bold  
44px / 1.273em  
# Donec et odio dolor pelle ntesqu.

#### Heading H2
Thicccboi Bold  
38px / 1.368em  
# Donec et odio pellen tesqu diam lorem ipsum dolor consectur

#### Heading H3
Thicccboi Bold  
24px / 1.417em  
### Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong dolor sit amet consec.

#### Heading H4
Thicccboi Bold  
22px / 1.455em  
#### Donec et odio pellentesqu diam lorem ipsum dolor

#### Heading H5
Thicccboit Bold  
18px / 1.333em  
##### Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.

#### Heading H6
Thicccboi Bold  
16px / 1.375em  
###### Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.

### Body

#### Body Large
Thicccboi Medium  
24px / 1.571em  
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 cursu.

#### Body Default
Thicccboi Medium  
18px / 1.667em  
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 cursu id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

#### Body Small
Thicccboi Medium  
14px / 1.714em  
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 cursu.

### Bullet List
- Lorem ipsum dolor sit amet consectetur
- Posuere enim mi pharetra neque proin dic
- Mauris aliquet faucibus iaculis dui vitae ullamco

### Numbered List
1. Lorem ipsum dolor sit amet consectetur
2. Posuere enim mi pharetra neque proin dic
3. Mauris aliquet faucibus iaculis dui vitae ullamco

### Blockquote
> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

### Image & Caption
  
Lorem ipsum dolor sit amet consectur

## Shadows

### General shadows
- Shadow 01
- Shadow 02
- Shadow 03
- Shadow 04
- Shadow 05
- Shadow 06

### Button shadows
- Button color 01
- Button color 02
- Button color 03
- Button white 01
- Button white 02
- Button white 03

## Inputs

### Input text
**Label**  
Thank you! Your submission has been received!  
Oops! Something went wrong while submitting the form.

### Text area
**Label**  
Thank you! Your submission has been received!  
Oops! Something went wrong while submitting the form.