Colors
Primary
Primary
#4A6CFF
Secondary color
Secondary 100
#D4DDF2
Secondary 200
#243C70
Secondary 300
#1C273F
Secondary 400
#ACBBDD
Secondary 500
#335397
Neutral colors
Neutral 100
#FFFFFF
Neutral 200
#F0F3FD
Neutral 300
#D3D8E9
Neutral 400
#BDC2D4
Neutral 500
#8F96A9
Neutral 600
#666F85
Neutral 700
#0D1526
Neutral 800
#090F1C
System colors
Red 100
#FFDFE7
Red 200
#FFBCC4
Red 300
#FE98A0
Red 400
#fe566b
Blue 100
#E0EFFF
Blue 200
#C2DFFF
Blue 300
#A4CFFF
Blue 400
#64a7ff
Green 100
#E3F6E7
Green 200
#C7EDCF
Green 300
#ACE3B7
Green 400
#74d184
Yellow 100
#FCF3D5
Yellow 200
#F9E8AB
Yellow 300
#F5DB80
Yellow 400
#efc42c
Typography
Fonts
Figtree
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
Download font
Displays
Text style
Size
Line Height
Weights
Display 10
4.5rem
1.25rem
Default
Mid
Strong
Display 9
3.75rem
1.25rem
Default
Mid
Strong
Display 8
3rem
1.25rem
Default
Mid
Strong
Display 7
2.25rem
1.25rem
Default
Mid
Strong
Display 6
1.875rem
1.25rem
Default
Mid
Strong
Display 5
1.5rem
1.25rem
Default
Mid
Strong
Display 4
1.25rem
1.25rem
Default
Mid
Strong
Display 3
1.125rem
1.25rem
Default
Mid
Strong
Display 2
1.rem
1.25rem
Default
Mid
Strong
Display 1
0.875rem
1.25rem
Default
Mid
Strong
Paragraph Large - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.
1.125rem
1.5rem
Default
Mid
Strong
Paragraph Default - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.
1rem
1.5rem
Default
Mid
Strong
Paragraph Small - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.
0.875rem
1.5rem
Default
Mid
Strong
Rich text
Text style
Size
Line Height
Weights
Text Bold - Gravida vulputate scelerisque dui
1rem
1.5rem
Default
Mid
Strong
1rem
1.5rem
Default
Mid
Strong
Bullet List
  • Gravida vulputate scelerisque dui
  • Nec purus nisl a tellus velit tellus
1rem
1.5rem
Default
Mid
Strong
Numbered List
  • Gravida vulputate scelerisque dui
  • Nec purus nisl a tellus velit tellus
1rem
1.5rem
Default
Mid
Strong
Shadow
Primary color shadows
Small
Medium
Large
Extra Large
Secondary color shadows
Small
Medium
Large
Extra Large
Accent color shadows
Small
Medium
Large
Extra Large
Logo icon
Logo Icon - Webflow Template | BRIX Templates
Logo Icon - Webflow Template | BRIX Templates
Logo Full
Datacenter
Datacenter
Buttons
Primary button
Small
Default
Small
Default
Text
Icon
Number
Text
Icon
Number
Default
1
Default
1
Default
1
Default
1
Secondary button
Small
Default
Small
Default
Text
Icon
Number
Text
Icon
Number
Default
1
Default
1
Default
1
Default
1
Links
Default
Mid
Strong
Default
Mid
Strong
Default
Mid
Strong
Small
Default
Small
Default
Small
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Default
Lists
Primary Lists
Default
Mid
Strong
Default
Mid
Strong
Icon
Bullet
Numbers
Icon
Bullet
Numbers
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
Accent Lists
Default
Mid
Strong
Default
Mid
Strong
Icon
Bullet
Numbers
Icon
Bullet
Numbers
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
  • List Item
