Colors
primary#276EF1
primary700#0C2960
primary600#123D90
primary500#174EB6
primary400#276EF1
primary300#548BF4
primary200#9CBCF8
primary100#D2E0FC
primary50#EDF3FE
negative#E54937
negative700#5C1D16
negative600#892C21
negative500#AE372A
negative400#E54937
negative300#EB7567
negative200#F4AFA7
negative100#FADBD7
negative50#FDF0EF
warning#ED6F0E
warning700#5F2C06
warning600#8E4308
warning500#B4540B
warning400#ED6F0E
warning300#F19248
warning200#F6BA8B
warning100#FBE2CF
warning50#FEF3EC
positive#07A35A
positive700#034124
positive600#046236
positive500#057C44
positive400#07A35A
positive300#43B982
positive200#88D3B0
positive100#CDEDDE
positive50#EBF8F2
mono100#FFFFFF
mono200#F7F7F7
mono300#F0F0F0
mono400#E5E5E5
mono500#CCCCCC
mono600#B3B3B3
mono700#999999
mono800#666666
mono900#333333
mono1000#000000
rating200#FFE1A5
rating400#FFC043
Sizing
scale0 (2px)
scale100 (4px)
scale200 (6px)
scale300 (8px)
scale400 (10px)
scale500 (12px)
scale600 (16px)
scale700 (20px)
scale800 (24px)
scale900 (32px)
scale1000 (40px)
scale1200 (48px)
scale1400 (56px)
scale1600 (64px)
scale2400 (96px)
scale3200 (128px)
scale4800 (192px)
Lighting
shadow400 (0 1px 4px hsla(0, 0%, 0%, 0.16))
shadow500 (0 2px 8px hsla(0, 0%, 0%, 0.16))
shadow600 (0 4px 16px hsla(0, 0%, 0%, 0.16))
shadow700 (0 8px 24px hsla(0, 0%, 0%, 0.16))
overlay0 (inset 0 0 0 1000px hsla(0, 0%, 0%, 0))
overlay100 (inset 0 0 0 1000px hsla(0, 0%, 0%, 0.04))
overlay200 (inset 0 0 0 1000px hsla(0, 0%, 0%, 0.08))
overlay300 (inset 0 0 0 1000px hsla(0, 0%, 0%, 0.12))
overlay400 (inset 0 0 0 1000px hsla(0, 0%, 0%, 0.16))
overlay500 (inset 0 0 0 1000px hsla(0, 0%, 0%, 0.2))
overlay600 (inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24))
Typography
font100
We ignite opportunity by setting the world in motion.
(font-size: 11px, font-weight: normal, line-height: 16px)
font200
We ignite opportunity by setting the world in motion.
(font-size: 12px, font-weight: normal, line-height: 20px)
font250
We ignite opportunity by setting the world in motion.
(font-size: 12px, font-weight: bold, line-height: 20px)
font300
We ignite opportunity by setting the world in motion.
(font-size: 14px, font-weight: normal, line-height: 20px)
font350
We ignite opportunity by setting the world in motion.
(font-size: 14px, font-weight: bold, line-height: 20px)
font400
We ignite opportunity by setting the world in motion.
(font-size: 16px, font-weight: normal, line-height: 24px)
font450
We ignite opportunity by setting the world in motion.
(font-size: 16px, font-weight: bold, line-height: 24px)
font500
We ignite opportunity by setting the world in motion.
(font-size: 20px, font-weight: bold, line-height: 28px)
font600
We ignite opportunity by setting the world in motion.
(font-size: 24px, font-weight: bold, line-height: 36px)
font700
We ignite opportunity by setting the world in motion.
(font-size: 32px, font-weight: bold, line-height: 48px)
font800
We ignite opportunity by setting the world in motion.
(font-size: 40px, font-weight: bold, line-height: 56px)
font900
We ignite opportunity by setting the world in motion.
(font-size: 52px, font-weight: bold, line-height: 68px)
font1000
We ignite opportunity by setting the world in motion.
(font-size: 72px, font-weight: normal, line-height: 96px)