Browse all the basic styles and components inside this UI Kit
Colors
Secondary colors
Secondary 100
#1777e7
Secondary 200
#eaf4ff
Secondary 300
#de1f35
Secondary 400
#ffe8ea
Secondary 500
#e79800
Secondary 600
#fff9e5
Secondary 700
#37c972
Secondary 800
#e5f8e8
Neutral colors
Neutral 800
#1E1E24
Neutral 700
#414147
Neutral 600
#8D8D95
Neutral 500
#C2C2C7
Neutral 400
#DDDDDF
Neutral 300
#EAEAEB
Neutral 200
#F7F7F8
Neutral 100
#FFFFFF
Color overlay
Dark 80%
#19213D
Dark 65%
#19213D
Dark 50%
#19213D
Dark 40%
#19213D
White 80%
#FFFFFF
White 65%
#FFFFFF
White 50%
#FFFFFF
White 40%
#FFFFFF
Color gradients
Red Gradient
#FF2D46 - #FAC6D0
Blue Gradient
#2388FF - #C3DDFF
Yellow Gradient
#FFC700 - #FAEDBF
Green Gradient
#63DE77 - #D3F2DD
Typography
Switzer
Regular
Semi Bold
Extra Bold
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 12
96px
1em
Regular
Semibold
Extra Bold
Display 11
72px
1em
Regular
Semibold
Extra Bold
Display 10
60px
1em
Regular
Semibold
Extra Bold
Display 9
48px
1em
Regular
Semibold
Extra Bold
Display 8
36px
1.112em
Regular
Semibold
Extra Bold
Display 7
30px
1.2em
Regular
Semibold
Extra Bold
Display 6
24px
1.333em
Regular
Semibold
Extra Bold
Display 5
20px
1.4em
Regular
Semibold
Extra Bold
Display 4
18px
1.333em
Regular
Semibold
Extra Bold
Display 3
16px
1.375em
Regular
Semibold
Extra Bold
Display 2
14px
1.428em
Regular
Semibold
Extra Bold
Display 1
12px
1.5em
Regular
Semibold
Extra Bold
Paragraph Large - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.
18px
1.556em
Regular
Semibold
Extra Bold
Paragraph Medium - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.
16px
1.5em
Regular
Semibold
Extra Bold
Paragraph Default - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.
14px
1.571em
Regular
Semibold
Extra Bold
Paragraph Small - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.
12px
1.5em
Regular
Semibold
Extra Bold
Shadows
Neutral shadows
Shadow 01
Shadow 02
Shadow 03
Shadow 04
Shadow 05
Shadow 06
Buttons
Primary button
Secondary button
Icon button
Text button
Links
Links
Lists
Primary button
-
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
-
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
-
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
Icon font
Line icons rounded
Line icons squared
Filled icons
Social media square Icons
Avatars
Square avatars
Circle avatars
Inputs
Inputs
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.
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.
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
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
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
Upload
Explore our collection of 200+ Premium Webflow Templates