Colors

Primary

화면 내에서 가장 중요한 요소를 표현할 때 사용합니다. Normal, Strong, Heavy와 같이 3가지 타입이 존재하며 상황에 맞게 적절히 선택하여 사용합니다.

Label

화면 내에서 가장 중요한 요소를 표현할 때 사용합니다. Normal, Strong, Heavy와 같이 3가지 타입이 존재하며 상황에 맞게 적절히 선택하여 사용합니다.

Fill

어떠한 요소에서 배경 색상이 필요한 경우 사용하는 투명도가 포함된 색상입니다. 정보가 있는 패널과 배경을 구분해야할 때 패널에 색상을 채워 사용합니다.

Line - Normal

Divider, Border 등 요소 간의 구분이 필요한 경우 사용합니다. 투명 값이 포함된 색상으로 라인을 중첩하여 사용하지 않도록 유의하여 사용합니다.

Line - Solid

Border와 Divider를 중첩하여 사용할 때 중첩을 방지 하고자 사용합니다.

Background - Normal

일반적인 화면의 배경 색상으로 활용합니다. 카드 UI와 같이 어떠한 요소와 배경의 구분을 분명히 둬야할 때 Alternative를 사용하여 대비를 줍니다.

Background - Elevated

모달과 같이 층위가 있는 페이지 사용하는 배경 색상으로 다크 모드에서 Background-Normal과의 색상 차이가 있습니다.

Background - Transparent

Chrome 효과를 적용할 때 사용하는 투명도가 포함 된 배경 색상입니다. Android에서만 Alternative를 사용합니다.

Static

Light, Dark 테마에 상관없이 고정된 고유 색으로 테마가 변경되더라도 색상을 유지하여 해당 요소에 대비를 줄 때 사용합니다.

Inverse

테마의 대비가 반대인 요소에 적용하는 색상입니다. 주로 Tooltip과 같이 배경과 확실히 구분되어 정보를 인지 시키는 용도로 사용합니다.

Interaction

상호작용 요소에서 활성화가 가능하거나 상호작용이 불가능한 상태를 표현할 때 사용합니다.

Status

Positive, Cautionary, Negative 등 요소의 상태를 표현해야할 때 사용합니다.

Accent - Foreground

시각적 대비를 명확하게 유지하기 위해 앞쪽 요소에 사용하는 색상입니다.

Accent - Background

시각적 대비를 명확하게 유지하기 위해 배경과 같은 뒤쪽 요소에 사용하는 색상입니다.

Material

모달과 같이 층위가 생길 때 배경과의 구분을 위해 어둡게 표시해야할 때 사용합니다.