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

#292a2e

$color-palette-gray-warm-70-rgb

41, 42, 46

$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-family-main

'NeueHaasUnica'

Kisi

$font-family-code

monospace

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-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-none

0rem

$space-none-px

0px

$space-none-raw

0

Size

Token

Value

Example

$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

Layout

Token

Value

$layout-grid-track-amount

12

$layout-grid-track-size-max

5.625rem

$layout-grid-track-size-max-px

90px

$layout-grid-track-size-max-raw

90

$layout-container-size-max

81.25rem

$layout-container-size-max-px

1300px

$layout-container-size-max-raw

1300

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

About Laika Design System

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.