Design Tokens are atom-like buidling blocks that configure design systems. They are key-value pairs that define the foundation of Kisi's visual language, like typography, color and space.
Usage
Design tokens are available in different formats:
CSS
SCSS
JSON
Naming convention for CSS and SCSS is kebab-case, for JSON it is camelCase.
Note: Not all formats list all of the tokens. The individual token files should be checked to see what tokens are available.
Color palette
Token | Value | Example |
---|---|---|
$color-palette-black-tech | #191919 | |
$color-palette-black-tech-rgb | 25, 25, 25 | |
$color-palette-blue-10 | #eaeaff | |
$color-palette-blue-10-rgb | 234, 234, 255 | |
$color-palette-blue-20 | #c9cbff | |
$color-palette-blue-20-rgb | 201, 203, 255 | |
$color-palette-blue-30 | #7c83ff | |
$color-palette-blue-30-rgb | 124, 131, 255 | |
$color-palette-blue-50 | #4a52ff | |
$color-palette-blue-50-rgb | 74, 82, 255 | |
$color-palette-blue-60 | #3339c5 | |
$color-palette-blue-60-rgb | 51, 57, 197 | |
$color-palette-blue-80 | #222647 | |
$color-palette-blue-80-rgb | 34, 38, 71 | |
$color-palette-gray-cold-20 | #f0f2f5 | |
$color-palette-gray-cold-20-rgb | 240, 242, 245 | |
$color-palette-gray-cold-30 | #dbdce1 | |
$color-palette-gray-cold-30-rgb | 219, 220, 225 | |
$color-palette-gray-cold-40 | #c9cbd1 | |
$color-palette-gray-cold-40-rgb | 201, 203, 209 | |
$color-palette-gray-cold-50 | #67686e | |
$color-palette-gray-cold-50-rgb | 103, 104, 110 | |
$color-palette-gray-cold-60 | #393a3f | |
$color-palette-gray-cold-60-rgb | 57, 58, 63 | |
$color-palette-gray-cold-70 | #292a2e | |
$color-palette-gray-cold-70-rgb | 41, 42, 46 | |
$color-palette-gray-warm-20 | #f5f4f3 | |
$color-palette-gray-warm-20-rgb | 245, 244, 243 | |
$color-palette-gray-warm-30 | #e6e4e1 | |
$color-palette-gray-warm-30-rgb | 230, 228, 225 | |
$color-palette-gray-warm-40 | #c7c5c3 | |
$color-palette-gray-warm-40-rgb | 199, 197, 195 | |
$color-palette-gray-warm-50 | #71706e | |
$color-palette-gray-warm-50-rgb | 113, 112, 110 | |
$color-palette-gray-warm-60 | #3a3937 | |
$color-palette-gray-warm-60-rgb | 58, 57, 55 | |
$color-palette-gray-warm-70 | #292928 | |
$color-palette-gray-warm-70-rgb | 41, 41, 40 | |
$color-palette-green-10 | #96e697 | |
$color-palette-green-10-rgb | 150, 230, 151 | |
$color-palette-green-50 | #61d963 | |
$color-palette-green-50-rgb | 97, 217, 99 | |
$color-palette-green-80 | #4cad4d | |
$color-palette-green-80-rgb | 76, 173, 77 | |
$color-palette-red-10 | #ed624f | |
$color-palette-red-10-rgb | 237, 98, 79 | |
$color-palette-red-50 | #f24620 | |
$color-palette-red-50-rgb | 242, 70, 32 | |
$color-palette-red-80 | #ba3517 | |
$color-palette-red-80-rgb | 186, 53, 23 | |
$color-palette-white-pure | #ffffff | |
$color-palette-white-pure-rgb | 255, 255, 255 | |
$color-palette-yellow-10 | #fffcb8 | |
$color-palette-yellow-10-rgb | 255, 252, 184 | |
$color-palette-yellow-20 | #fffb94 | |
$color-palette-yellow-20-rgb | 255, 251, 148 | |
$color-palette-yellow-30 | #fff386 | |
$color-palette-yellow-30-rgb | 255, 243, 134 | |
$color-palette-yellow-50 | #ffed4a | |
$color-palette-yellow-50-rgb | 255, 237, 74 | |
$color-palette-yellow-80 | #d4c53e | |
$color-palette-yellow-80-rgb | 212, 197, 62 |
Typography
Token | Value | Example |
---|---|---|
$font-face-normal-family | neue-haas-unica,sans-serif | Kisi |
$font-face-italic-family | neue-haas-unica,sans-serif | Kisi |
$font-family-main | neue-haas-unica,sans-serif | Kisi |
$font-family-code | monospace | Kisi |
$font-face-normal-style | normal | Kisi |
$font-face-italic-style | italic | Kisi |
$font-weight-medium | 400 | Kisi |
$font-size-max-xl2 | 5.25rem | Kisi |
$font-size-max-xl2-px | 84px | |
$font-size-max-xl2-raw | 84 | |
$font-size-max-xl | 3.25rem | Kisi |
$font-size-max-xl-px | 52px | |
$font-size-max-xl-raw | 52 | |
$font-size-max-l | 2rem | Kisi |
$font-size-max-l-px | 32px | |
$font-size-max-l-raw | 32 | |
$font-size-max-m | 1.25rem | Kisi |
$font-size-max-m-px | 20px | |
$font-size-max-m-raw | 20 | |
$font-size-max-s | 1rem | Kisi |
$font-size-max-s-px | 16px | |
$font-size-max-s-raw | 16 | |
$font-size-max-xs | 0.75rem | Kisi |
$font-size-max-xs-px | 12px | |
$font-size-max-xs-raw | 12 |
Space
Token | Value | Example |
---|---|---|
$space-gutter | 1.25rem | |
$space-gutter-px | 20px | |
$space-gutter-raw | 20 | |
$space-xl6 | 36rem | |
$space-xl6-px | 576px | |
$space-xl6-raw | 576 | |
$space-xl5 | 22.25rem | |
$space-xl5-px | 356px | |
$space-xl5-raw | 356 | |
$space-xl4 | 13.75rem | |
$space-xl4-px | 220px | |
$space-xl4-raw | 220 | |
$space-xl3 | 8.5rem | |
$space-xl3-px | 136px | |
$space-xl3-raw | 136 | |
$space-xl2 | 5.25rem | |
$space-xl2-px | 84px | |
$space-xl2-raw | 84 | |
$space-xl | 3.25rem | |
$space-xl-px | 52px | |
$space-xl-raw | 52 | |
$space-l | 2rem | |
$space-l-px | 32px | |
$space-l-raw | 32 | |
$space-m | 1.25rem | |
$space-m-px | 20px | |
$space-m-raw | 20 | |
$space-s | 0.75rem | |
$space-s-px | 12px | |
$space-s-raw | 12 | |
$space-xs | 0.5rem | |
$space-xs-px | 8px | |
$space-xs-raw | 8 | |
$space-xs2 | 0.25rem | |
$space-xs2-px | 4px | |
$space-xs2-raw | 4 | |
$space-xs3 | 0.125rem | |
$space-xs3-px | 2px | |
$space-xs3-raw | 2 | |
$space-none | 0rem | |
$space-none-px | 0px | |
$space-none-raw | 0 |
Size
Token | Value | Example |
---|---|---|
$size-progressbar-m | 0.5rem | |
$size-progressbar-m-px | 8px | |
$size-progressbar-m-raw | 8 | |
$size-progressbar-s | 0.25rem | |
$size-progressbar-s-px | 4px | |
$size-progressbar-s-raw | 4 | |
$size-nav | 2.625rem | |
$size-nav-px | 42px | |
$size-nav-raw | 42 | |
$size-xl6 | 36rem | |
$size-xl6-px | 576px | |
$size-xl6-raw | 576 | |
$size-xl5 | 22.25rem | |
$size-xl5-px | 356px | |
$size-xl5-raw | 356 | |
$size-xl4 | 13.75rem | |
$size-xl4-px | 220px | |
$size-xl4-raw | 220 | |
$size-xl3 | 8.5rem | |
$size-xl3-px | 136px | |
$size-xl3-raw | 136 | |
$size-xl2 | 5.25rem | |
$size-xl2-px | 84px | |
$size-xl2-raw | 84 | |
$size-xl | 3.25rem | |
$size-xl-px | 52px | |
$size-xl-raw | 52 | |
$size-l | 2rem | |
$size-l-px | 32px | |
$size-l-raw | 32 | |
$size-m | 1.25rem | |
$size-m-px | 20px | |
$size-m-raw | 20 | |
$size-s | 0.75rem | |
$size-s-px | 12px | |
$size-s-raw | 12 | |
$size-xs | 0.5rem | |
$size-xs-px | 8px | |
$size-xs-raw | 8 | |
$size-xs2 | 0.25rem | |
$size-xs2-px | 4px | |
$size-xs2-raw | 4 | |
$size-none | 0rem | |
$size-none-px | 0px | |
$size-none-raw | 0 |
Scale
Token | Value | |
---|---|---|
$scale-positive-xl2 | 1.16 | |
$scale-positive-xl | 1.1 | |
$scale-positive-l | 1.06 | |
$scale-positive-m | 1.04 | |
$scale-positive-s | 1.02 | |
$scale-normal | 1 | |
$scale-negative-xl2 | 0.84 | |
$scale-negative-xl | 0.9 | |
$scale-negative-l | 0.94 | |
$scale-negative-m | 0.96 | |
$scale-negative-s | 0.98 | |
$scale-negative-zero | 0 |
Layout
Token | Value | |
---|---|---|
$layout-grid-track-amount-xsm | 4 | |
$layout-grid-track-amount-sm | 4 | |
$layout-grid-track-amount-md | 12 | |
$layout-grid-track-amount-lg | 12 | |
$layout-grid-track-size-xsm-max | 5.9375rem | |
$layout-grid-track-size-xsm-max-px | 95px | |
$layout-grid-track-size-xsm-max-raw | 95 | |
$layout-grid-track-size-sm-max | 10.4375rem | |
$layout-grid-track-size-sm-max-px | 167px | |
$layout-grid-track-size-sm-max-raw | 167 | |
$layout-grid-track-size-md-max | 3.8125rem | |
$layout-grid-track-size-md-max-px | 61px | |
$layout-grid-track-size-md-max-raw | 61 | |
$layout-grid-track-size-lg-max | 5.625rem | |
$layout-grid-track-size-lg-max-px | 90px | |
$layout-grid-track-size-lg-max-raw | 90 | |
$layout-container-size-max | 81.25rem | |
$layout-container-size-max-px | 1300px | |
$layout-container-size-max-raw | 1300 |
Movement
Token | Value | |
---|---|---|
$move-ease-linear | linear | |
$move-ease-both-sharp | cubic-bezier(0.77, 0, 0.18, 1) | |
$move-ease-both-agile | cubic-bezier(0.65, 0.05, 0.36, 1) | |
$move-ease-both-natural | cubic-bezier(0.46, 0.03, 0.52, 0.96) | |
$move-ease-out-sharp | cubic-bezier(0.17, 0.84, 0.44, 1) | |
$move-ease-out-agile | cubic-bezier(0.22, 0.61, 0.36, 1) | |
$move-ease-out-natural | cubic-bezier(0.25, 0.46, 0.45, 0.94) | |
$move-ease-in-sharp | cubic-bezier(0.9, 0.03, 0.69, 0.22) | |
$move-ease-in-agile | cubic-bezier(0.55, 0.06, 0.68, 0.19) | |
$move-ease-in-natural | cubic-bezier(0.55, 0.08, 0.68, 0.53) | |
$move-delay-slower | 0.40s | |
$move-delay-slow | 0.20s | |
$move-delay-normal | 0.10s | |
$move-delay-fast | 0.05s | |
$move-delay-faster | 0.03s | |
$move-delay-none | 0.00s | |
$move-duration-long | 1.55s | |
$move-duration-slower | 0.97s | |
$move-duration-slow | 0.57s | |
$move-duration-natural | 0.36s | |
$move-duration-fast | 0.22s | |
$move-duration-faster | 0.14s | |
$move-duration-instant | 0.00s |
Opacity
Token | Value | |
---|---|---|
$opacity-full | 1 | |
$opacity-strong | 0.8 | |
$opacity-medium | 0.5 | |
$opacity-subtle | 0.25 | |
$opacity-none | 0 |
Angle
Token | Value | |
---|---|---|
$angle-positive-full | 360deg | |
$angle-positive-half | 180deg | |
$angle-positive-quarter | 90deg | |
$angle-negative-full | -360deg | |
$angle-negative-half | -180deg | |
$angle-negative-quarter | -90deg | |
$angle-none | 0deg |
Responsive
Token | Value | Example |
---|---|---|
$mq-xsm | 30rem | @media (max-width: 30rem) |
$mq-xsm-px | 480px | |
$mq-xsm-raw | 480 | |
$mq-sm | 48rem | @media (max-width: 48rem) |
$mq-sm-px | 768px | |
$mq-sm-raw | 768 | |
$mq-md | 62rem | @media (max-width: 62rem) |
$mq-md-px | 992px | |
$mq-md-raw | 992 |