Siirry sisältöön
Kela Design System KDS

17.0.0

Perusmuuttujat

Design-muuttujat yhtenäisen ulkoasun toteutukseen.

Muuttujat

-kuvakkeella merkityt muuttujat ovat poistumassa käytöstä, eikä niiden käyttöä enää suositella.

Border radius

SassJSCSSArvo
$border-radius-smBORDER_RADIUS_SMvar(--kds-t-border-radius-sm)0.25rem
$border-radius-mdBORDER_RADIUS_MDvar(--kds-t-border-radius-md)0.5rem
$border-radius-lgBORDER_RADIUS_LGvar(--kds-t-border-radius-lg)1rem
$border-radius-xlBORDER_RADIUS_XLvar(--kds-t-border-radius-xl)1.5rem
$border-radius-pillBORDER_RADIUS_PILLvar(--kds-t-border-radius-pill)10rem
$border-radius-circleBORDER_RADIUS_CIRCLEvar(--kds-t-border-radius-circle)50%

Border width

TilaSassJSCSSArvo
$border-width-smallBORDER_WIDTH_SMALLvar(--kds-t-border-width-small)1px
$border-width-mediumBORDER_WIDTH_MEDIUMvar(--kds-t-border-width-medium)2px
$border-width-largeBORDER_WIDTH_LARGEvar(--kds-t-border-width-large)4px
$border-width-smBORDER_WIDTH_SMvar(--kds-t-border-width-sm)1px
$border-width-mdBORDER_WIDTH_MDvar(--kds-t-border-width-md)2px
$border-width-lgBORDER_WIDTH_LGvar(--kds-t-border-width-lg)4px

Box shadow

TilaSassJSCSSArvo
$box-shadow-smallBOX_SHADOW_SMALLvar(--kds-t-box-shadow-small)0 2px 4px rgba(0,0,0,0.15)
$box-shadow-mediumBOX_SHADOW_MEDIUMvar(--kds-t-box-shadow-medium)0 4px 8px rgba(0,0,0,0.15)
$box-shadow-largeBOX_SHADOW_LARGEvar(--kds-t-box-shadow-large)0 8px 16px rgba(0,0,0,0.15)
$box-shadow-smBOX_SHADOW_SMvar(--kds-t-box-shadow-sm)0 2px 4px rgba(0,0,0,0.15)
$box-shadow-mdBOX_SHADOW_MDvar(--kds-t-box-shadow-md)0 4px 8px rgba(0,0,0,0.15)
$box-shadow-lgBOX_SHADOW_LGvar(--kds-t-box-shadow-lg)0 8px 16px rgba(0,0,0,0.15)

Breakpoint

TilaSassJSCSSArvo
$breakpoint-baseBREAKPOINT_BASEvar(--kds-t-breakpoint-base)0
$breakpoint-height-smBREAKPOINT_HEIGHT_SMvar(--kds-t-breakpoint-height-sm)512
$breakpoint-xsBREAKPOINT_XSvar(--kds-t-breakpoint-xs)428
$breakpoint-smBREAKPOINT_SMvar(--kds-t-breakpoint-sm)576
$breakpoint-mdBREAKPOINT_MDvar(--kds-t-breakpoint-md)768
$breakpoint-lgBREAKPOINT_LGvar(--kds-t-breakpoint-lg)992
$breakpoint-xlBREAKPOINT_XLvar(--kds-t-breakpoint-xl)1200
$breakpoint-xxlBREAKPOINT_XXLvar(--kds-t-breakpoint-xxl)1400
$breakpoint-2xlBREAKPOINT_2XLvar(--kds-t-breakpoint-2xl)1400
$breakpoint-3xlBREAKPOINT_3XLvar(--kds-t-breakpoint-3xl)1600

Color

SassJSCSSArvo
$color-blackCOLOR_BLACKvar(--kds-t-color-black)#000000
$color-black-blackCOLOR_BLACK_BLACKvar(--kds-t-color-black-black)#000000
$color-black-softCOLOR_BLACK_SOFTvar(--kds-t-color-black-soft)#121212
$color-whiteCOLOR_WHITEvar(--kds-t-color-white)#ffffff
$color-white-whiteCOLOR_WHITE_WHITEvar(--kds-t-color-white-white)#ffffff
$color-white-softCOLOR_WHITE_SOFTvar(--kds-t-color-white-soft)#fafafa

Color (Kela)

