Design Token Reference

이름	값
$color.palette.blue-100	#eff6ff
$color.palette.blue-200	#e2edfc
$color.palette.blue-300	#cbdffa
$color.palette.blue-400	#aacefd
$color.palette.blue-500	#85b8fd
$color.palette.blue-600	#5e98fe
$color.palette.blue-700	#217cf9
$color.palette.blue-800	#135fcd
$color.palette.blue-900	#0b4596
$color.palette.blue-1000	#032451
$color.palette.carrot-100	#fff2ec
$color.palette.carrot-200	#ffe8db
$color.palette.carrot-300	#ffd5c0
$color.palette.carrot-400	#ffb999
$color.palette.carrot-500	#ff9364
$color.palette.carrot-600	#ff6600
$color.palette.carrot-700	#e04f00
$color.palette.carrot-800	#b93901
$color.palette.carrot-900	#862b00
$color.palette.carrot-1000	#471601
$color.palette.gray-00	#ffffff
$color.palette.gray-100	#f7f8f9
$color.palette.gray-200	#f3f4f5
$color.palette.gray-300	#eeeff1
$color.palette.gray-400	#dcdee3
$color.palette.gray-500	#d1d3d8
$color.palette.gray-600	#b0b3ba
$color.palette.gray-700	#868b94
$color.palette.gray-800	#555d6d
$color.palette.gray-900	#2a3038
$color.palette.gray-1000	#1a1c20
$color.palette.green-100	#edfaf6
$color.palette.green-200	#d9f6e9
$color.palette.green-300	#b9e9d2
$color.palette.green-400	#7ddcb3
$color.palette.green-500	#42c593
$color.palette.green-600	#10ab7d
$color.palette.green-700	#079171
$color.palette.green-800	#00745f
$color.palette.green-900	#075445
$color.palette.green-1000	#0a2b24
$color.palette.purple-100	#f5f3fe
$color.palette.purple-200	#efeafe
$color.palette.purple-300	#e1d8ff
$color.palette.purple-400	#d0c0ff
$color.palette.purple-500	#b8a1ff
$color.palette.purple-600	#9f84fb
$color.palette.purple-700	#8969ea
$color.palette.purple-800	#6d50cb
$color.palette.purple-900	#50379b
$color.palette.purple-1000	#29175d
$color.palette.red-100	#fdf0f0
$color.palette.red-200	#fde7e7
$color.palette.red-300	#fed4d2
$color.palette.red-400	#feb7b3
$color.palette.red-500	#fe928d
$color.palette.red-600	#fc6a66
$color.palette.red-700	#fa342c
$color.palette.red-800	#ca1d13
$color.palette.red-900	#921708
$color.palette.red-1000	#4a1209
$color.palette.static-black	#000000
$color.palette.static-white	#ffffff
$color.palette.static-black-alpha-50	#0000000d
$color.palette.static-black-alpha-200	#00000033
$color.palette.static-black-alpha-500	#00000080
$color.palette.static-white-alpha-200	#ffffff33
$color.palette.static-white-alpha-800	#ffffffcc
$color.palette.yellow-100	#fff7de
$color.palette.yellow-200	#fdefb9
$color.palette.yellow-300	#fbdc65
$color.palette.yellow-400	#e9c647
$color.palette.yellow-500	#d4ab28
$color.palette.yellow-600	#c49725
$color.palette.yellow-700	#9b7821
$color.palette.yellow-800	#755b22
$color.palette.yellow-900	#4f3e1f
$color.palette.yellow-1000	#2c2512
$color.fg.brand	$color.palette.carrot-600
$color.fg.critical	$color.palette.red-700
$color.fg.disabled	$color.palette.gray-500
$color.fg.informative	$color.palette.blue-700
$color.fg.magic	$color.palette.purple-700
$color.fg.neutral	$color.palette.gray-1000
$color.fg.placeholder	$color.palette.gray-600
$color.fg.positive	$color.palette.green-700
$color.fg.critical-contrast	$color.palette.red-900
$color.fg.informative-contrast	$color.palette.blue-900
$color.fg.magic-contrast	$color.palette.purple-900
$color.fg.neutral-inverted	$color.palette.gray-00
$color.fg.neutral-muted	$color.palette.gray-800
$color.fg.neutral-subtle	$color.palette.gray-700
$color.fg.positive-contrast	$color.palette.green-900
$color.fg.warning-contrast	$color.palette.yellow-900
$color.bg.disabled	$color.palette.gray-200
$color.bg.overlay	$color.palette.static-black-alpha-500
$color.bg.brand-solid	$color.palette.carrot-600
$color.bg.brand-solid-pressed	$color.palette.carrot-700
$color.bg.critical-solid	$color.palette.red-700
$color.bg.critical-weak	$color.palette.red-100
$color.bg.critical-solid-pressed	$color.palette.red-800
$color.bg.critical-weak-pressed	$color.palette.red-200
$color.bg.informative-solid	$color.palette.blue-700
$color.bg.informative-weak	$color.palette.blue-100
$color.bg.informative-solid-pressed	$color.palette.blue-800
$color.bg.informative-weak-pressed	$color.palette.blue-200
$color.bg.layer-basement	$color.palette.gray-200
$color.bg.layer-default	$color.palette.gray-00
$color.bg.layer-fill	$color.palette.gray-100
$color.bg.layer-floating	$color.palette.gray-00
$color.bg.layer-default-pressed	$color.palette.gray-100
$color.bg.layer-floating-pressed	$color.palette.gray-100
$color.bg.magic-solid	$color.palette.purple-700
$color.bg.magic-weak	$color.palette.purple-100
$color.bg.magic-solid-pressed	$color.palette.purple-800
$color.bg.magic-weak-pressed	$color.palette.purple-200
$color.bg.neutral-inverted	$color.palette.gray-900
$color.bg.neutral-solid	$color.palette.gray-1000
$color.bg.neutral-weak	$color.palette.gray-200
$color.bg.neutral-inverted-pressed	$color.palette.gray-800
$color.bg.neutral-solid-muted	$color.palette.gray-800
$color.bg.neutral-solid-muted-pressed	$color.palette.gray-900
$color.bg.neutral-weak-pressed	$color.palette.gray-300
$color.bg.overlay-muted	$color.palette.static-black-alpha-200
$color.bg.positive-solid	$color.palette.green-700
$color.bg.positive-weak	$color.palette.green-100
$color.bg.positive-solid-pressed	$color.palette.green-800
$color.bg.positive-weak-pressed	$color.palette.green-200
$color.bg.warning-solid	$color.palette.yellow-300
$color.bg.warning-weak	$color.palette.yellow-100
$color.bg.warning-weak-pressed	$color.palette.yellow-200
$color.stroke.brand	$color.palette.carrot-300
$color.stroke.control	$color.palette.gray-400
$color.stroke.critical	$color.palette.red-300
$color.stroke.field	$color.palette.gray-400
$color.stroke.informative	$color.palette.blue-300
$color.stroke.neutral	$color.palette.gray-300
$color.stroke.positive	$color.palette.green-300
$color.stroke.field-focused	$color.palette.gray-800
$color.stroke.neutral-muted	$color.palette.gray-200
$color.stroke.on-image	$color.palette.static-black-alpha-50
$color.manner-temp.l1.bg	#eff0f1
$color.manner-temp.l1.text	#62666a
$color.manner-temp.l2.bg	#e7f2fc
$color.manner-temp.l2.text	#2592f7
$color.manner-temp.l3.bg	#e3f6fc
$color.manner-temp.l3.text	#0099c8
$color.manner-temp.l4.bg	#ebf9f4
$color.manner-temp.l4.text	#03a07e
$color.manner-temp.l5.bg	#fff5e5
$color.manner-temp.l5.text	#d28500
$color.manner-temp.l6.bg	#fff0e5
$color.manner-temp.l6.text	#f06000
$dimension.x0_5	2px
$dimension.x1	4px
$dimension.x1_5	6px
$dimension.x2	8px
$dimension.x2_5	10px
$dimension.x3	12px
$dimension.x3_5	14px
$dimension.x4	16px
$dimension.x4_5	18px
$dimension.x5	20px
$dimension.x6	24px
$dimension.x7	28px
$dimension.x8	32px
$dimension.x9	36px
$dimension.x10	40px
$dimension.x12	48px
$dimension.x13	52px
$dimension.x14	56px
$dimension.x16	64px
$dimension.spacing-x.between-chips	$dimension.x2
$dimension.spacing-x.global-gutter	$dimension.x4
$dimension.spacing-y.component-default	$dimension.x3
$dimension.spacing-y.nav-to-title	$dimension.x5
$dimension.spacing-y.screen-bottom	$dimension.x14
$dimension.spacing-y.between-text	$dimension.x1_5
$duration.d1	50ms
$duration.d2	100ms
$duration.d3	150ms
$duration.d4	200ms
$duration.d5	250ms
$duration.d6	300ms
$font-size.t1	11px (0.6875rem)
$font-size.t2	12px (0.75rem)
$font-size.t3	13px (0.8125rem)
$font-size.t4	14px (0.875rem)
$font-size.t5	16px (1rem)
$font-size.t6	18px (1.125rem)
$font-size.t7	20px (1.25rem)
$font-size.t8	22px (1.375rem)
$font-size.t9	24px (1.5rem)
$font-size.t10	26px (1.625rem)
$font-size.t2-static	12px
$font-size.t5-static	16px
$font-size.t6-static	18px
$font-weight.regular	400
$font-weight.medium	500
$font-weight.bold	700
$gradient.shimmer	#ffffff00 0%, #ffffff66 46%, #ffffff66 54%, #ffffff00 100%
$line-height.t1	15px (0.9375rem)
$line-height.t2	16px (1rem)
$line-height.t3	18px (1.125rem)
$line-height.t4	19px (1.1875rem)
$line-height.t5	22px (1.375rem)
$line-height.t6	24px (1.5rem)
$line-height.t7	27px (1.6875rem)
$line-height.t8	30px (1.875rem)
$line-height.t9	32px (2rem)
$line-height.t10	35px (2.1875rem)
$radius.r0_5	2px
$radius.r1	4px
$radius.r1_5	6px
$radius.r2	8px
$radius.r2_5	10px
$radius.r3	12px
$radius.r3_5	14px
$radius.r4	16px
$radius.r5	20px
$radius.r6	24px
$radius.full	9999px
$timing-function.linear	cubic-bezier(0, 0, 1, 1)
$timing-function.easing	cubic-bezier(0.35, 0, 0.35, 1)
$timing-function.enter	cubic-bezier(0, 0, 0.15, 1)
$timing-function.exit	cubic-bezier(0.35, 0, 1, 1)
$timing-function.enter-expressive	cubic-bezier(0.03, 0.4, 0.1, 1)
$timing-function.exit-expressive	cubic-bezier(0.35, 0, 0.95, 0.55)