Design Tokens
This page shows current design tokens used in OTKit. To contribute, or add an issue, visit the design-tokens repository.
Colors
#153c23
#153c23
green-darker
#194829
#194829
green-dark
#2f864d
#2f864d
green
#39a25e
#39a25e
green-light
#64c987
#64c987
green-lighter
#f0faf3
#f0faf3
green-lightest
#ffffff
#ffffff
white
#441a0e
#441a0e
orange-darker
#83331b
#83331b
orange-dark
#c84f29
#c84f29
orange
#d86441
#d86441
orange-light
#e69b84
#e69b84
orange-lighter
#fcf1ee
#fcf1ee
orange-lightest
#450d10
#450d10
red-darker
#931b23
#931b23
red-dark
#da3743
#da3743
red
#e15b64
#e15b64
red-light
#eea0a5
#eea0a5
red-lighter
#fceeef
#fceeef
red-lightest
#513701
#513701
yellow-darker
#885e01
#885e01
yellow-dark
#d99502
#d99502
yellow
#fdaf08
#fdaf08
yellow-light
#fdc958
#fdc958
yellow-lighter
#fff8eb
#fff8eb
yellow-lightest
#141a26
#141a26
ash-darker
#2d333f
#2d333f
ash-dark
#6f737b
#6f737b
ash
#91949a
#91949a
ash-light
#d8d9db
#d8d9db
ash-lighter
#f1f2f4
#f1f2f4
ash-lightest
#450d29
#450d29
fuchsia-darker
#971c59
#971c59
fuchsia-dark
#d82c82
#d82c82
fuchsia
#df4e96
#df4e96
fuchsia-light
#eb93bf
#eb93bf
fuchsia-lighter
#fceef5
#fceef5
fuchsia-lightest
#0d1b45
#0d1b45
blue-darker
#2146b5
#2146b5
blue-dark
#4a6fde
#4a6fde
blue
#6c8ae4
#6c8ae4
blue-light
#b1c1f1
#b1c1f1
blue-lighter
#eef1fc
#eef1fc
blue-lightest
#0f3643
#0f3643
teal-darker
#154a5b
#154a5b
teal-dark
#247f9e
#247f9e
teal
#2b9abf
#2b9abf
teal-light
#61bddb
#61bddb
teal-lighter
#eef8fb
#eef8fb
teal-lightest
#09342a
#09342a
aqua-darker
#0c4134
#0c4134
aqua-dark
#18856b
#18856b
aqua
#1fa888
#1fa888
aqua-light
#3ddbb6
#3ddbb6
aqua-lighter
#eefcf9
#eefcf9
aqua-lightest
#36143d
#36143d
purple-darker
#7c2f8e
#7c2f8e
purple-dark
#ad4cc3
#ad4cc3
purple
#bb6acd
#bb6acd
purple-light
#d7a7e2
#d7a7e2
purple-lighter
#f8f0fa
#f8f0fa
purple-lightest
#1a0a47
#1a0a47
violet-darker
#4d1fd6
#4d1fd6
violet-dark
#7f5ce8
#7f5ce8
violet
#9d82ed
#9d82ed
violet-light
#d5c9f7
#d5c9f7
violet-lighter
#f1edfc
#f1edfc
violet-lightest
Typography – Desktop
To use these OTKit typography rules in your project, we have a production-tested package that exports readily made font groupings for you: @ot-react-ui/typography-desktop. See its README for details.
It is generally not recommended to directly consume / reference the values in this token unless for explicit reasons, such as overriding.
xxlarge-bold | font-size: 48px | font-weight: bold | line-height: 56px
xlarge-bold | font-size: 32px | font-weight: bold | line-height: 36px
large-bold | font-size: 24px | font-weight: bold | line-height: 28px
large-medium | font-size: 24px | font-weight: 500 | line-height: 32px
medium-bold | font-size: 18px | font-weight: bold | line-height: 24px
small-bold | font-size: 16px | font-weight: bold | line-height: 24px
small-medium | font-size: 16px | font-weight: 500 | line-height: 24px
small-regular | font-size: 16px | font-weight: normal | line-height: 24px
xsmall-bold | font-size: 14px | font-weight: bold | line-height: 20px
xsmall-medium | font-size: 14px | font-weight: 500 | line-height: 20px
xsmall-regular | font-size: 14px | font-weight: normal | line-height: 20px
Grids
margin-large: 32px
gutter-large: 16px
margin-small: 24px
gutter-small: 12px
Spacing
spacing-xsmall: 4px
spacing-small: 8px
spacing-medium: 16px
spacing-large: 32px
spacing-xlarge: 48px
spacing-xxlarge: 64px
Borders
border-radius-small: 4px
Breakpoints
breakpoint-desktop-min: 1056px
breakpoint-tablet-max: 1055px
breakpoint-tablet-min: 768px
breakpoint-mobile-max: 767px
Shadows
box-shadow-container: 0px 2px 4px rgba(45, 51, 63, .2)