SassJSCSSArvo
$color-kela-blue-10COLOR_KELA_BLUE_10var(--kds-t-color-kela-blue-10)#eef6ff
$color-kela-blue-20COLOR_KELA_BLUE_20var(--kds-t-color-kela-blue-20)#cfe3ff
$color-kela-blue-30COLOR_KELA_BLUE_30var(--kds-t-color-kela-blue-30)#97c4fc
$color-kela-blue-40COLOR_KELA_BLUE_40var(--kds-t-color-kela-blue-40)#68a2f6
$color-kela-blue-50COLOR_KELA_BLUE_50var(--kds-t-color-kela-blue-50)#3b81de
$color-kela-blue-60COLOR_KELA_BLUE_60var(--kds-t-color-kela-blue-60)#2a69c5
$color-kela-blue-70COLOR_KELA_BLUE_70var(--kds-t-color-kela-blue-70)#1652a6
$color-kela-blue-80COLOR_KELA_BLUE_80var(--kds-t-color-kela-blue-80)#003580
$color-kela-blue-90COLOR_KELA_BLUE_90var(--kds-t-color-kela-blue-90)#00265f
$color-kela-blue-100COLOR_KELA_BLUE_100var(--kds-t-color-kela-blue-100)#00143b
$color-kela-danger-red-10COLOR_KELA_DANGER_RED_10var(--kds-t-color-kela-danger-red-10)#fef2f6
$color-kela-danger-red-20COLOR_KELA_DANGER_RED_20var(--kds-t-color-kela-danger-red-20)#fcd8e3
$color-kela-danger-red-30COLOR_KELA_DANGER_RED_30var(--kds-t-color-kela-danger-red-30)#f9aac6
$color-kela-danger-red-40COLOR_KELA_DANGER_RED_40var(--kds-t-color-kela-danger-red-40)#f677a1
$color-kela-danger-red-50COLOR_KELA_DANGER_RED_50var(--kds-t-color-kela-danger-red-50)#f1316d
$color-kela-danger-red-60COLOR_KELA_DANGER_RED_60var(--kds-t-color-kela-danger-red-60)#cf1a55
$color-kela-danger-red-70COLOR_KELA_DANGER_RED_70var(--kds-t-color-kela-danger-red-70)#ab0a2c
$color-kela-danger-red-80COLOR_KELA_DANGER_RED_80var(--kds-t-color-kela-danger-red-80)#77051b
$color-kela-danger-red-90COLOR_KELA_DANGER_RED_90var(--kds-t-color-kela-danger-red-90)#590312
$color-kela-danger-red-100COLOR_KELA_DANGER_RED_100var(--kds-t-color-kela-danger-red-100)#370103
$color-kela-gray-10COLOR_KELA_GRAY_10var(--kds-t-color-kela-gray-10)#f5f5f5
$color-kela-gray-20COLOR_KELA_GRAY_20var(--kds-t-color-kela-gray-20)#e1e1e1
$color-kela-gray-30COLOR_KELA_GRAY_30var(--kds-t-color-kela-gray-30)#c1c1c1
$color-kela-gray-40COLOR_KELA_GRAY_40var(--kds-t-color-kela-gray-40)#a0a0a0
$color-kela-gray-50COLOR_KELA_GRAY_50var(--kds-t-color-kela-gray-50)#818181
$color-kela-gray-60COLOR_KELA_GRAY_60var(--kds-t-color-kela-gray-60)#6b6b6b
$color-kela-gray-70COLOR_KELA_GRAY_70var(--kds-t-color-kela-gray-70)#555555
$color-kela-gray-80COLOR_KELA_GRAY_80var(--kds-t-color-kela-gray-80)#393939
$color-kela-gray-90COLOR_KELA_GRAY_90var(--kds-t-color-kela-gray-90)#292929
$color-kela-gray-100COLOR_KELA_GRAY_100var(--kds-t-color-kela-gray-100)#171717
$color-kela-purple-10COLOR_KELA_PURPLE_10var(--kds-t-color-kela-purple-10)#f7f4f8
$color-kela-purple-20COLOR_KELA_PURPLE_20var(--kds-t-color-kela-purple-20)#e7deec
$color-kela-purple-30COLOR_KELA_PURPLE_30var(--kds-t-color-kela-purple-30)#cfbad8
$color-kela-purple-40COLOR_KELA_PURPLE_40var(--kds-t-color-kela-purple-40)#b595c4
$color-kela-purple-50COLOR_KELA_PURPLE_50var(--kds-t-color-kela-purple-50)#9c71b0
$color-kela-purple-60COLOR_KELA_PURPLE_60var(--kds-t-color-kela-purple-60)#87599d
$color-kela-purple-70COLOR_KELA_PURPLE_70var(--kds-t-color-kela-purple-70)#783896
$color-kela-purple-80COLOR_KELA_PURPLE_80var(--kds-t-color-kela-purple-80)#561e70
$color-kela-purple-90COLOR_KELA_PURPLE_90var(--kds-t-color-kela-purple-90)#3f1453
$color-kela-purple-100COLOR_KELA_PURPLE_100var(--kds-t-color-kela-purple-100)#260933
$color-kela-success-green-10COLOR_KELA_SUCCESS_GREEN_10var(--kds-t-color-kela-success-green-10)#e7faee
$color-kela-success-green-20COLOR_KELA_SUCCESS_GREEN_20var(--kds-t-color-kela-success-green-20)#bbedcd
$color-kela-success-green-30COLOR_KELA_SUCCESS_GREEN_30var(--kds-t-color-kela-success-green-30)#7fd29e
$color-kela-success-green-40COLOR_KELA_SUCCESS_GREEN_40var(--kds-t-color-kela-success-green-40)#44b56c
$color-kela-success-green-50COLOR_KELA_SUCCESS_GREEN_50var(--kds-t-color-kela-success-green-50)#09953b
$color-kela-success-green-60COLOR_KELA_SUCCESS_GREEN_60var(--kds-t-color-kela-success-green-60)#067c30
$color-kela-success-green-70COLOR_KELA_SUCCESS_GREEN_70var(--kds-t-color-kela-success-green-70)#046324
$color-kela-success-green-80COLOR_KELA_SUCCESS_GREEN_80var(--kds-t-color-kela-success-green-80)#024316
$color-kela-success-green-90COLOR_KELA_SUCCESS_GREEN_90var(--kds-t-color-kela-success-green-90)#01310e
$color-kela-success-green-100COLOR_KELA_SUCCESS_GREEN_100var(--kds-t-color-kela-success-green-100)#001c05
$color-kela-turquoise-10COLOR_KELA_TURQUOISE_10var(--kds-t-color-kela-turquoise-10)#f0f6f7
$color-kela-turquoise-20COLOR_KELA_TURQUOISE_20var(--kds-t-color-kela-turquoise-20)#d1e5e8
$color-kela-turquoise-30COLOR_KELA_TURQUOISE_30var(--kds-t-color-kela-turquoise-30)#99c9d2
$color-kela-turquoise-40COLOR_KELA_TURQUOISE_40var(--kds-t-color-kela-turquoise-40)#65a2ae
$color-kela-turquoise-50COLOR_KELA_TURQUOISE_50var(--kds-t-color-kela-turquoise-50)#3c8c9b
$color-kela-turquoise-60COLOR_KELA_TURQUOISE_60var(--kds-t-color-kela-turquoise-60)#00758b
$color-kela-turquoise-70COLOR_KELA_TURQUOISE_70var(--kds-t-color-kela-turquoise-70)#005d6f
$color-kela-turquoise-80COLOR_KELA_TURQUOISE_80var(--kds-t-color-kela-turquoise-80)#003f4c
$color-kela-turquoise-90COLOR_KELA_TURQUOISE_90var(--kds-t-color-kela-turquoise-90)#002e38
$color-kela-turquoise-100COLOR_KELA_TURQUOISE_100var(--kds-t-color-kela-turquoise-100)#001a20
$color-kela-warning-yellow-10COLOR_KELA_WARNING_YELLOW_10var(--kds-t-color-kela-warning-yellow-10)#fff4dc
$color-kela-warning-yellow-20COLOR_KELA_WARNING_YELLOW_20var(--kds-t-color-kela-warning-yellow-20)#fedd9f
$color-kela-warning-yellow-30COLOR_KELA_WARNING_YELLOW_30var(--kds-t-color-kela-warning-yellow-30)#f8b516
$color-kela-warning-yellow-40COLOR_KELA_WARNING_YELLOW_40var(--kds-t-color-kela-warning-yellow-40)#cf9710
$color-kela-warning-yellow-50COLOR_KELA_WARNING_YELLOW_50var(--kds-t-color-kela-warning-yellow-50)#a7790b
$color-kela-warning-yellow-60COLOR_KELA_WARNING_YELLOW_60var(--kds-t-color-kela-warning-yellow-60)#8b6407
$color-kela-warning-yellow-70COLOR_KELA_WARNING_YELLOW_70var(--kds-t-color-kela-warning-yellow-70)#6f4f04
$color-kela-warning-yellow-80COLOR_KELA_WARNING_YELLOW_80var(--kds-t-color-kela-warning-yellow-80)#4c3502
$color-kela-warning-yellow-90COLOR_KELA_WARNING_YELLOW_90var(--kds-t-color-kela-warning-yellow-90)#372601
$color-kela-warning-yellow-100COLOR_KELA_WARNING_YELLOW_100var(--kds-t-color-kela-warning-yellow-100)#201400
$color-kela-yellow-10COLOR_KELA_YELLOW_10var(--kds-t-color-kela-yellow-10)#fff4d5
$color-kela-yellow-20COLOR_KELA_YELLOW_20var(--kds-t-color-kela-yellow-20)#ffdf74
$color-kela-yellow-30COLOR_KELA_YELLOW_30var(--kds-t-color-kela-yellow-30)#f8b516
$color-kela-yellow-40COLOR_KELA_YELLOW_40var(--kds-t-color-kela-yellow-40)#cf9710
$color-kela-yellow-50COLOR_KELA_YELLOW_50var(--kds-t-color-kela-yellow-50)#a7790b
$color-kela-yellow-60COLOR_KELA_YELLOW_60var(--kds-t-color-kela-yellow-60)#8b6407
$color-kela-yellow-70COLOR_KELA_YELLOW_70var(--kds-t-color-kela-yellow-70)#6f4f04
$color-kela-yellow-80COLOR_KELA_YELLOW_80var(--kds-t-color-kela-yellow-80)#4c3502
$color-kela-yellow-90COLOR_KELA_YELLOW_90var(--kds-t-color-kela-yellow-90)#372601
$color-kela-yellow-100COLOR_KELA_YELLOW_100var(--kds-t-color-kela-yellow-100)#201400

