Colors
Primary hue colors
Primary 100
#2388ff
Secondary color
Secondary 100
#1777e7
Secondary 200
#eaf4ff
Neutral colors
Neutral 100
#ffffff
Neutral 200
#f8faff
Neutral 300
#f1f3f7
Neutral 400
#e1e4ed
Neutral 500
#b4b9c9
Neutral 600
#6d758f
Neutral 700
#353e5c
Neutral 800
#19213d
Overlay light color
Faint
#ffffff1a
Light
#ffffff4d
Regular
#ffffff80
Strong
#ffffffe6
Solid
#ffffffe6
Overlay dark color
Faint
#19213d1a
Light
#19213d4d
Regular
#19213d80
Strong
#19213db3
Solid
#19213de6
Overlay accent color
Faint
#2388ff1a
Light
#2388ff4d
Regular
#2388ff80
Strong
#2388ffb3
Solid
#2388ffe6
System colors
Red 100
#ffdde1
Red 200
#ffbbc4
Red 300
#fe9aa6
Red 400
#fe566b
Blue 100
#e0edff
Blue 200
#c1dcff
Blue 300
#a2caff
Blue 400
#64a7ff
Green 100
#e3f6e6
Green 200
#c7edce
Green 300
#ace3b5
Green 400
#74d184
Yellow 100
#fcf3d5
Yellow 200
#f9e7ab
Yellow 300
#f5dc80
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
Display
Text Style
Size
Line Height
Weight
Text Style
Display 10
Size:
4.5rem
Line Height:
1.15
Weight:
Default
Mid
Strong
Text Style
Display 9
Size:
3.75rem
Line Height:
1.15
Weight:
Default
Mid
Strong
Text Style
Display 8
Size:
3rem
Line Height:
1.15
Weight:
Default
Mid
Strong
Text Style
Display 7
Size:
2.5rem
Line Height:
1.15
Weight:
Default
Mid
Strong
Text Style
Display 6
Size:
2rem
Line Height:
1.15
Weight:
Default
Mid
Strong
Text Style
Display 5
Size:
1.5rem
Line Height:
1.15
Weight:
Default
Mid
Strong
Text Style
Display 4
Size:
1.25rem
Line Height:
1.15
Weight:
Default
Mid
Strong
Text Style
Display 3
Size:
1.125rem
Line Height:
1.15
Weight:
Default
Mid
Strong
Text Style
Display 2
Size:
1em
Line Height:
1.15
Weight:
Default
Mid
Strong
Text Style
Display 1
Size:
0.875em
Line Height:
1.15
Weight:
Default
Mid
Strong
Paragraph
Text Style
Size
Line Height
Weight
Text Style
Paragraph Large - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.
Size:
1.125rem
Line Height:
1.5
Weight:
Default
Mid
Strong
Text Style
Paragraph Default - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.
Size:
1em
Line Height:
1.5
Weight:
Default
Mid
Strong
Text Style
Paragraph Small - Gravida vulputate scelerisque dui at aliquam at. Nec purus nisl a tellus velit tellus.
Size:
0.875em
Line Height:
1.5
Weight:
Default
Mid
Strong
Rich text
Text Style
Size
Line Height
Weight
Text Style
Text Bold - Gravida vulputate scelerisque dui
Size:
1em
Line Height:
1.5
Weight:
Default
Mid
Strong
Text Style
Text Link - Gravida vulputate scelerisque dui
Size:
1em
Line Height:
1.5
Weight:
Default
Mid
Strong
Text Style
Bullet List
- Gravida vulputate scelerisque dui
- Nec purus nisl a tellus velit tellus
Size:
1em
Line Height:
1.5
Weight:
Default
Mid
Strong
Text Style
Numbered List
- Gravida vulputate scelerisque dui
- Nec purus nisl a tellus velit tellus
Size:
1em
Line Height:
1.5
Weight:
Default
Mid
Strong
Shadows
Primary color shadow
Small
Medium
Large
Extra Large
Secondary color shadow
Small
Medium
Large
Extra Large
Accent color shadow
Small
Medium
Large
Extra Large
Logo
Logo icon
Logo full
Links
Links
Lists
Primary list
Icon
Bullet
Numbers
text
Icon
Icon
- 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 list
Icon
Bullet
Numbers
text
Icon
Icon
- 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 icon
Avatars
Square avatars
24px
32px
40px
48px
64px
120px
Circle avatars
24px
32px
40px
48px
64px
120px
Input
Input text
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 area
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.
Checkboxes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radiobuttons
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Toggle button
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Badges
Badges
Default
Default
Default
Default
Default
Default
Default
Default
