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: 28px | font-weight: bold | line-height: 36px
large-bold | font-size: 22px | font-weight: bold | line-height: 28px
medium-bold | font-size: 18px | 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-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)

Icons

ic-accessibility
ic-add-photo
ic-advance
ic-amenities
ic-appetizer-fill
ic-arrived-fill
ic-award
ic-back
ic-badge
ic-birthday
ic-birthday-fill
ic-block-reservation
ic-bookmark
ic-bookmark-selected
ic-bussing-needed-fill
ic-calendar
ic-camera
ic-cancel
ic-cancelled-fill
ic-catering
ic-champagne-glasses
ic-champagne-glasses-fill
ic-change
ic-check-dropped-fill
ic-checkbox
ic-checkbox-indeterminate
ic-checkbox-selected
ic-checkmark
ic-chef
ic-cleared-fill
ic-clock
ic-clock-fill
ic-close
ic-contact
ic-cross-street
ic-cuisine
ic-delete
ic-description
ic-dessert-fill
ic-dietary
ic-dining-style
ic-down
ic-download
ic-dress-code
ic-edit
ic-email
ic-entertainment
ic-entree-fill
ic-expand
ic-export
ic-facebook
ic-favorite
ic-favorite-filled
ic-filter
ic-food-drink-fill
ic-gift-card
ic-google
ic-groups
ic-guest-requests-fill
ic-hamburger
ic-hide
ic-information
ic-instagram
ic-left
ic-left-message-fill
ic-lightbulb
ic-link
ic-list
ic-location
ic-map
ic-menu
ic-merge
ic-message-fill
ic-message-sent
ic-metric-change-down
ic-metric-change-up
ic-minus
ic-negative
ic-neighborhood
ic-new-window
ic-no-show-fill
ic-noise-level
ic-notes-fill
ic-ot-reservation-fill
ic-overflow
ic-paid-fill
ic-parking-details
ic-partially-arrived-fill
ic-partially-seated-fill
ic-party-count
ic-party-count-fill
ic-payment
ic-person
ic-phone
ic-photos
ic-plus
ic-points
ic-price-range
ic-print
ic-privacy
ic-promoted-inventory-fill
ic-public-transit
ic-question
ic-radio
ic-radio-selected
ic-report
ic-reveal
ic-review
ic-right
ic-scarcity
ic-search
ic-seat
ic-seated-fill
ic-service-bell-fill
ic-share
ic-shift-notes
ic-shift-notes-notification
ic-social-proof
ic-sort
ic-special-events
ic-specials
ic-specials-fill
ic-step-1-fill
ic-step-2-fill
ic-success
ic-table-categories
ic-tablecombo
ic-tag
ic-thumbs-up
ic-ticket
ic-ticketing-fill
ic-toilet
ic-toolbox
ic-twitter
ic-unavailable
ic-up
ic-upvote
ic-upvote-selected
ic-vip-fill
ic-waitlist