Color (Kanta)

SassJSCSSArvo
$color-kanta-blue-10COLOR_KANTA_BLUE_10var(--kds-t-color-kanta-blue-10)#edf7f9
$color-kanta-blue-20COLOR_KANTA_BLUE_20var(--kds-t-color-kanta-blue-20)#bee8f4
$color-kanta-blue-30COLOR_KANTA_BLUE_30var(--kds-t-color-kanta-blue-30)#6fcee2
$color-kanta-blue-40COLOR_KANTA_BLUE_40var(--kds-t-color-kanta-blue-40)#35aec8
$color-kanta-blue-50COLOR_KANTA_BLUE_50var(--kds-t-color-kanta-blue-50)#008dab
$color-kanta-blue-60COLOR_KANTA_BLUE_60var(--kds-t-color-kanta-blue-60)#007496
$color-kanta-blue-70COLOR_KANTA_BLUE_70var(--kds-t-color-kanta-blue-70)#005c7b
$color-kanta-blue-80COLOR_KANTA_BLUE_80var(--kds-t-color-kanta-blue-80)#003e54
$color-kanta-blue-90COLOR_KANTA_BLUE_90var(--kds-t-color-kanta-blue-90)#002c3f
$color-kanta-blue-100COLOR_KANTA_BLUE_100var(--kds-t-color-kanta-blue-100)#001924
$color-kanta-danger-red-10COLOR_KANTA_DANGER_RED_10var(--kds-t-color-kanta-danger-red-10)#fff2f1
$color-kanta-danger-red-20COLOR_KANTA_DANGER_RED_20var(--kds-t-color-kanta-danger-red-20)#fed8d9
$color-kanta-danger-red-30COLOR_KANTA_DANGER_RED_30var(--kds-t-color-kanta-danger-red-30)#feaca4
$color-kanta-danger-red-40COLOR_KANTA_DANGER_RED_40var(--kds-t-color-kanta-danger-red-40)#fc7868
$color-kanta-danger-red-50COLOR_KANTA_DANGER_RED_50var(--kds-t-color-kanta-danger-red-50)#f23640
$color-kanta-danger-red-60COLOR_KANTA_DANGER_RED_60var(--kds-t-color-kanta-danger-red-60)#d60929
$color-kanta-danger-red-70COLOR_KANTA_DANGER_RED_70var(--kds-t-color-kanta-danger-red-70)#ad031e
$color-kanta-danger-red-80COLOR_KANTA_DANGER_RED_80var(--kds-t-color-kanta-danger-red-80)#790112
$color-kanta-danger-red-90COLOR_KANTA_DANGER_RED_90var(--kds-t-color-kanta-danger-red-90)#5a010a
$color-kanta-danger-red-100COLOR_KANTA_DANGER_RED_100var(--kds-t-color-kanta-danger-red-100)#370004
$color-kanta-gray-10COLOR_KANTA_GRAY_10var(--kds-t-color-kanta-gray-10)#f5f5f5
$color-kanta-gray-20COLOR_KANTA_GRAY_20var(--kds-t-color-kanta-gray-20)#e1e1e1
$color-kanta-gray-30COLOR_KANTA_GRAY_30var(--kds-t-color-kanta-gray-30)#c1c1c1
$color-kanta-gray-40COLOR_KANTA_GRAY_40var(--kds-t-color-kanta-gray-40)#a0a0a0
$color-kanta-gray-50COLOR_KANTA_GRAY_50var(--kds-t-color-kanta-gray-50)#818181
$color-kanta-gray-60COLOR_KANTA_GRAY_60var(--kds-t-color-kanta-gray-60)#6b6b6b
$color-kanta-gray-70COLOR_KANTA_GRAY_70var(--kds-t-color-kanta-gray-70)#555555
$color-kanta-gray-80COLOR_KANTA_GRAY_80var(--kds-t-color-kanta-gray-80)#393939
$color-kanta-gray-90COLOR_KANTA_GRAY_90var(--kds-t-color-kanta-gray-90)#292929
$color-kanta-gray-100COLOR_KANTA_GRAY_100var(--kds-t-color-kanta-gray-100)#171717
$color-kanta-green-10COLOR_KANTA_GREEN_10var(--kds-t-color-kanta-green-10)#edf9df
$color-kanta-green-20COLOR_KANTA_GREEN_20var(--kds-t-color-kanta-green-20)#c5e994
$color-kanta-green-30COLOR_KANTA_GREEN_30var(--kds-t-color-kanta-green-30)#9fd063
$color-kanta-green-40COLOR_KANTA_GREEN_40var(--kds-t-color-kanta-green-40)#78b02b
$color-kanta-green-50COLOR_KANTA_GREEN_50var(--kds-t-color-kanta-green-50)#589000
$color-kanta-green-60COLOR_KANTA_GREEN_60var(--kds-t-color-kanta-green-60)#437800
$color-kanta-green-70COLOR_KANTA_GREEN_70var(--kds-t-color-kanta-green-70)#306000
$color-kanta-green-80COLOR_KANTA_GREEN_80var(--kds-t-color-kanta-green-80)#1b4200
$color-kanta-green-90COLOR_KANTA_GREEN_90var(--kds-t-color-kanta-green-90)#0e3000
$color-kanta-green-100COLOR_KANTA_GREEN_100var(--kds-t-color-kanta-green-100)#051b00
$color-kanta-lilac-10COLOR_KANTA_LILAC_10var(--kds-t-color-kanta-lilac-10)#f6f5fa
$color-kanta-lilac-20COLOR_KANTA_LILAC_20var(--kds-t-color-kanta-lilac-20)#e3e0f2
$color-kanta-lilac-30COLOR_KANTA_LILAC_30var(--kds-t-color-kanta-lilac-30)#c2bce3
$color-kanta-lilac-40COLOR_KANTA_LILAC_40var(--kds-t-color-kanta-lilac-40)#a399d5
$color-kanta-lilac-50COLOR_KANTA_LILAC_50var(--kds-t-color-kanta-lilac-50)#8576c5
$color-kanta-lilac-60COLOR_KANTA_LILAC_60var(--kds-t-color-kanta-lilac-60)#6c5dbb
$color-kanta-lilac-70COLOR_KANTA_LILAC_70var(--kds-t-color-kanta-lilac-70)#5645a8
$color-kanta-lilac-80COLOR_KANTA_LILAC_80var(--kds-t-color-kanta-lilac-80)#3a2e75
$color-kanta-lilac-90COLOR_KANTA_LILAC_90var(--kds-t-color-kanta-lilac-90)#292057
$color-kanta-lilac-100COLOR_KANTA_LILAC_100var(--kds-t-color-kanta-lilac-100)#171135
$color-kanta-magenta-10COLOR_KANTA_MAGENTA_10var(--kds-t-color-kanta-magenta-10)#fff1f8
$color-kanta-magenta-20COLOR_KANTA_MAGENTA_20var(--kds-t-color-kanta-magenta-20)#ffd7e2
$color-kanta-magenta-30COLOR_KANTA_MAGENTA_30var(--kds-t-color-kanta-magenta-30)#fea9c0
$color-kanta-magenta-40COLOR_KANTA_MAGENTA_40var(--kds-t-color-kanta-magenta-40)#fd7299
$color-kanta-magenta-50COLOR_KANTA_MAGENTA_50var(--kds-t-color-kanta-magenta-50)#e93c7a
$color-kanta-magenta-60COLOR_KANTA_MAGENTA_60var(--kds-t-color-kanta-magenta-60)#cf1661
$color-kanta-magenta-70COLOR_KANTA_MAGENTA_70var(--kds-t-color-kanta-magenta-70)#aa004a
$color-kanta-magenta-80COLOR_KANTA_MAGENTA_80var(--kds-t-color-kanta-magenta-80)#750335
$color-kanta-magenta-90COLOR_KANTA_MAGENTA_90var(--kds-t-color-kanta-magenta-90)#57002c
$color-kanta-magenta-100COLOR_KANTA_MAGENTA_100var(--kds-t-color-kanta-magenta-100)#350019
$color-kanta-success-green-10COLOR_KANTA_SUCCESS_GREEN_10var(--kds-t-color-kanta-success-green-10)#edf9df
$color-kanta-success-green-20COLOR_KANTA_SUCCESS_GREEN_20var(--kds-t-color-kanta-success-green-20)#c5e994
$color-kanta-success-green-30COLOR_KANTA_SUCCESS_GREEN_30var(--kds-t-color-kanta-success-green-30)#9fd063
$color-kanta-success-green-40COLOR_KANTA_SUCCESS_GREEN_40var(--kds-t-color-kanta-success-green-40)#78b02b
$color-kanta-success-green-50COLOR_KANTA_SUCCESS_GREEN_50var(--kds-t-color-kanta-success-green-50)#589000
$color-kanta-success-green-60COLOR_KANTA_SUCCESS_GREEN_60var(--kds-t-color-kanta-success-green-60)#437800
$color-kanta-success-green-70COLOR_KANTA_SUCCESS_GREEN_70var(--kds-t-color-kanta-success-green-70)#306000
$color-kanta-success-green-80COLOR_KANTA_SUCCESS_GREEN_80var(--kds-t-color-kanta-success-green-80)#1b4200
$color-kanta-success-green-90COLOR_KANTA_SUCCESS_GREEN_90var(--kds-t-color-kanta-success-green-90)#0e3000
$color-kanta-success-green-100COLOR_KANTA_SUCCESS_GREEN_100var(--kds-t-color-kanta-success-green-100)#051b00
$color-kanta-warning-yellow-10COLOR_KANTA_WARNING_YELLOW_10var(--kds-t-color-kanta-warning-yellow-10)#fff6cb
$color-kanta-warning-yellow-20COLOR_KANTA_WARNING_YELLOW_20var(--kds-t-color-kanta-warning-yellow-20)#ffdf69
$color-kanta-warning-yellow-30COLOR_KANTA_WARNING_YELLOW_30var(--kds-t-color-kanta-warning-yellow-30)#eeba00
$color-kanta-warning-yellow-40COLOR_KANTA_WARNING_YELLOW_40var(--kds-t-color-kanta-warning-yellow-40)#c79a00
$color-kanta-warning-yellow-50COLOR_KANTA_WARNING_YELLOW_50var(--kds-t-color-kanta-warning-yellow-50)#a17c00
$color-kanta-warning-yellow-60COLOR_KANTA_WARNING_YELLOW_60var(--kds-t-color-kanta-warning-yellow-60)#866700
$color-kanta-warning-yellow-70COLOR_KANTA_WARNING_YELLOW_70var(--kds-t-color-kanta-warning-yellow-70)#6a5100
$color-kanta-warning-yellow-80COLOR_KANTA_WARNING_YELLOW_80var(--kds-t-color-kanta-warning-yellow-80)#493700
$color-kanta-warning-yellow-90COLOR_KANTA_WARNING_YELLOW_90var(--kds-t-color-kanta-warning-yellow-90)#352700
$color-kanta-warning-yellow-100COLOR_KANTA_WARNING_YELLOW_100var(--kds-t-color-kanta-warning-yellow-100)#1f1500

