Design Token

브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다.

브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. (contrast)

오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다.

오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (contrast)

사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다.

사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (contrast)

일반적인 콘텐츠에 사용되는 기본 색상입니다.

일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted)

일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted)

일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)

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

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

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

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

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

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

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

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

오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (solid)

오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (solid-pressed)

오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (weak)

오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (weak-pressed)

사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid)

사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid-pressed)

사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak)

사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak-pressed)

가장 낮은 0단계의 '대지'입니다. 화면 가장 깊은 곳에 위치하는 전체 배경색입니다.

basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다.

basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠(List, TextField 등)가 이 레이어 위에서 표현됩니다. (pressed)

@deprecated @seed-design/[email protected]에서 새 이름 토큰으로 대체·제거될 예정입니다.

화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다.

화면의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 사용자의 상호작용을 필요로 하는 모달(Modal)성 요소들이 여기에 속합니다. (pressed)

일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted)

일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted-pressed)

일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid)

일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted)

일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted-pressed)

일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak)

일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-alpha) `$color.layer.basement` 위에서 컴포넌트의 가시성을 보장하기 위해 사용됩니다.

일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-alpha-pressed) `$color.layer.basement` 위에서 컴포넌트의 가시성을 보장하기 위해 사용됩니다.

일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-pressed)

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

성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (solid-pressed)

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

성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (weak-pressed)

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

사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid-pressed)

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

사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (weak-pressed)

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

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

오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (solid)

오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (weak)

사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid)

사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak)

일반적인 콘텐츠에 사용되는 기본 색상입니다. (contrast)

일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted)

일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid)

일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle)

일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak)

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

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

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

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

Chip 사이의 수평 간격에 사용합니다.

화면 전체에 적용되는 기본 수평 padding 값입니다.

컴포넌트 간 수직 간격 토큰이 정의되지 않은 컴포넌트 사이의 수직 간격에 사용합니다.

Top Navigation과 Page Title 사이의 간격입니다.

화면 하단의 여백입니다.

텍스트 요소 간의 수직 간격입니다.