Foundation
Design Token Reference
SEED 디자인 토큰의 전체 목록을 제공합니다.
| 이름 | 값 |
|---|---|
$color.fg.brand 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. | |
$color.fg.brand-contrast 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. (contrast) | |
$color.fg.critical 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. | |
$color.fg.critical-contrast 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (contrast) | |
$color.fg.informative 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. | |
$color.fg.informative-contrast 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (contrast) | |
$color.fg.neutral 일반적인 콘텐츠에 사용되는 기본 색상입니다. | |
$color.fg.neutral-inverted 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted) | |
$color.fg.neutral-muted 일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted) | |
$color.fg.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle) | |
$color.fg.positive 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. | |
$color.fg.positive-contrast 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (contrast) | |
$color.fg.warning 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. | |
$color.fg.warning-contrast 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (contrast) | |
$color.bg.brand-solid 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (solid) | |
$color.bg.brand-solid-pressed 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (solid-pressed) | |
$color.bg.brand-weak 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (weak) | |
$color.bg.brand-weak-pressed 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (weak-pressed) | |
$color.bg.critical-solid 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (solid) | |
$color.bg.critical-solid-pressed 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (solid-pressed) | |
$color.bg.critical-weak 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (weak) | |
$color.bg.critical-weak-pressed 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (weak-pressed) | |
$color.bg.informative-solid 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid) | |
$color.bg.informative-solid-pressed 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid-pressed) | |
$color.bg.informative-weak 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak) | |
$color.bg.informative-weak-pressed 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak-pressed) | |
$color.bg.layer-basement 가장 낮은 0단계의 '대지'입니다. 앱의 가장 깊은 곳에 위치하는 전체 배경색입니다. | |
$color.bg.layer-default basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠가 이 레이어 위에서 표현됩니다. | |
$color.bg.layer-default-pressed basement 바로 위에 놓이는 기본 표면입니다. 대부분의 스크린 콘텐츠가 이 레이어 위에서 표현됩니다. (pressed) | |
$color.bg.layer-fill @deprecated `@seed-design/[email protected]`에서 제거될 예정입니다. | |
$color.bg.layer-floating 앱의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 모달성 요소들이 여기에 속합니다. | |
$color.bg.layer-floating-pressed 앱의 모든 콘텐츠 위를 덮으며(floating) 나타나는 임시 레이어입니다. 모달성 요소들이 여기에 속합니다. (pressed) | |
$color.bg.neutral-inverted 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted) | |
$color.bg.neutral-inverted-pressed 일반적인 콘텐츠에 사용되는 기본 색상입니다. (inverted-pressed) | |
$color.bg.neutral-solid 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid) | |
$color.bg.neutral-solid-muted 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted) | |
$color.bg.neutral-solid-muted-pressed 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid-muted-pressed) | |
$color.bg.neutral-weak 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak) | |
$color.bg.neutral-weak-alpha 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-alpha) `$color.layer.basement` 위에서 컴포넌트의 가시성을 보장하기 위해 사용됩니다. | |
$color.bg.neutral-weak-alpha-pressed 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-alpha-pressed) `$color.layer.basement` 위에서 컴포넌트의 가시성을 보장하기 위해 사용됩니다. | |
$color.bg.neutral-weak-pressed 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak-pressed) | |
$color.bg.positive-solid 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (solid) | |
$color.bg.positive-solid-pressed 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (solid-pressed) | |
$color.bg.positive-weak 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (weak) | |
$color.bg.positive-weak-pressed 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (weak-pressed) | |
$color.bg.warning-solid 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid) | |
$color.bg.warning-solid-pressed 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid-pressed) | |
$color.bg.warning-weak 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (weak) | |
$color.bg.warning-weak-pressed 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (weak-pressed) | |
$color.stroke.brand-solid 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (solid) | |
$color.stroke.brand-weak 브랜드와 관련된 요소들이 즉각적으로 인식될 수 있도록 돕습니다. 화면에서 가장 중요한 액션을 강조하는데 사용할 수 있습니다. (weak) | |
$color.stroke.critical-solid 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (solid) | |
$color.stroke.critical-weak 오류, 경고 또는 중요한 문제를 나타내는 데 사용됩니다. (weak) | |
$color.stroke.informative-solid 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (solid) | |
$color.stroke.informative-weak 사용자에게 유용한 정보를 제공하거나 상태를 설명할 때 사용됩니다. (weak) | |
$color.stroke.neutral-contrast 일반적인 콘텐츠에 사용되는 기본 색상입니다. (contrast) | |
$color.stroke.neutral-muted 일반적인 콘텐츠에 사용되는 기본 색상입니다. (muted) | |
$color.stroke.neutral-solid 일반적인 콘텐츠에 사용되는 기본 색상입니다. (solid) | |
$color.stroke.neutral-subtle 일반적인 콘텐츠에 사용되는 기본 색상입니다. (subtle) | |
$color.stroke.neutral-weak 일반적인 콘텐츠에 사용되는 기본 색상입니다. (weak) | |
$color.stroke.positive-solid 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (solid) | |
$color.stroke.positive-weak 성공적인 작업, 확인, 또는 긍정적인 상태를 나타내는 데 사용됩니다. (weak) | |
$color.stroke.warning-solid 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (solid) | |
$color.stroke.warning-weak 사용자의 주의가 필요한 경고 메시지나 안내 사항을 전달하는 데 사용됩니다. (weak) | |
$dimension.spacing-x.between-chips Chip 사이의 수평 간격에 사용합니다. | |
$dimension.spacing-x.global-gutter 화면 전체에 적용되는 기본 수평 padding 값입니다. | |
$dimension.spacing-y.component-default 컴포넌트 간 수직 간격 토큰이 정의되지 않은 컴포넌트 사이의 수직 간격에 사용합니다. | |
$dimension.spacing-y.nav-to-title Top Navigation과 Page Title 사이의 간격입니다. | |
$dimension.spacing-y.screen-bottom 화면 하단의 여백입니다. | |
$dimension.spacing-y.between-text 텍스트 요소 간의 수직 간격입니다. | |
$font-size.t1-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$font-size.t2-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$font-size.t3-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$font-size.t4-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$font-size.t5-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$font-size.t6-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$font-size.t7-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$font-size.t8-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$font-size.t9-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$font-size.t10-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$gradient.fade-layer-floating 스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.
@deprecated `@seed-design/[email protected]`에서 제거될 예정입니다.
| |
$gradient.fade-layer-default 스크롤이 가능하도록 그라디언트로 특정 영역을 덮는 요소로 사용해요.
@deprecated `@seed-design/[email protected]`에서 제거될 예정입니다.
| |
$gradient.glow-magic 반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러입니다. | |
$gradient.glow-magic-pressed 반짝이는 것처럼 느껴지는 배경에 쓰이는 ai 컬러의 pressed컬러입니다. | |
$gradient.highlight-magic 아이콘 및 shape 영역에서 AI 기능을 표현할 때 사용하는 컬러입니다. | |
$gradient.shimmer-magic Skeleton AI shimmer | |
$gradient.shimmer-neutral Skeleton shimmer | |
$line-height.t1-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$line-height.t2-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$line-height.t3-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$line-height.t4-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$line-height.t5-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$line-height.t6-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$line-height.t7-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$line-height.t8-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$line-height.t9-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$line-height.t10-static 폰트 스케일링에 반응하지 않도록 px로 정의되었습니다. | |
$shadow.s3 화면의 다른 요소들보다 가장 높은 계층에 위치할 때 사용됩니다. | |
Last updated on