Container

SassJSCSSArvo
$container-width-smCONTAINER_WIDTH_SMvar(--kds-t-container-width-sm)544px
$container-width-mdCONTAINER_WIDTH_MDvar(--kds-t-container-width-md)720px
$container-width-lgCONTAINER_WIDTH_LGvar(--kds-t-container-width-lg)960px
$container-width-xlCONTAINER_WIDTH_XLvar(--kds-t-container-width-xl)1152px
$container-width-2xlCONTAINER_WIDTH_2XLvar(--kds-t-container-width-2xl)1328px
$container-width-3xlCONTAINER_WIDTH_3XLvar(--kds-t-container-width-3xl)1536px
$container-width-relative-smCONTAINER_WIDTH_RELATIVE_SMvar(--kds-t-container-width-relative-sm)34rem
$container-width-relative-mdCONTAINER_WIDTH_RELATIVE_MDvar(--kds-t-container-width-relative-md)45rem
$container-width-relative-lgCONTAINER_WIDTH_RELATIVE_LGvar(--kds-t-container-width-relative-lg)60rem
$container-width-relative-xlCONTAINER_WIDTH_RELATIVE_XLvar(--kds-t-container-width-relative-xl)72rem
$container-width-relative-2xlCONTAINER_WIDTH_RELATIVE_2XLvar(--kds-t-container-width-relative-2xl)83rem
$container-width-relative-3xlCONTAINER_WIDTH_RELATIVE_3XLvar(--kds-t-container-width-relative-3xl)96rem

