01 Colors
#0B3948
RGB 11, 57, 72
HSL 194, 16%, 73%
#416165
RGB 65, 97, 101
HSL 186, 32%, 21%
#ACB0BD
RGB 172, 176, 189
HSL 225, 70%, 11%
#D0CDD7
RGB 208, 205, 215
HSL 257, 82%, 11%
#D9DBF1
RGB 217, 219, 241
HSL 235, 89%, 46%
#3E3F4E
RGB 62, 63, 78
HSL 236, 27%, 11%
#2EBFA5
RGB 46, 191, 165
HSL 169, 46%, 61%
#200116
RGB 32, 1, 22
HSL 319, 6%, 93%
#92817A
RGB 146, 129, 122
HSL 17, 52%, 9%
02 Typography
Poppins
Bold50px
58px Line
Heading (XL)
Poppins
Bold36px
40px Line
Heading (L)
Poppins
Bold24px
36px Line
Heading (M)
Poppins
Bold18px
24px Line
Heading (S)
Poppins
Regular16px
22px Line
Body (L) - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est.
Poppins
Bold12px
18px Line
Body (M) - Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est.
03 Interactive
Checkbox
Idle
Hovered
Completed
Text Field (Idle)
Text Field (Active)
Text Field (Error)
Cannot be empty