색상 스타일링 기준

색은 꾸미기 전에 역할부터 정합니다

본문, 면, 상태 표시를 나누면 어떤 속성에 어떤 색을 써야 하는지 빠르게 결정할 수 있습니다.

읽는 영역은 차분하게

본문은 충분히 어두운 글자색을 쓰고, 강조 색은 버튼, 링크, 경고처럼 의미가 있는 부분에만 짧게 사용합니다.

본문 대비
배경 구분
상태 강조
color

글자를 읽게 할 때

본문은 배경과 명도 차이를 크게 잡고, 링크나 중요 단어만 브랜드 색으로 제한합니다.

background-color

영역을 나눌 때

카드, 알림, 섹션처럼 면을 구분할 때 사용합니다. 진한 배경에는 밝은 글자색을 함께 정합니다.

border-color

상태를 표시할 때

선택, 오류, 포커스처럼 가장자리만 강조하고 싶을 때 좋습니다. 색만 믿지 말고 문구도 함께 둡니다.

실수 방지

색 이름을 즉흥적으로 늘리기보다 역할 이름을 먼저 정하세요. 같은 의미에는 같은 색을 반복해야 사용자가 빠르게 학습합니다.