Color

SEED 색상 시스템은 접근성을 고려하며 제품의 계층, 상태, 브랜드를 표현할 수 있도록 돕습니다.

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 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다.	$color.palette.gray-00
$color.bg.layer-default-pressed basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다. (pressed)	$color.palette.gray-100
$color.bg.layer-fill @deprecated @seed-design/[email protected]에서 새 이름 토큰으로 대체·제거될 예정입니다.	$color.palette.gray-100
$color.bg.layer-floating 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다.	$color.palette.gray-00
$color.bg.layer-floating-pressed 화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. (pressed)	$color.palette.gray-100
$color.bg.magic-weak
$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
$color.bg.transparent-pressed	$color.palette.static-black-alpha-100
$color.bg.transparent-selected	$color.palette.static-black-alpha-200
$color.bg.transparent-selected-pressed	$color.palette.static-black-alpha-300
$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.focus-ring	$color.palette.blue-600
$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

Property (속성)

Background

Foreground

Stroke

Role (역할)

Brand

Neutral

Positive

Warning

Critical

Informative

Layer

Variant

Status

Tokens

Foreground

Background

Stroke

On this page