Icons
Social media accent colored icons
Social media accent squared icons
Icon fonts
Line icons rounded
Line icons squared
Filled icons
Social media icons
Avatars
Avatar Circle
Default
24px
32px
40px
48px
64px
120px
John Carter Avatar - DatacenterAI - Webflow Template | BRIX Templates
John Carter Avatar - DatacenterAI - Webflow Template | BRIX Templates
John Carter Avatar - DatacenterAI - Webflow Template | BRIX Templates
John Carter Avatar - DatacenterAI - Webflow Template | BRIX Templates
John Carter Avatar - DatacenterAI - Webflow Template | BRIX Templates
John Carter Avatar - DatacenterAI - Webflow Template | BRIX Templates
Avatar Squared
Default
24px
32px
40px
48px
64px
120px
John Carter Avatar - DatacenterAI - Webflow Template | BRIX Templates
John Carter Avatar - DatacenterAI - Webflow Template | BRIX Templates
John Carter Avatar - DatacenterAI - Webflow Template | BRIX Templates
John Carter Avatar - DatacenterAI - Webflow Template | BRIX Templates
John Carter Avatar - DatacenterAI - Webflow Template | BRIX Templates
John Carter Avatar - DatacenterAI - Webflow Template | BRIX Templates
Inputs
Inputs
Default
button Inside
Default
button Inside
Small
Default
button Inside
Icon Left Right
Small
Default
button Inside
Icon Left Right
Light mode
Dark Mode
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 areas
Small
Default
Small
Default
Small
Default
Icon Left Right
Small
Default
Icon Left Right
Light mode
Dark Mode
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.
Select
Small
Default
Light mode
Dark Mode
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
Badges
Default
Mid
Strong
Default
Mid
Strong
Default
Mid
Strong
Default
Mid
Strong
Default
Mid
Strong
Default
Mid
Strong
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
Spacing
Margin top
5x Extra Small
4x Extra Small
3x Extra Small
2x Extra Small
Extra Small
Small
Medium
Large
Extra Large
2x Extra Large
3x Extra Large
4x Extra Large
5x Extra Large
6x Extra Large
Margin bottom
5x Extra Small
4x Extra Small
3x Extra Small
2x Extra Small
Extra Small
Small
Medium
Large
Extra Large
2x Extra Large
3x Extra Large
4x Extra Large
5x Extra Large
6x Extra Large
Margin left
5x Extra Small
4x Extra Small
3x Extra Small
2x Extra Small
Extra Small
Small
Medium
Large
Extra Large
2x Extra Large
3x Extra Large
4x Extra Large
5x Extra Large
6x Extra Large
Margin right
5x Extra Small
4x Extra Small
3x Extra Small
2x Extra Small
Extra Small
Small
Medium
Large
Extra Large
2x Extra Large
3x Extra Large
4x Extra Large
5x Extra Large
6x Extra Large
Padding top
5x Extra Small
4x Extra Small
3x Extra Small
2x Extra Small
Extra Small
Small
Medium
Large
Extra Large
2x Extra Large
3x Extra Large
4x Extra Large
5x Extra Large
6x Extra Large
Padding bottom
5x Extra Small
4x Extra Small
3x Extra Small
2x Extra Small
Extra Small
Small
Medium
Large
Extra Large
2x Extra Large
3x Extra Large
4x Extra Large
5x Extra Large
6x Extra Large
Padding left
5x Extra Small
4x Extra Small
3x Extra Small
2x Extra Small
Extra Small
Small
Medium
Large
Extra Large
2x Extra Large
3x Extra Large
4x Extra Large
5x Extra Large
6x Extra Large
Padding right
5x Extra Small
4x Extra Small
3x Extra Small
2x Extra Small
Extra Small
Small
Medium
Large
Extra Large
2x Extra Large
3x Extra Large
4x Extra Large
5x Extra Large
6x Extra Large

Explore our collection of 200+ Premium Webflow Templates

Need to customize this template? Hire our Webflow team!