Drop shadow

SassJSCSSArvo
$drop-shadow-sm-offset-xDROP_SHADOW_SM_OFFSET_Xvar(--kds-t-drop-shadow-sm-offset-x)0
$drop-shadow-sm-offset-yDROP_SHADOW_SM_OFFSET_Yvar(--kds-t-drop-shadow-sm-offset-y)2px
$drop-shadow-sm-blurDROP_SHADOW_SM_BLURvar(--kds-t-drop-shadow-sm-blur)4px
$drop-shadow-sm-spreadDROP_SHADOW_SM_SPREADvar(--kds-t-drop-shadow-sm-spread)0
$drop-shadow-sm-colorDROP_SHADOW_SM_COLORvar(--kds-t-drop-shadow-sm-color)rgba(0, 0, 0, 0.15)
$drop-shadow-md-offset-xDROP_SHADOW_MD_OFFSET_Xvar(--kds-t-drop-shadow-md-offset-x)0
$drop-shadow-md-offset-yDROP_SHADOW_MD_OFFSET_Yvar(--kds-t-drop-shadow-md-offset-y)4px
$drop-shadow-md-blurDROP_SHADOW_MD_BLURvar(--kds-t-drop-shadow-md-blur)8px
$drop-shadow-md-spreadDROP_SHADOW_MD_SPREADvar(--kds-t-drop-shadow-md-spread)0
$drop-shadow-md-colorDROP_SHADOW_MD_COLORvar(--kds-t-drop-shadow-md-color)rgba(0, 0, 0, 0.15)
$drop-shadow-lg-offset-xDROP_SHADOW_LG_OFFSET_Xvar(--kds-t-drop-shadow-lg-offset-x)0
$drop-shadow-lg-offset-yDROP_SHADOW_LG_OFFSET_Yvar(--kds-t-drop-shadow-lg-offset-y)8px
$drop-shadow-lg-blurDROP_SHADOW_LG_BLURvar(--kds-t-drop-shadow-lg-blur)16px
$drop-shadow-lg-spreadDROP_SHADOW_LG_SPREADvar(--kds-t-drop-shadow-lg-spread)0
$drop-shadow-lg-colorDROP_SHADOW_LG_COLORvar(--kds-t-drop-shadow-lg-color)rgba(0, 0, 0, 0.15)

Duration

TilaSassJSCSSArvo
$duration-small-defaultDURATION_SMALL_DEFAULTvar(--kds-t-duration-small-default)75
$duration-small-enterDURATION_SMALL_ENTERvar(--kds-t-duration-small-enter)125
$duration-small-exitDURATION_SMALL_EXITvar(--kds-t-duration-small-exit)50
$duration-medium-defaultDURATION_MEDIUM_DEFAULTvar(--kds-t-duration-medium-default)150
$duration-medium-enterDURATION_MEDIUM_ENTERvar(--kds-t-duration-medium-enter)200
$duration-medium-exitDURATION_MEDIUM_EXITvar(--kds-t-duration-medium-exit)125
$duration-large-defaultDURATION_LARGE_DEFAULTvar(--kds-t-duration-large-default)200
$duration-large-enterDURATION_LARGE_ENTERvar(--kds-t-duration-large-enter)250
$duration-large-exitDURATION_LARGE_EXITvar(--kds-t-duration-large-exit)175
$duration-sm-defaultDURATION_SM_DEFAULTvar(--kds-t-duration-sm-default)75
$duration-sm-enterDURATION_SM_ENTERvar(--kds-t-duration-sm-enter)125
$duration-sm-exitDURATION_SM_EXITvar(--kds-t-duration-sm-exit)50
$duration-md-defaultDURATION_MD_DEFAULTvar(--kds-t-duration-md-default)150
$duration-md-enterDURATION_MD_ENTERvar(--kds-t-duration-md-enter)200
$duration-md-exitDURATION_MD_EXITvar(--kds-t-duration-md-exit)125
$duration-lg-defaultDURATION_LG_DEFAULTvar(--kds-t-duration-lg-default)200
$duration-lg-enterDURATION_LG_ENTERvar(--kds-t-duration-lg-enter)250
$duration-lg-exitDURATION_LG_EXITvar(--kds-t-duration-lg-exit)175

