Colors
Our color palette is of selection of colors that work together to create consistency in the way we use colors in products.
Primary-blue
Light
#e9edf3
rgb(233, 237, 243)
Light :hover
#dde4ed
rgb(221, 228, 237)
Light :active
#b9c7da
rgb(185, 199, 218)
Normal
#1e4b87
rgb(30, 75, 135)
Normal :hover
#1b447a
rgb(27, 68, 122)
Normal :active
#183c6c
rgb(24, 60, 108)
Dark
#173865
rgb(23, 56, 101)
Dark :hover
#122d51
rgb(18, 45, 81)
Dark :active
#0d223d
rgb(13, 34, 61)
Darker
#0b1a2f
rgb(11, 26, 47)
Secondary-Orange
Light
#feedeb
rgb(254, 237, 235)
Light :hover
#fee4e1
rgb(254, 228, 225)
Light :active
#fcc8c0
rgb(252, 200, 192)
Normal
#f54e34
rgb(245, 78, 52)
Normal :hover
#dd462f
rgb(221, 70, 47)
Normal :active
#c43e2a
rgb(196, 62, 42)
Dark
#b83b27
rgb(184, 59, 39)
Dark :hover
#932f1f
rgb(147, 47, 31)
Dark :active
#6e2317
rgb(110, 35, 23)
Darker
#561b12
rgb(86, 27, 18)
Alert
Light
#fffbeb
rgb(255, 251, 235)
Light :hover
#fff9e1
rgb(255, 249, 225)
Light :active
#fef3c0
rgb(254, 243, 192)
Normal
#fdd835
rgb(253, 216, 53)
Normal :hover
#e4c230
rgb(228, 194, 48)
Normal :active
#caad2a
rgb(202, 173, 42)
Dark
#bea228
rgb(190, 162, 40)
Dark :hover
#988220
rgb(152, 130, 32)
Dark :active
#726118
rgb(114, 97, 24)
Darker
#594c13
rgb(89, 76, 19)
Success
Light
#f5faf0
rgb(245, 250, 240)
Light :hover
#f0f7e8
rgb(240, 247, 232)
Light :active
#e0efcf
rgb(224, 239, 207)
Normal
#9ccc65
rgb(156, 204, 101)
Normal :hover
#8cb85b
rgb(140, 184, 91)
Normal :active
#7da351
rgb(125, 163, 81)
Dark
#75994c
rgb(117, 153, 76)
Dark :hover
#5e7a3d
rgb(94, 122, 61)
Dark :active
#465c2d
rgb(70, 92, 45)
Darker
#374723
rgb(55, 71, 35)
Error
Light
#feeceb
rgb(254,236,235)
Light :hover
#fde3e1
rgb(253, 227, 225)
Light :active
#fcc5c1
rgb(55, 71, 35)
Normal
#f44336
rgb(244, 67, 54)
Normal :hover
#dc3c31
rgb(220, 60, 49)
Normal :active
#c3362b
rgb(195, 54, 43)
Dark
#b73229
rgb(183, 50, 41)
Dark :hover
#922820
rgb(146, 40, 32)
Dark :active
#6e1e18
rgb(110, 30, 24)
Darker
#551713
rgb(85, 23, 19)
Neutral
Light
#fdfdfd
rgb(253,253,253)
Light :hover
#fcfcfc
rgb(252, 252, 252)
Light :active
#fafafa
rgb(250, 250, 250)
Normal
#eeeeee
rgb(238, 238, 238)
Normal :hover
#d6d6d6
rgb(214, 214, 214)
Normal :active
#bebebe
rgb(190, 190, 190)
Dark
#b3b3b3
rgb(179, 179, 179)
Dark :hover
#8f8f8f
rgb(143, 143, 143)
Dark :active
#6b6b6b
rgb(107, 107, 107)
Darker
#535353
rgb(83, 83, 83)
(Weight:semibold size:29px line height:133.3% letter:0)
(Weight:semibold size:24px line height:133.3% letter:0)
(Weight:Medium size:20px line height:133.3% letter:0)
(Weight:Medium size:17px line height:133.3% letter:0)
(Weight:Medium size:14px line height:133.3% letter:0)
(Weight:regular size:14px line height:133.3% letter:2%)
(Weight:regular size:12px line height:133.3% letter:2%)
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt sint deserunt ut voluptate aute id deserunt nisi.Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et. Sunt qui esse pariatur duis deserunt mollit dolore cillum minim tempor enim. Elit aute irure tempor cupidatat incididunt sint deserunt voluptate aute id deserunt nisi.
Aliqua id fugiat nostrud irure ex duis ea quis id quis ad et.