디자인시스템

이 누리집은 대한민국 공식 전자정부 누리집입니다.

색상

Primary 색상은 인터페이스에서 가장 주목받는 요소로 주요 액션이나 중요한 정보를 강조하는 데 사용한다.

주요 액션이나 중요한 정보를 강조하는 프라이머리 색상 (primary color) 팔레트로, Tints(밝은톤), Base(기본톤), Shades(어두운톤)로 구성됨

Secondary 색상은 primary 색상과 보조를 맞추며, 인터페이스에서 전체적인 보조적인 역할을 한다. 덜 중요한 액션을 표시하거나 구분을 위한 배경으로 사용한다.

덜 중요한 액션을 표시하거나 구분을 위한 배경으로 사용하는 세컨더리 색상 (secondary color) 팔레트로, Tints(밝은톤), Base(기본톤), Shades(어두운톤)로 구성됨

사용자가 주목해야 하는 특정 상태나 이벤트 또는 알림 요소에만 강조(accent color)용으로 5% 이하 비율로 사용한다. 정보의 우선순위를 시각적으로 부각하며, 제한적인 사용으로 과부하를 방지한다.

정보의 우선순위를 시각적으로 부각하며, 제한적인 사용으로 과부하를 방지하는 강조 색상 (accent color) 팔레트로, Tints(밝은톤), Base(기본톤), Shades(어두운톤)로 구성됨

Gray 색상은 주로 배경, 텍스트, 구분 선에 사용되며, 시각적 집중을 방해하지 않고 콘텐츠에 초점을 맞추도록 도와주는 중립적인 색상이다.

콘텐츠에 초점을 맞추도록 도와주는 중립적인 그레이 색상 (gray color) 팔레트로, Tints(밝은톤), Base(기본톤), Shades(어두운톤)로 구성됨

위험(danger)

‘Danger’ 색상은 오류나 위험을 나타내며, 빨간색 계열을 사용하여 사용자에게 즉각적인 주의를 전달한다.

시스템 색상 (system color) 중 오류나 위험을 나타내는 빨간색 계열 팔레트로, Tints(밝은톤), Base(기본톤), Shades(어두운톤)로 구성됨

주의(warning)

‘Warning’ 색상은 잠재적 위험이나 주의가 필요한 상황을 나타내며, 눈에 잘 띄는 노란색 계열을 사용해 사용자에게 경고의 의미를 전달한다.

시스템 색상 (system color) 중 잠재적 위험이나 주의를 나타내는 노란색 계열 팔레트로, Tints(밝은톤), Base(기본톤), Shades(어두운톤)로 구성됨

성공(success)

‘Success’ 색상은 성공을 의미하며, 작업 완료 또는 긍정적 결과를 표시하는 데 사용된다. 일반적으로 녹색 계열을 사용하여 안정감과 긍정적인 피드백을 제공한다.

시스템 색상 (system color) 중 작업 완료 또는 긍정적 결과를 표시하는 녹색 계열 팔레트로, Tints(밝은톤), Base(기본톤), Shades(어두운톤)로 구성됨

안내(information)

‘Information’ 색상은 참고 정보나 안내 메시지를 전달할 때 사용하며, 파란색 계열로 사용자에게 추가 정보를 제공한다.

시스템 색상 (system color) 중 참고 정보나 안내 메세지를 전달하는 파란색 계열 팔레트로, Tints(밝은톤), Base(기본톤), Shades(어두운톤)로 구성됨