Easing

SassJSCSSArvo
$easing-defaultEASING_DEFAULTvar(--kds-t-easing-default)cubic-bezier(0.4, 0.0, 0.2, 1)
$easing-decelerateEASING_DECELERATEvar(--kds-t-easing-decelerate)cubic-bezier(0.0, 0.0, 0.2, 1)
$easing-accelerateEASING_ACCELERATEvar(--kds-t-easing-accelerate)cubic-bezier(0.4, 0.0, 1, 1)

Focus

TilaSassJSCSSArvo
$focus-offsetFOCUS_OFFSETvar(--kds-t-focus-offset)2px
$focus-widthFOCUS_WIDTHvar(--kds-t-focus-width)3px
$focus-color-darkFOCUS_COLOR_DARKvar(--kds-t-focus-color-dark)#393939
$focus-color-lightFOCUS_COLOR_LIGHTvar(--kds-t-focus-color-light)#ffffff
$focus-ring-outline-styleFOCUS_RING_OUTLINE_STYLEvar(--kds-t-focus-ring-outline-style)solid
$focus-ring-outline-widthFOCUS_RING_OUTLINE_WIDTHvar(--kds-t-focus-ring-outline-width)3px
$focus-ring-offset-darkFOCUS_RING_OFFSET_DARKvar(--kds-t-focus-ring-offset-dark)0 0 0 2px #ffffff, 0 0 0.1px 5px #393939
$focus-ring-offset-dark-inner-offset-xFOCUS_RING_OFFSET_DARK_INNER_OFFSET_Xvar(--kds-t-focus-ring-offset-dark-inner-offset-x)0
$focus-ring-offset-dark-inner-offset-yFOCUS_RING_OFFSET_DARK_INNER_OFFSET_Yvar(--kds-t-focus-ring-offset-dark-inner-offset-y)0
$focus-ring-offset-dark-inner-blurFOCUS_RING_OFFSET_DARK_INNER_BLURvar(--kds-t-focus-ring-offset-dark-inner-blur)0
$focus-ring-offset-dark-inner-spreadFOCUS_RING_OFFSET_DARK_INNER_SPREADvar(--kds-t-focus-ring-offset-dark-inner-spread)2px
$focus-ring-offset-dark-outer-offset-xFOCUS_RING_OFFSET_DARK_OUTER_OFFSET_Xvar(--kds-t-focus-ring-offset-dark-outer-offset-x)0
$focus-ring-offset-dark-outer-offset-yFOCUS_RING_OFFSET_DARK_OUTER_OFFSET_Yvar(--kds-t-focus-ring-offset-dark-outer-offset-y)0
$focus-ring-offset-dark-outer-blurFOCUS_RING_OFFSET_DARK_OUTER_BLURvar(--kds-t-focus-ring-offset-dark-outer-blur)0.1px
$focus-ring-offset-dark-outer-spreadFOCUS_RING_OFFSET_DARK_OUTER_SPREADvar(--kds-t-focus-ring-offset-dark-outer-spread)5px
$focus-ring-offset-lightFOCUS_RING_OFFSET_LIGHTvar(--kds-t-focus-ring-offset-light)0 0 0 2px #393939, 0 0 0 5px #ffffff
$focus-ring-offset-light-inner-offset-xFOCUS_RING_OFFSET_LIGHT_INNER_OFFSET_Xvar(--kds-t-focus-ring-offset-light-inner-offset-x)0
$focus-ring-offset-light-inner-offset-yFOCUS_RING_OFFSET_LIGHT_INNER_OFFSET_Yvar(--kds-t-focus-ring-offset-light-inner-offset-y)0
$focus-ring-offset-light-inner-blurFOCUS_RING_OFFSET_LIGHT_INNER_BLURvar(--kds-t-focus-ring-offset-light-inner-blur)0
$focus-ring-offset-light-inner-spreadFOCUS_RING_OFFSET_LIGHT_INNER_SPREADvar(--kds-t-focus-ring-offset-light-inner-spread)2px
$focus-ring-offset-light-outer-offset-xFOCUS_RING_OFFSET_LIGHT_OUTER_OFFSET_Xvar(--kds-t-focus-ring-offset-light-outer-offset-x)0
$focus-ring-offset-light-outer-offset-yFOCUS_RING_OFFSET_LIGHT_OUTER_OFFSET_Yvar(--kds-t-focus-ring-offset-light-outer-offset-y)0
$focus-ring-offset-light-outer-blurFOCUS_RING_OFFSET_LIGHT_OUTER_BLURvar(--kds-t-focus-ring-offset-light-outer-blur)0
$focus-ring-offset-light-outer-spreadFOCUS_RING_OFFSET_LIGHT_OUTER_SPREADvar(--kds-t-focus-ring-offset-light-outer-spread)5px
$focus-ring-inset-darkFOCUS_RING_INSET_DARKvar(--kds-t-focus-ring-inset-dark)inset 0 0 0 3px #393939
$focus-ring-inset-dark-offset-xFOCUS_RING_INSET_DARK_OFFSET_Xvar(--kds-t-focus-ring-inset-dark-offset-x)0
$focus-ring-inset-dark-offset-yFOCUS_RING_INSET_DARK_OFFSET_Yvar(--kds-t-focus-ring-inset-dark-offset-y)0
$focus-ring-inset-dark-blurFOCUS_RING_INSET_DARK_BLURvar(--kds-t-focus-ring-inset-dark-blur)0
$focus-ring-inset-dark-spreadFOCUS_RING_INSET_DARK_SPREADvar(--kds-t-focus-ring-inset-dark-spread)3px
$focus-ring-inset-lightFOCUS_RING_INSET_LIGHTvar(--kds-t-focus-ring-inset-light)inset 0 0 0 3px #ffffff
$focus-ring-inset-light-offset-xFOCUS_RING_INSET_LIGHT_OFFSET_Xvar(--kds-t-focus-ring-inset-light-offset-x)0
$focus-ring-inset-light-offset-yFOCUS_RING_INSET_LIGHT_OFFSET_Yvar(--kds-t-focus-ring-inset-light-offset-y)0
$focus-ring-inset-light-blurFOCUS_RING_INSET_LIGHT_BLURvar(--kds-t-focus-ring-inset-light-blur)0
$focus-ring-inset-light-spreadFOCUS_RING_INSET_LIGHT_SPREADvar(--kds-t-focus-ring-inset-light-spread)3px

