Color Roles

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

SEED의 역할 기반 색상 시스템은 Property(속성), Role(역할), Variant(변형), State(상태) 체계로 구성되어 있습니다.

Property (속성)

Foreground, Background, Stroke 세 가지 기본 속성으로 시작합니다.

전경, 배경, 스트로크의 기본 카테고리에 더해 brand, neutral, positive와 같은 특정 역할을 포함합니다. 이러한 역할 키워드는 색상 간의 기능적, 의미적 차이를 표현할 수 있는 레이어를 추가합니다. 일부 역할은 여러 카테고리에 걸쳐 적용될 수 있으며(e.g. $color.fg.brand, $color.bg.brand-solid, $color.stroke.brand-solid), 사용자 인터페이스 전반에 걸쳐 일관된 사용을 보장합니다.

Brand

Brand 색상은 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 또한, 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다.

Brand Role 규칙

Neutral

Neutral 색상은 일반적인 콘텐츠에 사용되는 기본 색상입니다. 주목도가 가장 높지는 않지만, 여전히 가시성이 필요한 요소에 사용됩니다.

Positive

Positive 색상은 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다.

Warning

Warning 색상은 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다.

Critical

Critical 색상은 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. 사용자에게 부정적인 상태나 문제를 명확히 전달하여 즉각적인 주의를 끌 수 있습니다.

$color.fg.critical-contrast 및 $color.bg.critical-weak 사용 예시

$color.bg.critical-solid 사용 예시

Informative

Informative 색상은 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. 이러한 색상은 정보 전달을 직관적으로 만들어 줍니다.

Layer

레이어 색상은 인터페이스의 깊이와 계층 구조를 나타내는 데 사용됩니다. UI에서 다양한 레이어를 시각적으로 구분하는 데 도움을 줍니다.

라이트 모드와 다크 모드에서의 레이어 색상

레이어 색상의 사용 예시

Variant

같은 역할을 가진 색상이라도 의도에 따라 다양한 변형이 필요할 수 있습니다. 예를 들어, Positive 역할을 가진 배경은 낮은 강조도를 가진 $color.bg.positive-weak 또는 높은 강조도를 가진 $color.bg.positive-solid 같은 변형을 가질 수 있습니다.

Status

UI 요소의 상태에 따라 색상이 변할 수 있습니다. 예를 들어, 버튼을 눌렀을 때 색상 변화로 사용자에게 상호작용이 발생했음을 표현할 수 있습니다.

Tokens

Foreground

이름	값
$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

Background

이름	값
$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

Stroke

이름	값
$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 Roles

Property (속성)

Background

Foreground

Stroke

Role (역할)

Brand

Neutral

Positive

Warning

Critical

Informative

Layer

Variant

Status

Tokens

Foreground

Background

Stroke

On this page