Color Roles

역할이 부여된 색상은 색상에 특정 기능적 역할(주요 액션, 오류, 정보 등)을 할당하여 사용자 인터페이스 전반에 걸쳐 일관성, 명확성, 접근성을 보장합니다.

Tokens

Foreground

이름	값
$color.fg.neutral	$color.palette.gray-1000
$color.fg.placeholder	$color.palette.gray-600
$color.fg.disabled	$color.palette.gray-500
$color.fg.brand	$color.palette.carrot-600
$color.fg.informative	$color.palette.blue-700
$color.fg.critical	$color.palette.red-700
$color.fg.positive	$color.palette.green-700
$color.fg.warning	$color.palette.yellow-700
$color.fg.brand-contrast	$color.palette.carrot-700
$color.fg.critical-contrast	$color.palette.red-900
$color.fg.informative-contrast	$color.palette.blue-900
$color.fg.neutral-muted	$color.palette.gray-800
$color.fg.neutral-subtle	$color.palette.gray-700
$color.fg.neutral-inverted	$color.palette.gray-00
$color.fg.positive-contrast	$color.palette.green-900
$color.fg.warning-contrast	$color.palette.yellow-900

Background

이름	값
$color.bg.overlay	$color.palette.static-black-alpha-700
$color.bg.disabled	$color.palette.gray-200
$color.bg.brand-weak	$color.palette.carrot-100
$color.bg.brand-solid	$color.palette.carrot-600
$color.bg.brand-solid-pressed	$color.palette.carrot-700
$color.bg.brand-weak-pressed	$color.palette.carrot-200
$color.bg.critical-weak	$color.palette.red-100
$color.bg.critical-solid	$color.palette.red-700
$color.bg.critical-solid-pressed	$color.palette.red-800
$color.bg.critical-weak-pressed	$color.palette.red-200
$color.bg.informative-weak	$color.palette.blue-100
$color.bg.informative-solid	$color.palette.blue-700
$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-weak	#f9f2ee
$color.bg.neutral-weak	$color.palette.gray-200
$color.bg.neutral-inverted	$color.palette.gray-900
$color.bg.neutral-solid	$color.palette.gray-1000
$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-500
$color.bg.positive-weak	$color.palette.green-100
$color.bg.positive-solid	$color.palette.green-700
$color.bg.positive-solid-pressed	$color.palette.green-800
$color.bg.positive-weak-pressed	$color.palette.green-200
$color.bg.warning-weak	$color.palette.yellow-100
$color.bg.warning-solid	$color.palette.yellow-300
$color.bg.warning-solid-pressed	$color.palette.yellow-400
$color.bg.warning-weak-pressed	$color.palette.yellow-200

Stroke

이름	값
$color.stroke.brand-weak	$color.palette.carrot-300
$color.stroke.brand-solid	$color.palette.carrot-700
$color.stroke.critical-weak	$color.palette.red-300
$color.stroke.critical-solid	$color.palette.red-700
$color.stroke.informative-weak	$color.palette.blue-300
$color.stroke.informative-solid	$color.palette.blue-700
$color.stroke.neutral-contrast	$color.palette.gray-1000
$color.stroke.neutral-solid	$color.palette.gray-800
$color.stroke.neutral-weak	$color.palette.gray-400
$color.stroke.neutral-muted	$color.palette.static-black-alpha-300
$color.stroke.neutral-subtle	$color.palette.static-black-alpha-200
$color.stroke.positive-weak	$color.palette.green-300
$color.stroke.positive-solid	$color.palette.green-700
$color.stroke.warning-weak	$color.palette.yellow-300
$color.stroke.warning-solid	$color.palette.yellow-700

Color Roles

Tokens

Foreground

Background

Stroke

On this page