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

Kisi Inc.

45 Main Street

11201 Brooklyn

USA

Kisi wordmark

Laika is Kisi’s design system for getkisi.com. Together with the new visual language of Kisi, this system activates the first milestone of the new brand together with working code, design tools and guidelines for getkisi.com.