교보문고 내에서 사용하는 일반 색상이며, KDS 구성 요소에 사용되는 기본 색상입니다. 브랜드 컬러를 대표하는 메인 컬러로, Primary palette의 코어 컬러는 교보문고 서비스 기본 작업 색상으로 사용되는 대표 색상입니다. 모든 색상의 투명도는 조정할 수 없습니다. Primary palette 중 새로운 기본 색상 세트를 생성하거나 교보문고 앱의 기본 색상을 상속하여 사용할 수 있습니다. 색상 단계는 색상 패턴을 정의하는 데 도움이 되며, 각 단색 팔레트 내에서 수직으로 동일한 시스템을 사용하여 전체 색조에 걸쳐 수평 값을 공유합니다. 색상 단계를 사용하여 시스템의 모든 색상 레인에 규칙을 복제할 수 있습니다. 각 색상의 톤에는 100부터 900까지의 값이 부여됩니다.

교보문고 컬러 의미론에는 Informative, Accent, Negative, Positive가 포함됩니다. 의미론적 색상을 사용하여 구성 요소의 모양을 명확하고 예측 가능하게 전달합니다.의미론적 의미를 지닌 색상을 사용할 경우 색상을 보거나 구분할 수 없는 사용자가 의미를 잃지 않도록 텍스트나 아이콘도 표시해야 합니다. 핫트랙스 red-700과 부정의 의미 red를 혼동하지 않도록 주의합니다.

보조 색상은 아이콘, 태그, 상태 배지, 일러스트레이션과 같은 보조 UI 요소에 사용됩니다. 각 색상에는 기본 밝은 색상과 어두운 색상이 있습니다. 디자인에 색상이 필요한 경우, 작은 UI 요소에 기본 색상 변형을 사용해야 합니다. 가능하면 사용자 정의 색상을 사용하세요. 보조 팔레트를 사용할 때는 항상 핵심 색상 중 하나를 포함하는 것을 권장하며, 주의를 끌고 디자인에 조화를 가져오며, 팔레트에 균형을 제공하는 데 사용되어야 합니다.

10% 이상의 불투명도는 가독성을 돕기 위해 희미한 효과와 같은 UI 구성 요소에 적용될 수 있습니다. Opacity 값은 90~10 사이만 허용됩니다. 장식용 UI에만 불투명도를 사용하고, 기능적 UI에는 절대 사용하지 않습니다. 비활성화 또는 고유한 시각적 설명이 특별히 필요한 경우를 제외하고는 텍스트에 불투명도를 사용해서는 안 됩니다. 투명도를 최소화하여 사용하고, 명암비를 수동으로 확인합니다.

색상 시스템은 모든 사용자가 인지하고, 작동하며, 이해할 수 있고, 견고하다는 원칙을 준수해야 합니다. 색상 대비 규칙을 최대한 준수하여 원칙에 따라 사용자가 불편함을 느끼지 않도록 해야 합니다.

• 기능을 제공하는 경우 대비를 준수합니다. 색상 대비는 텍스트, 상태 표시기, 목적 표시기 및 상호 작용을 이해하는 데 중요한 것으로 해석될 수 있는 모든 항목에 적용됩니다.
• 텍스트에는 항상 대비가 필요합니다. 텍스트 대비는 4.5:1이 필요합니다(큰 경우 제외). 그 외 모든 항목은 3:1입니다.
• 의미를 전달하려면 색상에만 의존하지 마세요. 구성 요소의 상태를 나타내는 유일한 지표로 색상을 사용하지 않고 색상은 기능적인 것에 대한 주요 지표가 되어서는 안 됩니다.
• 웹접근성 지침 참고(링크)