Design tokens

The Kalo design system is built up from design tokens. Design tokens are the very lowest level variables that together, make up larger components.

Colors, type scales, spacing units, and transitions all are examples of categories of design tokens.

Using the tokens

The design tokens are transformed in to several different formats, including css variables, JS variable, and as a theme via the Emotion ThemeProvider.

Via the ThemeProvider

To access tokens via the ThemeProvider, use the `theme` prop:

props.theme.CATEGORY.TOKEN

For example:

background-color: ${props => props.theme.colors.grey500}

Via CSS variables

If you're writing vanilla CSS in the frontend, all of the variables are injected in to webpack. They are available by accessing the direct token name:

background-color: var(--grey500);

Our current tokens

TokenValue
colors
black
#000000
blue
#4db9cf
blue000
#e8f6f8
blue100
#d0ecf2
blue200
#b5e2eb
blue300
#97d6e3
blue400
#75c8d9
blue500
#4db9cf
blue600
#45a7bb
blue700
#3d92a4
blue800
#327988
blue900
#245761
charcoal
#2c2e50
currentColor
currentColor
green
#4ed2a4
green000
#e8f9f3
green100
#d0f3e7
green200
#b5ecd9
green300
#98e4ca
green400
#76dcb8
green500
#4ed2a4
green600
#46be94
green700
#3da682
green800
#338a6c
green900
#25644e
grey
#98a0a7
grey000
#f9fafc
grey100
#edf1f5
grey200
#dde1e4
grey300
#cdd3d8
grey400
#bdc4cb
grey500
#abb4bb
grey600
#98a0a7
grey700
#83898f
grey800
#676c71
grey900
#3c3f42
inherit
inherit
navy
#2c2e50
navy000
#eaeaee
navy100
#d5d5dc
navy200
#c0c0cb
navy300
#ababb9
navy400
#9697ab
navy500
#808296
navy600
#6b6d85
navy700
#565873
navy800
#414262
navy900
#2c2e50
none
orange
#fdb61c
orange000
#fef5e1
orange100
#feebc2
orange200
#fee0a0
orange300
#fdd479
orange400
#fdc64e
orange500
#fdb61c
orange600
#e4a419
orange700
#c99016
orange800
#a77812
orange900
#78560d
pink000
#fdecf1
pink100
#fbd6e3
pink200
#f9bed2
pink300
#f6a2be
pink400
#f37da5
pink500
#ee467e
pink600
#d73f71
pink700
#bc3763
pink800
#9b2d52
pink900
#6f203b
platinum
#cdd3d8
purple
#9f81da
purple000
#f3effa
purple100
#e6def5
purple200
#d8cbf0
purple300
#c8b6e9
purple400
#b59ee2
purple500
#9f81da
purple600
#8f74c4
purple700
#7d65ac
purple800
#67548e
purple900
#493b65
red
#ee467e
silver
#abb4bb
slate
#414262
snow
#dde1e4
white
#ffffff
gradients
gradientBlue
linear-gradient(to right, #2DC9EB 0%, #14D2B8 100%)
gradientBlueStop1
#2dc9eb
gradientBlueStop2
#14d2b8
gradientBlueTwo
linear-gradient(135deg, #0d7ef2 0%, #49a1fb 100%)
gradientBlueTwoStop1
#0d7ef2
gradientBlueTwoStop2
#49a1fb
gradientPink
linear-gradient(to right, #E83F94 0%, #F54E5E 100%)
gradientPinkStop1
#e83f94
gradientPinkStop2
#f54e5e
gradientPurple
linear-gradient(135deg, #E62888 0%, #211660 100%)
gradientPurpleStop1
#e62888
gradientPurpleStop2
#211660
typography
fontSizeHeadingExtraLarge
2.4rem
fontSizeHeadingExtraSmall
1rem
fontSizeHeadingLarge
2rem
fontSizeHeadingMedium
1.6rem
fontSizeHeadingSmall
1.4rem
fontSizeTextExtraLarge
2.4rem
fontSizeTextExtraSmall
1.2rem
fontSizeTextLarge
1.8rem
fontSizeTextMedium
1.6rem
fontSizeTextSmall
1.4rem
fontWeightBold
700
fontWeightLight
300
fontWeightMedium
500
fontWeightNormal
400
fontWeightSemibold
600
layout
boxShadowLevel0
none
boxShadowLevel1
0 3px 6px rgba(140, 140, 140, 0.08)
boxShadowLevel2
0 10px 25px rgba(140, 140, 140, 0.14)
boxShadowLevel3
0 12px 25px rgba(140, 140, 140, 0.21)
boxShadowLevel4
0 14px 25px rgba(140, 140, 140, 0.27)
spacingExtraExtraLarge
48px
spacingExtraLarge
32px
spacingExtraSmall
4px
spacingLarge
24px
spacingMedium
16px
spacingNone
0px
spacingSmall
8px
alerts
confirmation
#e5f7f1
error
#ffebee
info
#e8fafc
warning
#fff6d8
grid
gridMaxWidth
1200
table
tableDefaultBorder
1px solid #EDF1F5
input
inputActiveBorder
1px solid #98a0a7
inputBorderRadius
4px
inputDefaultBackground
#ffffff
inputDefaultBorder
1px solid #dde1e4
inputDefaultColor
#2c2e50
inputDisabledBackground
#edf1f5
inputDisabledBorder
1px solid #dde1e4
inputDisabledColor
#bdc4cb
inputHoverBorder
1px solid #abb4bb
inputPlaceholderColor
#abb4bb
inputReadonlyBackground
#edf1f5
inputReadonlyBorder
1px dashed #dde1e4
inputReadonlyColor
#bdc4cb