System Props

Design tokens are mapped to to a theme made available to components through system props.


Theme Reference:

// Example
<Box bg="blue.100" color="gray.1000" />
KeyJS TokenValue
gray.100color_gray_100#f5f8fa
gray.200color_gray_200#ebf0f5
gray.300color_gray_300#d9e0e6
gray.400color_gray_400#c5ced6
gray.500color_gray_500#a2adb8
gray.600color_gray_600#818e9a
gray.700color_gray_700#626f7a
gray.800color_gray_800#46525c
gray.900color_gray_900#39444d
gray.1000color_gray_1000#2c353d
blue.100color_blue_100#f2f8ff
blue.200color_blue_200#e8f3ff
blue.300color_blue_300#cce3ff
blue.400color_blue_400#abd2ff
blue.500color_blue_500#78b6ff
blue.600color_blue_600#429bff
blue.700color_blue_700#1273e6
blue.800color_blue_800#0060cc
blue.900color_blue_900#1a497d
blue.1000color_blue_1000#203752
red.100color_red_100#fff2f3
red.200color_red_200#ffebec
red.300color_red_300#ffcfd1
red.400color_red_400#ffb5b9
red.500color_red_500#ff858b
red.600color_red_600#ff5760
red.700color_red_700#d9363e
red.800color_red_800#a12b2b
red.900color_red_900#80252a
red.1000color_red_1000#5c2121
yellow.100color_yellow_100#fffadb
yellow.200color_yellow_200#fff4b5
yellow.300color_yellow_300#ffe75c
yellow.400color_yellow_400#ffda00
yellow.500color_yellow_500#e3ad0b
yellow.600color_yellow_600#b58c12
yellow.700color_yellow_700#876a2f
yellow.800color_yellow_800#614d27
yellow.900color_yellow_900#523e21
yellow.1000color_yellow_1000#3d3121
green.100color_green_100#e8fff7
green.200color_green_200#d6fff1
green.300color_green_300#b5f5e0
green.400color_green_400#8debcb
green.500color_green_500#52d9ac
green.600color_green_600#28bd8b
green.700color_green_700#009f6a
green.800color_green_800#067852
green.900color_green_900#1b5441
green.1000color_green_1000#233b33
teal.100color_teal_100#e3ffff
teal.200color_teal_200#ccffff
teal.300color_teal_300#96feff
teal.400color_teal_400#6ef4f5
teal.500color_teal_500#37e4e6
teal.600color_teal_600#13bebf
teal.700color_teal_700#199091
teal.800color_teal_800#226363
teal.900color_teal_900#274c4d
teal.1000color_teal_1000#223a3b
purple.100color_purple_100#f9f5ff
purple.200color_purple_200#f3ebff
purple.300color_purple_300#e5d4ff
purple.400color_purple_400#d7bdff
purple.500color_purple_500#bd91ff
purple.600color_purple_600#a469ff
purple.700color_purple_700#8c40ff
purple.800color_purple_800#7122e3
purple.900color_purple_900#4c2e87
purple.1000color_purple_1000#352e4a
magenta.100color_magenta_100#fff2f8
magenta.200color_magenta_200#ffe8f2
magenta.300color_magenta_300#ffcce3
magenta.400color_magenta_400#ffb0d3
magenta.500color_magenta_500#ff7db7
magenta.600color_magenta_600#f0549a
magenta.700color_magenta_700#d1347a
magenta.800color_magenta_800#992659
magenta.900color_magenta_900#782449
magenta.000color_magenta_1000#522338
brand.orangecolor_brand_orange#fa6423
brand.graycolor_brand_gray#55555a
brand.bluecolor_brand_blue#37aadc
// Example
<Box my="400" p={["200", null, "400"]} />
KeyJS TokenValue
0spacing_00rem
100spacing_1000.25rem
200spacing_2000.5rem
300spacing_3000.75rem
400spacing_4001rem
500spacing_5001.5rem
600spacing_6002rem
700spacing_7003rem
800spacing_8004rem
// Example
<Box borderBottom="400" />
KeyJS TokenValue
300${borderWidth_100} solid ${}color_gray_300}
400${borderWidth_100} solid ${color_gray_400}
500${borderWidth_200} solid ${color_gray_300}
// Example
<Box borderRadius="pill" />
KeyJS TokenValue
0borderRadius_00
100borderRadius_1001px
200borderRadius_2002px
pillborderRadius_pill9999em
circleborderRadius_circle50%
// Example
<Box borderWidth="100" />
KeyJS TokenValue
0borderWidth_00
100borderWidth_1001px
200borderWidth_2002px
// Example
<Box boxShadow="400" />
KeyJS TokenValue
0boxShadow_0none
100boxShadow_1000px 1px 2px rgba(44,53,61,.2)
200boxShadow_2000px 2px 4px rgba(44,53,61,.2)
300boxShadow_3000px 4px 8px rgba(44,53,61,.2)
400boxShadow_4000px 8px 16px rgba(44,53,61,.2)
// Example
<Text fontFamily="monospace" />
KeyJS TokenValue
sansfontFamily_sans'Calibre', -apple-system, BlinkMacSystemFont, 'San Francisco', 'Segoe UI', Roboto, Helvetica, sans-serif
monospacefontFamily_monospace'SFMono-Regular', Monaco, Consolas, 'Lucida Console', monospace
// Example
<Text fontWeight="medium" />
KeyJS TokenValue
lightfontWeight_light300
normalfontWeight_normal400
mediumfontWeight_medium500
semiboldfontWeight_semibold600
// Example
<Text fontSize="600" />
KeyJS TokenValue
100fontSize_1000.875rem
200fontSize_2001rem
300fontSize_3001.125rem
400fontSize_4001.25rem
500fontSize_5001.5rem
600fontSize_6002rem
700fontSize_7002.75rem
800fontSize_8003.5rem
// Example
<Text lineHeight="600" />
KeyJS TokenValue
100lineHeight_1001rem
200lineHeight_2001.25rem
300lineHeight_3001.5rem
400lineHeight_4001.750rem
500lineHeight_5002rem
600lineHeight_6002.5rem
700lineHeight_7003.5rem
800lineHeight_8004.25rem
// Example
// Applies 100% up to the first breakpoint, 50% to the second, 33% to the third
<Box width={["100%", 1/2, 1/3]} />
Array IndexJS TokenValue
0mediaQuery_xs448px
1mediaQuery_sm720px
2mediaQuery_md960px
3mediaQuery_lg1200px
4mediaQuery_xl1440px
KeyJS TokenValue
belowzIndex_below-1
defaultzIndex_default1
overlayzIndex_overlay1000
KeyJS TokenValue
duration.fastmotionDuration_fast0.15s
duration.mediummotionDuration_medium0.3s
duration.slowmotionDuration_slow0.7s
ease.inmotionEase_incubic-bezier(.35, 0, .7, .2)
ease.outmotionEase_outcubic-bezier(0, 0, .3, 1)
ease.inOutmotionEase_in_outcubic-bezier(.4, 0, .3, 1)