Colors Default Icon - TechNoni X Webflow Template
Colors
Primary colors
Primary 100
#2A196F
Primary 200
#2388FF
Primary 300
#9F64FF
Primary 400
#FF9C64
Primary 500
#FF6871
Primary 600
#90D479
Secondary colors
Secondary 100
#FFFFFF
Secondary 200
#FFEEEE
Secondary 300
#EAF7FB
Secondary 400
#F8EAFF
Secondary 500
#F5FBF3
Secondary 600
#FFEFE5
Neutral colors
Neutral 100
#FFFFFF
Neutral 200
#F9F8FC
Neutral 300
#F6F4FA
Neutral 400
#EFEDF7
Neutral 500
#E6E3F2
Neutral 600
#968DB8
Neutral 700
#8073B5
Neutral 800
#2A196F
Color overlay
Light 100
#ffffff66
Light 200
#ffffff80
Light 300
#ffffffa6
Light 400
#ffffffcc
Dark 100
#19213d66
Dark 200
#19213d80
Dark 300
#19213da6
Dark 400
#19213dcc
Typography Default Icon - TechNoni X Webflow Template
Typography
Onest
Default
Mid
Strong
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Kk Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Text style
Size
Line Height
Weights
Display 10
66px
1.115em
Default
Mid
Strong
Display 9
60px
1.115em
Default
Mid
Strong
Display 8
48px
1.250em
Default
Mid
Strong
Display 7
36px
1.250em
Default
Mid
Strong
Display 6
30px
1.250em
Default
Mid
Strong
Display 5
24px
1.250em
Default
Mid
Strong
Display 4
20px
1.250em
Default
Mid
Strong
Display 3
18px
1.250em
Default
Mid
Strong
Display 2
16px
1.250em
Default
Mid
Strong
Display 1
14px
1.250em
Default
Mid
Strong

Paragraph Large - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.

20x
1.500em
Default
Mid
Strong

Paragraph Default - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.

18px
1.500em
Default
Mid
Strong

Paragraph Small - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.

14px
1.500em
Default
Mid
Strong
Shadows Default Icon - TechNoni X Webflow Template
Shadows
Neutral shadows
Small
Regular
Medium
Large
Primary color shadows
Small
Regular
Medium
Large
Logo Icon
Logo full
Buttons Default Icon - TechNoni X Webflow Template
Buttons
Primary button
Small
Default
Small
Default
Text
Icon
Number
Text
Icon
Number
Secondary button
Small
Default
Small
Default
Text
Icon
Number
Text
Icon
Number
Tertiary button
Small
Default
Small
Default
Text
Icon
Number
Text
Icon
Number
Lists Default Icon - TechNoni X Webflow Template
Lists
Primary button
Default
Mid
Strong
Default
Mid
Strong
Default
Mid
Strong
Default
Mid
Strong
Default
Mid
Strong
Default
Mid
Strong
Icon
Bullet
Number
Icon
Bullet
Number
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
  • List item
  • List item
  1. List item
Icon Font Default Icon - TechNoni X Webflow Template
Icon font
Line icons rounded
Line icons squared
Filled icons
Social media square Icons
Avatars Default Icon - TechNoni X Webflow Template
Avatars
Square avatars
Default
24px
32px
40px
64px
120px
John Carter Avatar - TechNoni X Webflow Template
John Carter Avatar - TechNoni X Webflow Template
John Carter Avatar - TechNoni X Webflow Template
John Carter Avatar - TechNoni X Webflow Template
John Carter Avatar - TechNoni X Webflow Template
Circle avatars
Default
24px
32px
40px
64px
120px
John Carter Avatar - TechNoni X Webflow Template
John Carter Avatar - TechNoni X Webflow Template
John Carter Avatar - TechNoni X Webflow Template
John Carter Avatar - TechNoni X Webflow Template
John Carter Avatar - TechNoni X Webflow Template
Inputs Default Icon - TechNoni X Webflow Template
Inputs
Inputs
Small
Default
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.
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.
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.
Text Area
Small
Default
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.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Select
Small
Default
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.
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.
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.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Toggle Button
Placeholder
Placeholder
State Message Default Icon - TechNoni X Webflow Template
States messages
Thank you message
Thank you! We’ll get back to you soon

We have received your message and will get back to you as soon as possible. Our team is dedicated to providing the best support and we appreciate your patience.

Thank you! We’ll get back to you soon

We have received your message and will get back to you as soon as possible. Our team is dedicated to providing the best support and we appreciate your patience.

Thank you! We’ll get back to you soon

We have received your message and will get back to you as soon as possible. Our team is dedicated to providing the best support and we appreciate your patience.

Thank you! We’ll get back to you soon

We have received your message and will get back to you as soon as possible. Our team is dedicated to providing the best support and we appreciate your patience.

Badges Default Icon - TechNoni X Webflow Template
Badges
Badges
Primary
Neutral
Secondary
Tertiary
Primary
Neutral
Secondary
Tertiary
Small
Default
Small
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Rich Text Default Icon - TechNoni X Webflow Template
Rich Text

Lorem ipsum dolor.

Venenatis sollicitudin posuere elit consequat et enim. Neque tortor amet dictum tempor. Leo facilisis aliquet viverra scelerisque eleifend viverra est. At massa erat vel amet enim laoreet dictum pellentesque. Urna cursus quam pulvinar tellus. Duis fermentum nibh volutpat morbi. Et ac sed ultricies ut nunc sodales lectus. Ultricies pharetra mauris eget pellentesque accumsan tincidunt.

Donec et odio pellentes.

