Dark theme
TOKENS
Colors
Fonts
Letter Spacings
Line Heights
Font Weights
Font Sizes
Sizes
Spacing
Border Radius
Text Styles
Layer Styles
PLAYGROUND
Typography
Color Contrast
Playground / Constrast
Background
black
white.60
white.80
white.90
white
amber.50
amber.100
amber.200
amber.300
amber.400
amber.500
amber.600
amber.700
amber.800
amber.900
amber.950
blue.50
blue.75
blue.100
blue.200
blue.300
blue.400
blue.500
blue.550
blue.600
blue.700
blue.800
blue.900
blue.950
blue.95050
grey.50
grey.100
grey.200
grey.300
grey.400
grey.500
grey.600
grey.700
grey.800
grey.900
grey.950
red.50
red.100
red.200
red.300
red.400
red.500
red.600
red.700
red.800
red.900
red.950
green.50
green.100
green.200
green.300
green.400
green.500
green.600
green.700
green.800
green.900
green.950
purple.50
purple.100
purple.200
purple.300
purple.500
purple.950
pink.50
pink.300
pink.500
pink.950
yellow.50
yellow.300
yellow.500
yellow.900
blueAlternate.50
Foreground
black
white.60
white.80
white.90
white
amber.50
amber.100
amber.200
amber.300
amber.400
amber.500
amber.600
amber.700
amber.800
amber.900
amber.950
blue.50
blue.75
blue.100
blue.200
blue.300
blue.400
blue.500
blue.550
blue.600
blue.700
blue.800
blue.900
blue.950
blue.95050
grey.50
grey.100
grey.200
grey.300
grey.400
grey.500
grey.600
grey.700
grey.800
grey.900
grey.950
red.50
red.100
red.200
red.300
red.400
red.500
red.600
red.700
red.800
red.900
red.950
green.50
green.100
green.200
green.300
green.400
green.500
green.600
green.700
green.800
green.900
green.950
purple.50
purple.100
purple.200
purple.300
purple.500
purple.950
pink.50
pink.300
pink.500
pink.950
yellow.50
yellow.300
yellow.500
yellow.900
blueAlternate.50
example text showing contrast
21:1
Contrast ratio
Normal Text
AA
4.5:1
AAA
7:1
Large Text
AA
3:1
AAA
4.5:1