Color

표준화된 색상 및 사용 가이드를 제공하여 브랜드 색상을 정의합니다.
정형화된 색상 시스템을 통하여 사용자에게 일관성 있는 브랜드 경험을 제공하며, 효율적인 브랜드 인식을 돕습니다.

Brand Logo

기본 색상으로 선명한 바이올렛 색상인 T Blue를 메인으로 사용합니다.

SK B tv Color

B tv UI의 주요 색상은 브랜드 컬러인 T Blue를 기반으로 제작했습니다.
토널 팔레트를 활용하여 색상을 정의하고 포커스 컬러는 웹 접근성(WCAG)을 고려하여
밝은 화면과 어두운 화면에서 동일하게 사용할 수 있는 토널 팔레트의(5C5FFF)를 사용합니다.

  • WCAG AA Level Test

    WCAG AA(Web Content Accessibility Guidelines, AA Level) 테스트는 웹 사용의 접근성을 평가하기 위해 사용되는 테스트 기준입니다. WCAG는 웹 콘텐츠를 쉽게 ​​접근할 수 있도록 국제표준을 만들고, 사람들이 웹 콘텐츠에 더 쉽게 접근하고 이해할 수 있도록 지침을 제공합니다. AA 레벨을 준수하는 웹 콘텐츠는 다양한 장애를 가진 사용자들이 콘텐츠를 이해하고 활용할 수 있도록 도와줍니다.

Neutral Color

여러 가지 무채색의 색상으로 정의 내려져 있으며, UI 기본적인 구성 요소에 사용되나 주로 글자에 쓰이고 있습니다.

Error Color

오류, 경고, 주의, 장애와 같은 부정적인 메시지에 사용합니다.

Color Token

색상 값을 토큰화하여 디자인 파일과 코드에서 동일한 스타일 값이 사용되도록 합니다.

Surface Color

사용자 인터페이스 요소의 배경의 색상을 나타내는 개념입니다.
UI 디자인에서 요소의 표면에 적용되는 색상을 의미하며 주로 배경 패널, 카드, 버튼, 입력 필드 등의 요소에 적용됩니다.
UI의 배경 느낌과 분위기를 결정하는데 중요한 역할을 합니다.
B tv의 경우 다양한 환경에서 노출되는 경우가 많기 때문에, 밝은 환경과 어두운 환경에 모두 적합한 색상을 사용해야 합니다.

  • Naming Rule

    색상 값과 투명도의 중첩으로 만들어집니다.

  • Type

    정의된 색상을 각 UI의 맥락에 맞게 선택하여 사용합니다.

Blur

겹쳐지는 요소의 구분을 위해, 흐림 효과를 사용해야 할 경우 Blur 20으로 통일하여 적용합니다.

  • Brand Logo
  • SK B tv Color
  • Neutral Color
  • Error Color
  • Color Token
  • Surface Color
  • Blur