GPT X Webflow Template - Logo
Basic styles
Components
Buy template

Webflow Style Guide

GPT X is our ultimate AI & Machine Learning Webflow Template designed for modern tech startups looking to launch an amazing website. It was designed & developed webflow experts.

Buy templateBack to home
Typography Icon - GPT X Webflow Template

Colors

Brand colors

Primary
#37DBF3
Primary shade
#2CB4C8
Secondary
#D9339C
Secondary shade
#B53385

Brand complements

Background
Background
#010214
10
#00022D
20
000344
30
#00057D
40
#000AFF

Neutral colors

1000
Neutral 800
#10101B
900
Neutral 900
#1A1B28
800
Neutral 800
#2E2F48
700
Neutral 700
#4F517C
600
Neutral 600
#7478C0
500
Neutral 500
#898CCD
400
Neutral 400
ADB0E4
300
Neutral 300
C8C9F3
200
Neutral 200
E4E4F8
100
Neutral 100
#FFFFFF

Others

Warning
Warning
#EB345C
Gradient
Typography Icon - GPT X Webflow Template

Typography

Special headings

Display 1

Mont Book
90px / 96px

Donec etdolr odio pelle ntesqu.

Display 2

Mont Bold
70px / 76px

Donec et odio lom pellen tesqu diam.

Display - 3 Book

Mont Book
64px / 70px

Donec et odio lom pellen tesqu diam.

Display 3

Mont Bold
64px / 70px

Donec et odio pellen tesqu diam lorem ipsum dolor.

Display 3 Italic

Mont Bold Italic
64px / 70px

Donec et odio pellen tesqu diam lorem ipsum dolor.

Display 4

Mont Bold
50px / 56px

Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.

Display 5

Mont Bold
42px / 52px

Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.

Headings

Heading H1

Mont Bold
54px / 66px

Donec et odio dolor pelle ntesqu.

Donec et odio dolor pelle ntesqu.

Heading H2

Mont Bold
38px /48px

Donec et odio pellen tesqu diam lorem ipsum dolor consectur

Donec et odio pellen tesqu diam lorem ipsum dolor consectur

Heading H3

Mont Regular
28px / 34px

Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong dolor sit amet consec.

Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong dolor sit amet consec.

Heading H4

Mont Bold
24px / 30px

Donec et odio pellentesqu diam lorem ipsum dolor

Donec et odio pellentesqu diam lorem ipsum dolor

Heading H4 Italic

Mont Bold Italic
24px / 30px

Donec et odio pellentesqu diam lorem ipsum dolor

Donec et odio pellentesqu diam lorem ipsum dolor

Heading H5

Mont Bold
18px / 24px
Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.
Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.

Heading H6

Mont Bold
16px / 22px
Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.
Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.

Paragraph

Large

Inter Light
18px / 30px

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.

Medium

Inter Light
16px / 28px

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 cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Small

Inter Light
12px / 18px

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.

Large Bold

Inter Medium
18px / 30px

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.

Medium Bold

Inter Medium
16px / 28px

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 cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Small Bold

Inter Medium
12px / 18px

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.

Titles & Buttons

400

Mont Light
Mont Semibold
Mont Heavy
24px / 30px
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

300

Mont Light
Mont Semibold
Mont Heavy
20px / 26px
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

200

Mont Light
Mont Semibold
Mont Heavy
18px / 24px
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

100

Mont Light
Mont Semibold
Mont Heavy
14px / 20px
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Rich Text

Text Bold

Mont
Lorem ipsum dolor sit amet consectetur

Text Link

Mont

Bullet List

Inter
  • Lorem ipsum dolor sit amet consectetur
  • Posuere enim mi pharetra neque proin dic
  • Mauris aliquet faucibus iaculis dui vitae ullamco

Numbered List

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

Blockquote

Mont
22px / 2em
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

Title

H1

H2

H3

H4

H5
H6

Link

Bold Link

‍

Text Uppercase

