색상

기본 흰색 표면과 반전 텍스트에 사용하는 가장 밝은 중립색입니다.

앱 canvas와 넓은 저강도 배경에 사용하는 중립색입니다.

보조 배경과 약한 상태 면에 사용하는 중립색입니다.

기본 구분선과 입력 경계에 사용하는 중립색입니다.

강한 구분선과 강조 경계에 사용하는 중립색입니다.

비활성 텍스트와 낮은 대비 아이콘에 사용하는 중립색입니다.

중간 강도의 보조 정보에 사용하는 중립색입니다.

읽기 가능한 보조 본문과 메타데이터에 사용하는 중립색입니다.

강한 보조 텍스트와 중립 상태 면에 사용하는 중립색입니다.

높은 대비가 필요한 제목과 아이콘에 사용하는 중립색입니다.

기본 본문과 핵심 제목에 사용하는 가장 어두운 중립색입니다.

파란 약한 action 배경에 사용하는 가장 밝은 파란색입니다.

파란 약한 hover 배경에 사용하는 파란색입니다.

키보드 focus ring에 사용하는 밝은 파란색입니다.

보조 파란 강조와 시각화에 사용하는 파란색입니다.

중간 강도의 파란 강조에 사용하는 파란색입니다.

focus 경계와 선택 강조에 사용하는 파란색입니다.

기본 주요 action 면에 사용하는 파란색입니다.

주요 action hover와 약한 action 텍스트에 사용하는 파란색입니다.

주요 action pressed 상태에 사용하는 파란색입니다.

가장 강한 파란 텍스트와 고대비 강조에 사용하는 파란색입니다.

오류와 위험의 약한 배경에 사용하는 밝은 빨간색입니다.

오류 상태의 보조 배경과 경계에 사용하는 빨간색입니다.

중간 강도의 오류 강조에 사용하는 빨간색입니다.

기본 위험 상태와 오류 action에 사용하는 빨간색입니다.

위험 상태 hover와 강한 오류 텍스트에 사용하는 빨간색입니다.

성공 상태의 약한 배경에 사용하는 밝은 초록색입니다.

성공 상태의 보조 배경과 경계에 사용하는 초록색입니다.

중간 강도의 성공 강조에 사용하는 초록색입니다.

기본 성공 상태와 확인 action에 사용하는 초록색입니다.

성공 상태 hover와 강한 성공 텍스트에 사용하는 초록색입니다.

앱과 문서 페이지의 가장 바깥 배경색입니다.

카드와 control이 놓이는 기본 surface 배경색입니다.

보조 구획과 약한 상태를 구분하는 배경색입니다.

본문과 핵심 제목에 사용하는 기본 텍스트 색상입니다.

설명과 메타데이터에 사용하는 보조 텍스트 색상입니다.

사용할 수 없는 control의 텍스트와 아이콘 색상입니다.

어두운 surface 위 텍스트와 아이콘에 사용하는 반전 색상입니다.

기능 아이콘의 기본 전경색으로 사용하는 색상입니다.

surface와 control의 기본 경계 색상입니다.

강조가 필요한 구분선과 control 경계 색상입니다.

focus된 control의 직접 경계 색상입니다.

페이지의 주요 action 기본 배경색입니다.

주요 action의 pointer hover 배경색입니다.

주요 action을 누르는 동안 사용하는 배경색입니다.

주요 action 배경 위 label과 icon 색상입니다.

낮은 강도의 action 기본 배경색입니다.

낮은 강도의 action hover 배경색입니다.

낮은 강도의 action 위 label과 icon 색상입니다.

오류와 위험 상태의 기본 강조 색상입니다.

오류와 위험 상태의 약한 배경색입니다.

성공과 완료 상태의 기본 강조 색상입니다.

성공과 완료 상태의 약한 배경색입니다.

중립 정보 상태의 기본 강조 색상입니다.

중립 정보 상태의 약한 배경색입니다.

강한 status 배경 위 label과 icon 색상입니다.

키보드 focus-visible 외곽 ring 색상입니다.