Colors

Preview

Source

() => (
  <Block>
    <Flex
      backgroundColor="#edf2f7"
      padding="10px"
      justifyContent="space-between"
      color="#fff"
    >
      <Button color="#fff" bg="teal.700" borderColor="teal.700">
        teal.700
      </Button>
      <Button color="#fff" bg="purple.800" borderColor="purple.800">
        purple.800
      </Button>
      <Button color="#fff" bg="red.800" borderColor="red.800">
        red.800
      </Button>
      <Button color="#fff" bg="indigo.800" borderColor="indigo.800">
        indigo.800
      </Button>
      <Button color="#fff" bg="gray.700" borderColor="gray.700">
        gray.700
      </Button>
      <Button bg="transparent" borderWidth="1px" color="gray.600">
        transparent
      </Button>
    </Flex>
    <Flex
      backgroundColor="#edf2f7"
      padding="10px"
      justifyContent="space-between"
    >
      <Button bg="teal.400" borderColor="teal.400">
        teal.400
      </Button>
      <Button bg="purple.400" borderColor="purple.400">
        purple.400
      </Button>
      <Button bg="red.400" borderColor="red.400">
        red.400
      </Button>
      <Button bg="indigo.400" borderColor="indigo.400">
        indigo.400
      </Button>
      <Button bg="gray.400" borderColor="gray.400">
        gray.400
      </Button>
      <Button bg="green.400" borderColor="green.400">
        green.400
      </Button>
    </Flex>
  </Block>
)

() => (
  <Block>
    <Flex
      backgroundColor="#edf2f7"
      padding="10px"
      justifyContent="space-between"
      color="#fff"
    >
      <Button color="#fff" bg="teal.700" borderColor="teal.700">
        teal.700
      </Button>
      <Button color="#fff" bg="purple.800" borderColor="purple.800">
        purple.800
      </Button>
      <Button color="#fff" bg="red.800" borderColor="red.800">
        red.800
      </Button>
      <Button color="#fff" bg="indigo.800" borderColor="indigo.800">
        indigo.800
      </Button>
      <Button color="#fff" bg="gray.700" borderColor="gray.700">
        gray.700
      </Button>
      <Button bg="transparent" borderWidth="1px" color="gray.600">
        transparent
      </Button>
    </Flex>
    <Flex
      backgroundColor="#edf2f7"
      padding="10px"
      justifyContent="space-between"
    >
      <Button bg="teal.400" borderColor="teal.400">
        teal.400
      </Button>
      <Button bg="purple.400" borderColor="purple.400">
        purple.400
      </Button>
      <Button bg="red.400" borderColor="red.400">
        red.400
      </Button>
      <Button bg="indigo.400" borderColor="indigo.400">
        indigo.400
      </Button>
      <Button bg="gray.400" borderColor="gray.400">
        gray.400
      </Button>
      <Button bg="green.400" borderColor="green.400">
        green.400
      </Button>
    </Flex>
  </Block>
)

primary

Key	CSS Value	Example
primary	#525252

logoColor

Key	CSS Value	Example
logoColor	#551A8B

transparent

Key	CSS Value	Example
transparent	transparent

black

Key	CSS Value	Example
black	#000

white

Key	CSS Value	Example
white	#fff

gray

Key	CSS Value	Example
gray.50	#f9fafb
gray.100	#f4f5f7
gray.200	#e5e7eb
gray.300	#d2d6dc
gray.400	#9fa6b2
gray.500	#6b7280
gray.600	#4b5563
gray.700	#374151
gray.800	#252f3f
gray.900	#161e2e

cool-gray

Key	CSS Value	Example
cool-gray.50	#fbfdfe
cool-gray.100	#f1f5f9
cool-gray.200	#e2e8f0
cool-gray.300	#cfd8e3
cool-gray.400	#97a6ba
cool-gray.500	#64748b
cool-gray.600	#475569
cool-gray.700	#364152
cool-gray.800	#27303f
cool-gray.900	#1a202e

red

Key	CSS Value	Example
red.50	#fdf2f2
red.100	#fde8e8
red.200	#fbd5d5
red.300	#f8b4b4
red.400	#f98080
red.500	#f05252
red.600	#e02424
red.700	#c81e1e
red.800	#9b1c1c
red.900	#771d1d

orange

Key	CSS Value	Example
orange.50	#fff8f1
orange.100	#feecdc
orange.200	#fcd9bd
orange.300	#fdba8c
orange.400	#ff8a4c
orange.500	#ff5a1f
orange.600	#d03801
orange.700	#b43403
orange.800	#8a2c0d
orange.900	#771d1d

yellow

Key	CSS Value	Example
yellow.50	#fdfdea
yellow.100	#fdf6b2
yellow.200	#fce96a
yellow.300	#faca15
yellow.400	#e3a008
yellow.500	#c27803
yellow.600	#9f580a
yellow.700	#8e4b10
yellow.800	#723b13
yellow.900	#633112

green

Key	CSS Value	Example
green.50	#f3faf7
green.100	#def7ec
green.200	#bcf0da
green.300	#84e1bc
green.400	#31c48d
green.500	#0e9f6e
green.600	#057a55
green.700	#046c4e
green.800	#03543f
green.900	#014737

teal

Key	CSS Value	Example
teal.50	#edfafa
teal.100	#d5f5f6
teal.200	#afecef
teal.300	#7edce2
teal.400	#16bdca
teal.500	#0694a2
teal.600	#047481
teal.700	#036672
teal.800	#05505c
teal.900	#014451

blue

Key	CSS Value	Example
blue.50	#ebf5ff
blue.100	#e1effe
blue.200	#c3ddfd
blue.300	#a4cafe
blue.400	#76a9fa
blue.500	#3f83f8
blue.600	#1c64f2
blue.700	#1a56db
blue.800	#1e429f
blue.900	#233876

indigo

Key	CSS Value	Example
indigo.50	#f0f5ff
indigo.100	#e5edff
indigo.200	#cddbfe
indigo.300	#b4c6fc
indigo.400	#8da2fb
indigo.500	#6875f5
indigo.600	#5850ec
indigo.700	#5145cd
indigo.800	#42389d
indigo.900	#362f78

purple

Key	CSS Value	Example
purple.50	#f6f5ff
purple.100	#edebfe
purple.200	#dcd7fe
purple.300	#cabffd
purple.400	#ac94fa
purple.500	#9061f9
purple.600	#7e3af2
purple.700	#6c2bd9
purple.800	#5521b5
purple.900	#4a1d96

pink

Key	CSS Value	Example
pink.50	#fdf2f8
pink.100	#fce8f3
pink.200	#fad1e8
pink.300	#f8b4d9
pink.400	#f17eb8
pink.500	#e74694
pink.600	#d61f69
pink.700	#bf125d
pink.800	#99154b
pink.900	#751a3d