Font family

TilaSassJSCSSArvo
$font-family-sans-serifFONT_FAMILY_SANS_SERIFvar(--kds-t-font-family-sans-serif)Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI...
$font-family-sans-serif-altFONT_FAMILY_SANS_SERIF_ALTvar(--kds-t-font-family-sans-serif-alt)'Noto Sans', -apple-system, BlinkMacSystemFont, 'S...
$font-family-sans-serif-skolt-samiFONT_FAMILY_SANS_SERIF_SKOLT_SAMIvar(--kds-t-font-family-sans-serif-skolt-sami)'Fira Sans'
$font-family-monospaceFONT_FAMILY_MONOSPACEvar(--kds-t-font-family-monospace)SFMono-Regular, Menlo, Monaco, Consolas, 'Liberati...
$font-family-headingFONT_FAMILY_HEADINGvar(--kds-t-font-family-heading)'Noto Sans', -apple-system, BlinkMacSystemFont, 'S...
$font-family-bodyFONT_FAMILY_BODYvar(--kds-t-font-family-body)Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI...

Font family (Kela)

SassJSCSSArvo
$font-family-kela-sans-serifFONT_FAMILY_KELA_SANS_SERIFvar(--kds-t-font-family-kela-sans-serif)Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI...
$font-family-kela-sans-serif-altFONT_FAMILY_KELA_SANS_SERIF_ALTvar(--kds-t-font-family-kela-sans-serif-alt)'Noto Sans', -apple-system, BlinkMacSystemFont, 'S...
$font-family-kela-sans-serif-skolt-samiFONT_FAMILY_KELA_SANS_SERIF_SKOLT_SAMIvar(--kds-t-font-family-kela-sans-serif-skolt-sami)'Fira Sans'
$font-family-kela-monospaceFONT_FAMILY_KELA_MONOSPACEvar(--kds-t-font-family-kela-monospace)SFMono-Regular, Menlo, Monaco, Consolas, 'Liberati...
$font-family-kela-headingFONT_FAMILY_KELA_HEADINGvar(--kds-t-font-family-kela-heading)'Noto Sans', -apple-system, BlinkMacSystemFont, 'S...
$font-family-kela-bodyFONT_FAMILY_KELA_BODYvar(--kds-t-font-family-kela-body)Lato, -apple-system, BlinkMacSystemFont, 'Segoe UI...

Font family (Kanta)

SassJSCSSArvo
$font-family-kanta-sans-serifFONT_FAMILY_KANTA_SANS_SERIFvar(--kds-t-font-family-kanta-sans-serif)Montserrat, Arial, -apple-system, BlinkMacSystemFo...
$font-family-kanta-sans-serif-altFONT_FAMILY_KANTA_SANS_SERIF_ALTvar(--kds-t-font-family-kanta-sans-serif-alt)Nunito, Arial, -apple-system, BlinkMacSystemFont, ...
$font-family-kanta-monospaceFONT_FAMILY_KANTA_MONOSPACEvar(--kds-t-font-family-kanta-monospace)SFMono-Regular, Menlo, Monaco, Consolas, 'Liberati...
$font-family-kanta-headingFONT_FAMILY_KANTA_HEADINGvar(--kds-t-font-family-kanta-heading)Montserrat, Arial, -apple-system, BlinkMacSystemFo...
$font-family-kanta-bodyFONT_FAMILY_KANTA_BODYvar(--kds-t-font-family-kanta-body)Nunito, Arial, -apple-system, BlinkMacSystemFont, ...

Font size

SassJSCSSArvo
$font-size-smFONT_SIZE_SMvar(--kds-t-font-size-sm)0.875rem
$font-size-baseFONT_SIZE_BASEvar(--kds-t-font-size-base)1rem
$font-size-lgFONT_SIZE_LGvar(--kds-t-font-size-lg)1.125rem
$font-size-xlFONT_SIZE_XLvar(--kds-t-font-size-xl)1.1875rem
$font-size-2xlFONT_SIZE_2XLvar(--kds-t-font-size-2xl)1.375rem
$font-size-3xlFONT_SIZE_3XLvar(--kds-t-font-size-3xl)1.625rem
$font-size-4xlFONT_SIZE_4XLvar(--kds-t-font-size-4xl)1.875rem
$font-size-5xlFONT_SIZE_5XLvar(--kds-t-font-size-5xl)2.1875rem
$font-size-6xlFONT_SIZE_6XLvar(--kds-t-font-size-6xl)2.5625rem
$font-size-7xlFONT_SIZE_7XLvar(--kds-t-font-size-7xl)3rem
$font-size-8xlFONT_SIZE_8XLvar(--kds-t-font-size-8xl)3.5rem
$font-size-9xlFONT_SIZE_9XLvar(--kds-t-font-size-9xl)4.125rem

Font weight

SassJSCSSArvo
$font-weight-normalFONT_WEIGHT_NORMALvar(--kds-t-font-weight-normal)400
$font-weight-semiboldFONT_WEIGHT_SEMIBOLDvar(--kds-t-font-weight-semibold)600
$font-weight-boldFONT_WEIGHT_BOLDvar(--kds-t-font-weight-bold)700

Icon size

SassJSCSSArvo
$icon-size-relativeICON_SIZE_RELATIVEvar(--kds-t-icon-size-relative)1em
$icon-size-xxsICON_SIZE_XXSvar(--kds-t-icon-size-xxs)0.75rem
$icon-size-xsICON_SIZE_XSvar(--kds-t-icon-size-xs)1rem
$icon-size-smICON_SIZE_SMvar(--kds-t-icon-size-sm)1.5rem
$icon-size-mdICON_SIZE_MDvar(--kds-t-icon-size-md)2rem
$icon-size-lgICON_SIZE_LGvar(--kds-t-icon-size-lg)3rem
$icon-size-xlICON_SIZE_XLvar(--kds-t-icon-size-xl)4rem
$icon-size-xxlICON_SIZE_XXLvar(--kds-t-icon-size-xxl)5rem