Et urna ac et maecenas fusce amet. Nibh nec commodo massa sed. Tincidunt porttitor in pharetra egestas sit neque ac lacus. Amet a nunc et cum. Odio at volutpat volutpat in leo eget ipsum diam elementum. Erat magna arcu orci lorem senectus orci fringilla. Tincidunt metus nisl vitae maecenas pretium aliquet. At id pharetra in vestibulum lectus pellentesque venenatis molestie.

  • Morbi fringilla molestie magna sed dictum. Praesent pharetra turpis augue.
  • Cras mi purus, viverra vitae felis sit amet, tincidunt fringilla lorem.
  • non mattis urna ex nec sem. Donec varius diam et suscipit venenati proin tincidunt
  • Quisque euismod posuere lacus sit amet volutpat. Praesent vel imperdiet

Quis faucibus massa sit egestas. Sit fermentum est ac pulvinar et sagittis sed sit ut. Quis faucibus aenean nibh vestibulum enim mi sit. Sollicitudin ultrices ultrices in ipsum urna fringilla massa leo. Sapien ultricies vitae rhoncus molestie purus. Urna urna dolor euismod porttitor et. Magna adipiscing dictum et adipiscing mollis feugiat. Est ac ultrices varius volutpat nibh purus placerat. Sapien morbi sed sit non habitant turpis dignissim. Facilisis vitae massa justo neque.

Lorem ipsum dolor sit amet consectur

Quis faucibus massa sit egestas. Sit fermentum est ac pulvinar et sagittis sed sit ut. Quis faucibus aenean nibh vestibulum enim mi sit. Sollicitudin ultrices ultrices in ipsum urna fringilla massa leo. Sapien ultricies vitae rhoncus molestie purus. Urna urna dolor euismod porttitor et. Magna adipiscing dictum et adipiscing mollis feugiat. Est ac ultrices varius volutpat nibh purus placerat. Sapien morbi sed sit non habitant turpis dignissim. Facilisis vitae massa justo neque.

Donec et odio pellentesque.

Cursus curabitur euismod vel fermentum sapien non dolor odio vel. Tortor lectus mauris in praesent a tincidunt nam. In aenean odio aliquet pretium viverra elit quis magna. Eget ut risus posuere velit purus nisi nec sollicitudin. Tellus enim interdum neque sit vestibulum lacus. Nam pulvinar a lectus justo aliquet integer amet.

“Sed id mi eget urna facilisis pharetra. Nunc viverra est at magna maximus consectetur. Sed nec maximus augue. Aliquam commodo sem eu nisl efficitur venenatis. Proin eu suscipit lorem. Nam vitae aliquet augue. Morbi rutrum ultrices lorem molestie suscipit. Sed mattis luctus odio eu porta.”

Cursus curabitur euismod vel fermentum sapien non dolor odio vel. Tortor lectus mauris in praesent a tincidunt nam. In aenean odio aliquet pretium viverra elit quis magna. Eget ut risus posuere velit purus nisi nec sollicitudin. Tellus enim interdum neque sit vestibulum lacus. Nam pulvinar a lectus justo aliquet integer amet.

Lorem ipsum dolor sit amet consectur doler

Sed non quis tellus velit orci. Quam sed mauris elementum tempor viverra. Luctus semper risus ipsum id diam praesent. Pretium eget mauris ultrices curabitur sed sem amet. Erat nulla habitant in mattis massa mi adipiscing ullamcorper condimentum. Erat quisque integer tincidunt ac amet tempor vulputate tristique. Venenatis neque odio a nulla iaculis euismod etiam.

  1. Morbi fringilla molestie magna sed dictum. Praesent pharetra turpis augue.
  2. Cras mi purus, viverra vitae felis sit amet, tincidunt fringilla lorem.
  3. non mattis urna ex nec sem. Donec varius diam et suscipit venenati proin tincidunt
  4. Quisque euismod posuere lacus sit amet volutpat. Praesent vel imperdiet
Dolor sit amet consectur doler

Sed non quis tellus velit orci. Quam sed mauris elementum tempor viverra. Luctus semper risus ipsum id diam praesent. Pretium eget mauris ultrices curabitur sed sem amet. Erat nulla habitant in mattis massa mi adipiscing ullamcorper condimentum. Erat quisque integer tincidunt ac amet tempor vulputate tristique. Venenatis neque odio a nulla iaculis euismod etiam.

Sed nec maximus augue aliquam commodo sem eu nisl efficitur

Sed non quis tellus velit orci. Quam sed mauris elementum tempor viverra. Luctus semper risus ipsum id diam praesent. Pretium eget mauris ultrices curabitur sed sem amet. Erat nulla habitant in mattis massa mi adipiscing ullamcorper condimentum. Erat quisque integer tincidunt ac amet tempor vulputate tristique. Venenatis neque odio a nulla iaculis euismod etiam.

Rich Text components
“Sed id mi eget urna facilisis pharetra. Nunc viverra est at magna maximus consectetur. Sed nec maximus augue. Aliquam commodo sem eu nisl efficitur venenatis. Proin eu suscipit lorem. Nam vitae aliquet augue. Morbi rutrum ultrices lorem molestie suscipit. Sed mattis luctus odio eu porta.”
Spacers Default Icon - TechNoni X Webflow Template
Spacers
Margin top
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Margin bottom
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Margin right
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Margin left
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Padding top
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Padding bottom
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Padding right
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large
Padding left
Tiny
Extra
small
Small
Default
Medium
Large
Extra
large

Explore our collection of 200+ Premium Webflow Templates

Need to customize this template? Hire our Webflow team!