Objectivity
Lorem ipsum dolor sit amet consectetur

Text Strikethrough

Objectivity
Lorem ipsum dolor sit amet consectetur

Text Underline

Objectivity
Lorem ipsum dolor sit amet consectetur
Shadows Icon - GPT X Webflow Template

Shadows

Buttons Icon - GPT X Webflow Template

Buttons

Primary buttons

Small
Button Small
Default
Button Default
Large
Button Large
Small
Button Small
Default
Button Default
Large
Button Large
Default
Button Default
Large
Button Large
Default
Button Default
Large
Button Large

Secondary buttons

Small
Button Small
Default
Button Default
Default
Button Large
Small
Button Small
Default
Button Default
Large
Button Large

Primary circle buttons

Secondary circle buttons

Download Apps buttons

Links Icon - GPT X Webflow Template

Links

Links

Link Item
Link Item
Link Item
Link Item
Link Item
Link Item
Badges Icon - GPT X Webflow Template

Badges

Primary badges

Small
Badge Small
Default
Badge Default
Large
Badge Large
Small
Badge Small
Default
Badge Default
Large
Badge Large
Small
Badge Small
Default
Badge Default
Large
Badge Large

Secondary badges

Small
Badge Small
Default
Badge Default
Large
Badge Large
Small
Badge Small
Default
Badge Default
Large
Badge Large
Small
Badge Small
Default
Badge Default
Large
Badge Large
Inputs Icon - GPT X Webflow Template

Inputs

Input text

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Default
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Default
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.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Checkboxes

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Radio buttons

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Avatars Icon - GPT X Webflow Template

Avatars

Avatars circle

Avatar Circle - GPT X Webflow TemplateAvatar Circle - GPT X Webflow TemplateAvatar Circle - GPT X Webflow TemplateAvatar Circle - GPT X Webflow TemplateAvatar Circle - GPT X Webflow TemplateAvatar Circle - GPT X Webflow TemplateAvatar Circle - GPT X Webflow TemplateAvatar Circle - GPT X Webflow Template
Icons Icon - GPT X Webflow Template

Icons

Square icons

Ownership - GPT X Webflow TemplateObject Detection - GPT X Webflow TemplateLock - GPT X Webflow TemplateMedical Insurance - GPT X Webflow TemplateLanguage Translation - GPT X Webflow TemplateLanguage Processing - GPT X Webflow TemplateInnovation - GPT X Webflow TemplateHelp Center - GPT X Webflow TemplateGreat Culture - GPT X Webflow TemplateGetting Started - GPT X Webflow TemplateGet Results - GPT X Webflow TemplateForgot Your Password - GPT X Webflow TemplateFlexible Hours - GPT X Webflow TemplateContent Moderation - GPT X Webflow TemplateColor Histograms - GPT X Webflow TemplateCommitment - GPT X Webflow TemplateCareer Growth - GPT X Webflow TemplateAutomated Reports - GPT X Webflow TemplateAll Plataforms Apps - GPT X Webflow TemplateAutomated Annotation - GPT X Webflow Template Advanced Analytics - GPT X Webflow TemplateWorks In Mobile - GPT X Webflow TemplateUpdate - GPT X Webflow TemplateUpload Your Data - GPT X Webflow TemplateUnlimited PTO - GPT X Webflow TemplateTroubleshooting - GPT X Webflow TemplateSmart Labels - GPT X Webflow TemplateTexture - GPT X Webflow TemplateShield - GPT X Webflow TemplateShape Features - GPT X Webflow TemplateSentiment Analysis - GPT X Webflow TemplateSentiment Analysis - GPT X Webflow TemplateSend Email - GPT X Webflow TemplateRemote - GPT X Webflow TemplateReal Time Collaboration - GPT X Webflow Template Reports - GPT X Webflow TemplatePayments - GPT X Webflow Template

Square icons

Icon Font Icon - GPT X Webflow Template

Icon fonts

Line icons rounded

Line icons square

Filled icons

Social media icons