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
blue.50
blue.100
blue.200
blue.300
blue.400
blue.500
blue.600
blue.700
blue.800
blue.900
blue.1000
blue.1100
blue.1200
light-blue.50
light-blue.100
light-blue.200
light-blue.300
light-blue.400
light-blue.500
light-blue.600
light-blue.700
light-blue.800
light-blue.900
light-blue.1000
light-blue.1100
light-blue.1200
cyan.50
cyan.100
cyan.200
cyan.300
cyan.400
cyan.500
cyan.600
cyan.700
cyan.800
cyan.900
cyan.1000
cyan.1100
cyan.1200
green.50
green.100
green.200
green.300
green.400
green.500
green.600
green.700
green.800
green.900
green.1000
green.1100
green.1200
lime.50
lime.100
lime.200
lime.300
lime.400
lime.500
lime.600
lime.700
lime.800
lime.900
lime.1000
lime.1100
lime.1200
yellow.50
yellow.100
yellow.200
yellow.300
yellow.400
yellow.500
yellow.600
yellow.700
yellow.800
yellow.900
yellow.1000
yellow.1100
yellow.1200
orange.50
orange.100
orange.200
orange.300
orange.400
orange.500
orange.600
orange.700
orange.800
orange.900
orange.1000
orange.1100
orange.1200
red.50
red.100
red.200
red.300
red.400
red.500
red.600
red.700
red.800
red.900
red.1000
red.1100
red.1200
magenta.50
magenta.100
magenta.200
magenta.300
magenta.400
magenta.500
magenta.600
magenta.700
magenta.800
magenta.900
magenta.1000
magenta.1100
magenta.1200
purple.50
purple.100
purple.200
purple.300
purple.400
purple.500
purple.600
purple.700
purple.800
purple.900
purple.1000
purple.1100
purple.1200
white
black
grey.50
grey.100
grey.200
grey.300
grey.400
grey.420
grey.500
grey.536
grey.600
grey.700
grey.800
grey.900
Foreground
blue.50
blue.100
blue.200
blue.300
blue.400
blue.500
blue.600
blue.700
blue.800
blue.900
blue.1000
blue.1100
blue.1200
light-blue.50
light-blue.100
light-blue.200
light-blue.300
light-blue.400
light-blue.500
light-blue.600
light-blue.700
light-blue.800
light-blue.900
light-blue.1000
light-blue.1100
light-blue.1200
cyan.50
cyan.100
cyan.200
cyan.300
cyan.400
cyan.500
cyan.600
cyan.700
cyan.800
cyan.900
cyan.1000
cyan.1100
cyan.1200
green.50
green.100
green.200
green.300
green.400
green.500
green.600
green.700
green.800
green.900
green.1000
green.1100
green.1200
lime.50
lime.100
lime.200
lime.300
lime.400
lime.500
lime.600
lime.700
lime.800
lime.900
lime.1000
lime.1100
lime.1200
yellow.50
yellow.100
yellow.200
yellow.300
yellow.400
yellow.500
yellow.600
yellow.700
yellow.800
yellow.900
yellow.1000
yellow.1100
yellow.1200
orange.50
orange.100
orange.200
orange.300
orange.400
orange.500
orange.600
orange.700
orange.800
orange.900
orange.1000
orange.1100
orange.1200
red.50
red.100
red.200
red.300
red.400
red.500
red.600
red.700
red.800
red.900
red.1000
red.1100
red.1200
magenta.50
magenta.100
magenta.200
magenta.300
magenta.400
magenta.500
magenta.600
magenta.700
magenta.800
magenta.900
magenta.1000
magenta.1100
magenta.1200
purple.50
purple.100
purple.200
purple.300
purple.400
purple.500
purple.600
purple.700
purple.800
purple.900
purple.1000
purple.1100
purple.1200
white
black
grey.50
grey.100
grey.200
grey.300
grey.400
grey.420
grey.500
grey.536
grey.600
grey.700
grey.800
grey.900
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