Colors
These are the colors in the base.ts theme file for reference.
To use a color, use a theme-token in the format of $primary500 on a styled component.
$black
#000000
#000000
$white
#FFFFFF
#FFFFFF
$primary50
#FFECEB
#FFECEB
$primary100
#FEC4C1
#FEC4C1
$primary200
#FF9E99
#FF9E99
$primary300
#FE7C75
#FE7C75
$primary400
#FF4C43
#FF4C43
$primary500
#FF2A1F
#FF2A1F
$primary600
#FF0F01
#FF0F01
$primary700
#CC0A00
#CC0A00
$primary800
#B40A00
#B40A00
$primary900
#670600
#670600
$gray50
#DCDEE0
#DCDEE0
$gray100
#C2C2C2
#C2C2C2
$gray200
#A9AEB1
#A9AEB1
$gray300
#999999
#999999
$gray400
#858585
#858585
$gray500
#71767A
#71767A
$gray600
#575757
#575757
$gray700
#474747
#474747
$gray800
#333333
#333333
$gray900
#1C1C1C
#1C1C1C
$teal
#00FFD1
#00FFD1
$greenVivid
#5CFFB6
#5CFFB6
$orange50
#FFEDD6
#FFEDD6
$orange100
#FFDAAD
#FFDAAD
$orange200
#FFCB96
#FFCB96
$orange300
#FFB264
#FFB264
$orange400
#FF9E2B
#FF9E2B
$orange500
#F78800
#F78800
$orange600
#CC7000
#CC7000
$orange700
#B2701E
#B2701E
$orange800
#7A4300
#7A4300
$orange900
#4D300D
#4D300D
$purple50
#E2D7FE
#E2D7FE
$purple100
#C8B5F8
#C8B5F8
$purple200
#A988FB
#A988FB
$purple300
#8254FA
#8254FA
$purple400
#6F39F9
#6F39F9
$purple500
#5B1EFA
#5B1EFA
$purple600
#6742C7
#6742C7
$purple700
#3B1D87
#3B1D87
$purple800
#2D1666
#2D1666
$purple900
#2C1565
#2C1565
$info50
#E7F6F8
#E7F6F8
$info100
#C2F5FF
#C2F5FF
$info200
#99DEEA
#99DEEA
$info300
#70E7FF
#70E7FF
$info400
#47E0FF
#47E0FF
$info500
#1FDAFF
#1FDAFF
$info600
#00BDE3
#00BDE3
$info700
#009EC1
#009EC1
$info800
#00778F
#00778F
$info900
#2E6276
#2E6276
$error50
#F4E3DB
#F4E3DB
$error100
#FFD3C2
#FFD3C2
$error200
#FFB699
#FFB699
$error300
#F39268
#F39268
$error400
#FF7B47
#FF7B47
$error500
#FF4800
#FF4800
$error600
#E04000
#E04000
$error700
#B83400
#B83400
$error800
#B51D09
#B51D09
$error900
#6F3331
#6F3331
$warning50
#FED8AA
#FED8AA
$warning100
#FEEEAE
#FEEEAE
$warning200
#FEE685
#FEE685
$warning300
#FEB55D
#FEB55D
$warning400
#FE9F2B
#FE9F2B
$warning500
#FFB60A
#FFB60A
$warning600
#E5A000
#E5A000
$warning700
#B18543
#B18543
$warning800
#936F38
#936F38
$warning900
#76592D
#76592D
$success50
#ECF3EC
#ECF3EC
$success100
#D6FFED
#D6FFED
$success200
#99FFD1
#99FFD1
$success300
#5CFFB6
#5CFFB6
$success400
#1FFF9A
#1FFF9A
$success500
#70E17B
#70E17B
$success600
#00A359
#00A359
$success700
#008F4F
#008F4F
$success800
#00733E
#00733E
$success900
#004022
#004022
$disabled50
#E6E6E6
#E6E6E6
$disabled100
#C9C9C9
#C9C9C9
$disabled200
#ADADAD
#ADADAD
$disabled300
#999999
#999999
$disabled400
#858585
#858585
$disabled500
#707070
#707070
$disabled600
#5C5C5C
#5C5C5C
$disabled700
#474747
#474747
$disabled800
#333333
#333333
$disabled900
#1F1F1F
#1F1F1F
$debug
rgba(255, 76, 67, 0.25)
rgba(255, 76, 67, 0.25)
$whiteLight
rgba(255, 255, 255, 0.8)
rgba(255, 255, 255, 0.8)
$lightShadow
0px 0px 10px rgba(255, 255, 255, 0.5)
0px 0px 10px rgba(255, 255, 255, 0.5)
$tealGreenGradient
linear-gradient(90deg, $teal -0.25%, $greenVivid 100%)
linear-gradient(90deg, $teal -0.25%, $greenVivid 100%)
$tealGreenShadow
0px 0px 10px rgba(92, 255, 182, 0.5)
0px 0px 10px rgba(92, 255, 182, 0.5)