Style Guide - Techbot X - Webflow Ecommerce website template
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.
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
- Lorem ipsum dolor sit amet consectetur
- Posuere enim mi pharetra neque proin dic
- 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.