Browse all the basic styles and components inside this UI Kit
Colors
Primary palette
Purple
#793AFF
Orange
#FF8762
Secondary colors
Red 400
#FE566B
Red 300
#FB93A3
Red 200
#FAC6D0
Red 100
#FFECEF
Blue 400
#4E9FFF
Blue 300
#8DC1FF
Blue 200
#C3DDFF
Blue 100
#E3EFFF
Yellow 400
#FED133
Yellow 300
#FBE080
Yellow 200
#FAEDBF
Yellow 100
#FFFAE9
Green 400
#81E492
Green 300
#ADECBB
Green 200
#D3F2DD
Green 100
#EEF9F5
Neutral colors
Neutral 800
#0A0913
Neutral 700
#2E2D3C
Neutral 600
#6E7191
Neutral 500
#A0A3BD
Neutral 400
#DCDDEB
Neutral 300
#EFF0F6
Neutral 200
#F7F7FC
Neutral 100
#FFFFFF
Illustration colors
Color 400
#E5C5AC
Color 300
#F9DFD0
Color 200
#FFF1E9
Color 100
#FFF8F4
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
Purple Gradient
#FF2D46 - #FAC6D0
Blue Gradient
#2388FF - #C3DDFF
Typography
Mona Sans
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 10
80px
1.05em
Regular
Medium
Semi Bold
Bold
Extra Bold
Display 9
60px
1.133em
Regular
Medium
Semi Bold
Bold
Extra Bold
Display 8
54px
1.222em
Regular
Medium
Semi Bold
Bold
Extra Bold
Display 7
44px
1.181em
Regular
Medium
Semi Bold
Bold
Extra Bold
Display 6
38px
1.21em
Regular
Medium
Semi Bold
Bold
Extra Bold
Display 5
28px
1.428em
Regular
Medium
Semi Bold
Bold
Extra Bold
Display 4
24px
1.416em
Regular
Medium
Semi Bold
Bold
Extra Bold
Display 3
22px
1.272em
Regular
Medium
Semi Bold
Bold
Extra Bold
Display 2
18px
1.333em
Regular
Medium
Semi Bold
Bold
Extra Bold
Display 1
16px
1.375em
Regular
Medium
Semi Bold
Bold
Extra Bold
Paragraph Large - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.
24px
1.583em
Regular
Medium
Semi Bold
Bold
Extra Bold
Paragraph Medium - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.
18px
1.666em
Regular
Medium
Semi Bold
Bold
Extra Bold
Paragraph Default - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.
18px
1.666em
Regular
Medium
Semi Bold
Bold
Extra Bold
Paragraph Small - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.
14px
1.714em
Regular
Medium
Semi Bold
Bold
Extra Bold
Shadows
Neutral shadows
Shadow 01
Shadow 02
Shadow 03
Shadow 04
Shadow 05
Shadow 06
Primary color shadows
Shadow 01
Shadow 02
Shadow 03
Shadow 04
Shadow 05
Shadow 06
Buttons
Primary button
Secondary button
Icon button
Text button
Lists
List items
- 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
Custom arrows
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
Badges
Badges
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
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
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