Design Token Reference

이름	값
$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.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	#e14d00
$color.palette.carrot-800	#b93901
$color.palette.carrot-900	#862b00
$color.palette.carrot-1000	#471601
$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.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.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.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.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.static-black	#000000
$color.palette.static-black-alpha-100	#00000007
$color.palette.static-black-alpha-200	#0000000c
$color.palette.static-black-alpha-300	#00000010
$color.palette.static-black-alpha-400	#00000021
$color.palette.static-black-alpha-500	#0000002c
$color.palette.static-black-alpha-600	#0000004c
$color.palette.static-black-alpha-700	#00000074
$color.palette.static-black-alpha-800	#000000a2
$color.palette.static-black-alpha-900	#000000d0
$color.palette.static-black-alpha-1000	#000000e3
$color.palette.static-white	#ffffff
$color.palette.static-white-alpha-50	#ffffff0d
$color.palette.static-white-alpha-100	#ffffff17
$color.palette.static-white-alpha-200	#ffffff20
$color.palette.static-white-alpha-300	#ffffff2e
$color.palette.static-white-alpha-400	#ffffff3d
$color.palette.static-white-alpha-500	#ffffff60
$color.palette.static-white-alpha-600	#ffffff8b
$color.palette.static-white-alpha-700	#ffffffb3
$color.palette.static-white-alpha-800	#ffffffde
$color.palette.static-white-alpha-900	#ffffffea
$color.palette.static-white-alpha-1000	#fffffff4
$color.fg.brand 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다.	$color.palette.carrot-600
$color.fg.brand-contrast 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. (contrast)	$color.palette.carrot-700
$color.fg.critical 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다.	$color.palette.red-700
$color.fg.critical-contrast 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (contrast)	$color.palette.red-900
$color.fg.disabled	$color.palette.gray-500
$color.fg.informative 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다.	$color.palette.blue-700
$color.fg.informative-contrast 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (contrast)	$color.palette.blue-900
$color.fg.neutral 일반적인 콘텐츠에 사용되는 기본 색상입니다.	$color.palette.gray-1000
$color.fg.neutral-inverted 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted)	$color.palette.gray-00
$color.fg.neutral-muted 일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted)	$color.palette.gray-800
$color.fg.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)	$color.palette.gray-700
$color.fg.placeholder	$color.palette.gray-600
$color.fg.positive 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다.	$color.palette.green-700
$color.fg.positive-contrast 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (contrast)	$color.palette.green-900
$color.fg.warning 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다.	$color.palette.yellow-700
$color.fg.warning-contrast 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (contrast)	$color.palette.yellow-900
$color.bg.brand-solid 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (solid)	$color.palette.carrot-600
$color.bg.brand-solid-pressed 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (solid-pressed)	$color.palette.carrot-700
$color.bg.brand-weak 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (weak)	$color.palette.carrot-100
$color.bg.brand-weak-pressed 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (weak-pressed)	$color.palette.carrot-200
$color.bg.critical-solid 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (solid)	$color.palette.red-700
$color.bg.critical-solid-pressed 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (solid-pressed)	$color.palette.red-800
$color.bg.critical-weak 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (weak)	$color.palette.red-100
$color.bg.critical-weak-pressed 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (weak-pressed)	$color.palette.red-200
$color.bg.disabled	$color.palette.gray-200
$color.bg.informative-solid 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid)	$color.palette.blue-700
$color.bg.informative-solid-pressed 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid-pressed)	$color.palette.blue-800
$color.bg.informative-weak 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak)	$color.palette.blue-100
$color.bg.informative-weak-pressed 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak-pressed)	$color.palette.blue-200
$color.bg.layer-basement 가장 낮은 0단계의 '대지'입니다. 앱의 가장 깊은 곳에 위치하는 전체 배경색입니다.	$color.palette.gray-200
$color.bg.layer-default basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠가 이 레이어 위에서 표현됩니다.	$color.palette.gray-00
$color.bg.layer-default-pressed basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠가 이 레이어 위에서 표현됩니다. (pressed)	$color.palette.gray-100
$color.bg.layer-fill @deprecated `@seed-design/[email protected]`에서 제거될 예정입니다.	$color.palette.gray-100
$color.bg.layer-floating 앱의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 모달성 요소들이 여기에 속합니다.	$color.palette.gray-00
$color.bg.layer-floating-pressed 앱의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 모달성 요소들이 여기에 속합니다. (pressed)	$color.palette.gray-100
$color.bg.magic-weak	#f9f2ee
$color.bg.neutral-inverted 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted)	$color.palette.gray-900
$color.bg.neutral-inverted-pressed 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted-pressed)	$color.palette.gray-800
$color.bg.neutral-solid 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid)	$color.palette.gray-1000
$color.bg.neutral-solid-muted 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted)	$color.palette.gray-800
$color.bg.neutral-solid-muted-pressed 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted-pressed)	$color.palette.gray-900
$color.bg.neutral-weak 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak)	$color.palette.gray-200
$color.bg.neutral-weak-alpha 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-alpha) `$color.layer.basement` 위에서 컴포넌트의 가시성을 보장하기 위해 사용됩니다.	$color.palette.static-black-alpha-200
$color.bg.neutral-weak-alpha-pressed 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-alpha-pressed) `$color.layer.basement` 위에서 컴포넌트의 가시성을 보장하기 위해 사용됩니다.	$color.palette.static-black-alpha-300
$color.bg.neutral-weak-pressed 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-pressed)	$color.palette.gray-300
$color.bg.overlay	$color.palette.static-black-alpha-700
$color.bg.overlay-muted	$color.palette.static-black-alpha-500
$color.bg.positive-solid 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (solid)	$color.palette.green-700
$color.bg.positive-solid-pressed 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (solid-pressed)	$color.palette.green-800
$color.bg.positive-weak 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (weak)	$color.palette.green-100
$color.bg.positive-weak-pressed 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (weak-pressed)	$color.palette.green-200
$color.bg.transparent	#00000000
$color.bg.transparent-pressed	$color.palette.static-black-alpha-100
$color.bg.warning-solid 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid)	$color.palette.yellow-300
$color.bg.warning-solid-pressed 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid-pressed)	$color.palette.yellow-400
$color.bg.warning-weak 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (weak)	$color.palette.yellow-100
$color.bg.warning-weak-pressed 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (weak-pressed)	$color.palette.yellow-200
$color.stroke.brand-solid 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (solid)	$color.palette.carrot-700
$color.stroke.brand-weak 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (weak)	$color.palette.carrot-300
$color.stroke.critical-solid 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (solid)	$color.palette.red-700
$color.stroke.critical-weak 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (weak)	$color.palette.red-300
$color.stroke.informative-solid 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid)	$color.palette.blue-700
$color.stroke.informative-weak 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak)	$color.palette.blue-300
$color.stroke.neutral-contrast 일반적인 콘텐츠에 사용되는 기본 색상입니다. (contrast)	$color.palette.gray-1000
$color.stroke.neutral-muted 일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted)	$color.palette.static-black-alpha-300
$color.stroke.neutral-solid 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid)	$color.palette.gray-800
$color.stroke.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)	$color.palette.static-black-alpha-200
$color.stroke.neutral-weak 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak)	$color.palette.gray-400
$color.stroke.positive-solid 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (solid)	$color.palette.green-700
$color.stroke.positive-weak 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (weak)	$color.palette.green-300
$color.stroke.warning-solid 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid)	$color.palette.yellow-700
$color.stroke.warning-weak 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (weak)	$color.palette.yellow-300
$color.manner-temp.l1.bg	#f1f2f3
$color.manner-temp.l1.text	#757b85
$color.manner-temp.l10.bg	#ffebee
$color.manner-temp.l10.text	#cb0123
$color.manner-temp.l2.bg	#f8f4ec
$color.manner-temp.l2.text	#ab863f
$color.manner-temp.l3.bg	#fff5e5
$color.manner-temp.l3.text	#e08a00
$color.manner-temp.l4.bg	#fff3e5
$color.manner-temp.l4.text	#f57e00
$color.manner-temp.l5.bg	#fff1e5
$color.manner-temp.l5.text	#ff7300
$color.manner-temp.l6.bg	#fff0e5
$color.manner-temp.l6.text	#ff6600
$color.manner-temp.l7.bg	#ffefe5
$color.manner-temp.l7.text	#ff5100
$color.manner-temp.l8.bg	#ffeee5
$color.manner-temp.l8.text	#ff3300
$color.manner-temp.l9.bg	#fdeded
$color.manner-temp.l9.text	#e82c45
$color.banner.blue	#e1f7ff
$color.banner.cool-gray	#ebf1f5
$color.banner.green	#f0fbe5
$color.banner.orange	#fff2e1
$color.banner.pink	#ffebf1
$color.banner.purple	#f5ecff
$color.banner.red	#ffecee
$color.banner.teal	#e6faf6
$color.banner.warm-gray	#f2f0ee
$color.banner.yellow	#fffae1
$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 Chip 사이의 수평 간격에 사용합니다.	$dimension.x2
$dimension.spacing-x.global-gutter 화면 전체에 적용되는 기본 수평 padding 값입니다.	$dimension.x4
$dimension.spacing-y.component-default 컴포넌트 간 수직 간격 토큰이 정의되지 않은 컴포넌트 사이의 수직 간격에 사용합니다.	$dimension.x3
$dimension.spacing-y.nav-to-title Top Navigation과 Page 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
$duration.color-transition	$duration.d3
$font-size.t1	0.6875rem (11px)
$font-size.t2	0.75rem (12px)
$font-size.t3	0.8125rem (13px)
$font-size.t4	0.875rem (14px)
$font-size.t5	1rem (16px)
$font-size.t6	1.125rem (18px)
$font-size.t7	1.25rem (20px)
$font-size.t8	1.375rem (22px)
$font-size.t9	1.5rem (24px)
$font-size.t10	1.625rem (26px)
$font-size.t1-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	11px
$font-size.t2-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	12px
$font-size.t3-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	13px
$font-size.t4-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	14px
$font-size.t5-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	16px
$font-size.t6-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	18px
$font-size.t7-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	20px
$font-size.t8-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	22px
$font-size.t9-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	24px
$font-size.t10-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	26px
$font-weight.regular	400
$font-weight.medium	500
$font-weight.bold	700
$gradient.fade-layer-floating 스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요. @deprecated `@seed-design/[email protected]`에서 제거될 예정입니다.	#ffffff00 0%, #000000 100%
$gradient.fade-layer-default 스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요. @deprecated `@seed-design/[email protected]`에서 제거될 예정입니다.	#000000 0%, #ffffff00 100%
$gradient.glow-magic 반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러입니다.	#fef6f7 0%, #fef0e7 80%, #f9f7f5 100%
$gradient.glow-magic-pressed 반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러의 pressed컬러입니다.	#fbf0f2 0%, #ffe8db 80%, #f5f2ef 100%
$gradient.highlight-magic 아이콘 및 shape 영역에서 AI 기능을 표현할 때 사용하는 컬러입니다.	#ff6600 20%, #d25aca 100%
$gradient.highlight-magic-pressed	#e14f00 20%, #ae58bf 100%
$gradient.shimmer-magic Skeleton AI shimmer	#fff9f500 0%, #fff9f5cc 46%, #fff9f5cc 54%, #fff9f500 100%
$gradient.shimmer-neutral Skeleton shimmer	#ffffff00 0%, #ffffffab 46%, #ffffffab 54%, #ffffff00 100%
$line-height.t1	0.9375rem (15px)
$line-height.t2	1rem (16px)
$line-height.t3	1.125rem (18px)
$line-height.t4	1.1875rem (19px)
$line-height.t5	1.375rem (22px)
$line-height.t6	1.5rem (24px)
$line-height.t7	1.6875rem (27px)
$line-height.t8	1.875rem (30px)
$line-height.t9	2rem (32px)
$line-height.t10	2.1875rem (35px)
$line-height.t1-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	15px
$line-height.t2-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	16px
$line-height.t3-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	18px
$line-height.t4-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	19px
$line-height.t5-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	22px
$line-height.t6-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	24px
$line-height.t7-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	27px
$line-height.t8-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	30px
$line-height.t9-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	32px
$line-height.t10-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다.	35px
$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
$shadow.s1	0px 1px 4px 0px #00000014
$shadow.s2	0px 2px 10px 0px #0000001a
$shadow.s3 화면의 다른 요소들보다 가장 높은 계층에 위치할 때 사용됩니다.	0px 4px 16px 0px #0000001f
$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)