Icon stroke

SassJSCSSArvo
$icon-stroke-width-xxsICON_STROKE_WIDTH_XXSvar(--kds-t-icon-stroke-width-xxs)2.1
$icon-stroke-width-xsICON_STROKE_WIDTH_XSvar(--kds-t-icon-stroke-width-xs)2
$icon-stroke-width-smICON_STROKE_WIDTH_SMvar(--kds-t-icon-stroke-width-sm)1.8
$icon-stroke-width-mdICON_STROKE_WIDTH_MDvar(--kds-t-icon-stroke-width-md)1.4
$icon-stroke-width-lgICON_STROKE_WIDTH_LGvar(--kds-t-icon-stroke-width-lg)1.2
$icon-stroke-width-xlICON_STROKE_WIDTH_XLvar(--kds-t-icon-stroke-width-xl)0.8
$icon-stroke-width-xxlICON_STROKE_WIDTH_XXLvar(--kds-t-icon-stroke-width-xxl)0.7

Letter spacing

SassJSCSSArvo
$letter-spacing-smLETTER_SPACING_SMvar(--kds-t-letter-spacing-sm)-0.02em
$letter-spacing-mdLETTER_SPACING_MDvar(--kds-t-letter-spacing-md)0
$letter-spacing-lgLETTER_SPACING_LGvar(--kds-t-letter-spacing-lg)0.02em

Line height

SassJSCSSArvo
$line-height-resetLINE_HEIGHT_RESETvar(--kds-t-line-height-reset)1
$line-height-smLINE_HEIGHT_SMvar(--kds-t-line-height-sm)1.2
$line-height-mdLINE_HEIGHT_MDvar(--kds-t-line-height-md)1.35
$line-height-lgLINE_HEIGHT_LGvar(--kds-t-line-height-lg)1.5
SassJSCSSArvo
$link-underline-offsetLINK_UNDERLINE_OFFSETvar(--kds-t-link-underline-offset)0.25rem
$link-decoration-thicknessLINK_DECORATION_THICKNESSvar(--kds-t-link-decoration-thickness)1px
$link-decoration-thickness-hoverLINK_DECORATION_THICKNESS_HOVERvar(--kds-t-link-decoration-thickness-hover)2px

Modular scale

SassJSCSSArvo
$modular-scale-baseMODULAR_SCALE_BASEvar(--kds-t-modular-scale-base)1rem
$modular-scale-ratio-xsMODULAR_SCALE_RATIO_XSvar(--kds-t-modular-scale-ratio-xs)1.10
$modular-scale-ratio-smMODULAR_SCALE_RATIO_SMvar(--kds-t-modular-scale-ratio-sm)1.12
$modular-scale-ratio-mdMODULAR_SCALE_RATIO_MDvar(--kds-t-modular-scale-ratio-md)1.13
$modular-scale-ratio-lgMODULAR_SCALE_RATIO_LGvar(--kds-t-modular-scale-ratio-lg)1.14
$modular-scale-ratio-xlMODULAR_SCALE_RATIO_XLvar(--kds-t-modular-scale-ratio-xl)1.17

Spacing

SassJSCSSArvo
$spacing-0SPACING_0var(--kds-t-spacing-0)0
$spacing-1SPACING_1var(--kds-t-spacing-1)0.25rem
$spacing-2SPACING_2var(--kds-t-spacing-2)0.5rem
$spacing-3SPACING_3var(--kds-t-spacing-3)0.75rem
$spacing-4SPACING_4var(--kds-t-spacing-4)1rem
$spacing-5SPACING_5var(--kds-t-spacing-5)1.25rem
$spacing-6SPACING_6var(--kds-t-spacing-6)1.5rem
$spacing-7SPACING_7var(--kds-t-spacing-7)1.75rem
$spacing-8SPACING_8var(--kds-t-spacing-8)2rem
$spacing-9SPACING_9var(--kds-t-spacing-9)2.25rem
$spacing-10SPACING_10var(--kds-t-spacing-10)2.5rem
$spacing-12SPACING_12var(--kds-t-spacing-12)3rem
$spacing-14SPACING_14var(--kds-t-spacing-14)3.5rem
$spacing-16SPACING_16var(--kds-t-spacing-16)4rem
$spacing-18SPACING_18var(--kds-t-spacing-18)4.5rem
$spacing-20SPACING_20var(--kds-t-spacing-20)5rem
$spacing-24SPACING_24var(--kds-t-spacing-24)6rem
$spacing-28SPACING_28var(--kds-t-spacing-28)7rem
$spacing-32SPACING_32var(--kds-t-spacing-32)8rem
$spacing-pxSPACING_PXvar(--kds-t-spacing-px)1px
$spacing-autoSPACING_AUTOvar(--kds-t-spacing-auto)auto

Timings

SassJSCSSArvo
$timings-tooltip-delayTIMINGS_TOOLTIP_DELAYvar(--kds-t-timings-tooltip-delay)400

Z-index

SassJSCSSArvo
$z-index-deepZ_INDEX_DEEPvar(--kds-t-z-index-deep)-100
$z-index-defaultZ_INDEX_DEFAULTvar(--kds-t-z-index-default)1
$z-index-elevatedZ_INDEX_ELEVATEDvar(--kds-t-z-index-elevated)2
$z-index-back-to-topZ_INDEX_BACK_TO_TOPvar(--kds-t-z-index-back-to-top)900
$z-index-headerZ_INDEX_HEADERvar(--kds-t-z-index-header)1000
$z-index-overlayZ_INDEX_OVERLAYvar(--kds-t-z-index-overlay)1010
$z-index-dropdownZ_INDEX_DROPDOWNvar(--kds-t-z-index-dropdown)1020
$z-index-sidebarZ_INDEX_SIDEBARvar(--kds-t-z-index-sidebar)1030
$z-index-toastZ_INDEX_TOASTvar(--kds-t-z-index-toast)1040
$z-index-modal-backdropZ_INDEX_MODAL_BACKDROPvar(--kds-t-z-index-modal-backdrop)1050
$z-index-modalZ_INDEX_MODALvar(--kds-t-z-index-modal)1055
$z-index-tooltipZ_INDEX_TOOLTIPvar(--kds-t-z-index-tooltip)1080
$z-index-infiniteZ_INDEX_INFINITEvar(--kds-t-z-index-infinite)9999