Prev
Next
Back
기본적으로 Noto Sans KR
를 사용하며, 한/영 통일된 텍스트 타입을 활용하고 있습니다.
반응형 정책에 따라 PC
, Tab
, Mobile
에서 대응되는 텍스트 규정을 적용합니다.
타이틀 위치에 활용되는 타입이며, 항상 Bold로 스타일을 정의합니다.
위계에 따라 Extra Large
, Large
, Default
, Small
사이즈에 적용 가능합니다.
본문 및 일반 컨텐츠 영역에 활용되는 타입입니다. 항상 Regular로 스타일을 정의합니다.
위계에 따라 Extra Large
, Large
, Default
, Small
사이즈를 활용할 수 있습니다.
버튼 컴포넌트 영역에 활용되는 텍스트 타입을 정의합니다.
일반적으로 Bold 스타일을 적용하며, Default
, Small
사이즈를 활용할 수 있습니다.
컨텐츠 영역 내에서 하위 연결 페이지 이동 및, 링크 이동 등에 활용되는 텍스트 타입입니다.
Underline으로 나타내며 일반적으로 Regular 스타일을 적용합니다.
Default
, Small
사이즈로 활용 가능합니다.
프로덕트 내에서 강조 요소로 활용되는 가장 큰 사이즈의 텍스트입니다.
메인 타이틀, 메인 슬라이드 배너 등에 컨텐츠 요소로 활용됩니다.
페이지 타이틀 등의 요소로 활용되는 텍스트 사이즈입니다.
Default 사이즈만으로 표기하기 어려운 Depth의 컨텐츠 위계 구조를 가지고 있을 경우 주로 활용합니다.
가장 기본적으로 활용되는 텍스트 사이즈를 정의합니다.
타이틀, 본문 등 컨텐츠 페이지에 전반적으로 사용합니다.
Alert 문구, 유효성 검사, 하위 정보, 푸터 등의 정보 고시에 활용되는 텍스트 사이즈입니다.
텍스트에는 Black, Gray4, Brand Color, White 색상이 활용됩니다.
컨텐츠 위계 구조에 따라 Black
, Gray4
색상과 Bold, Regular 타입을 순차적으로 사용합니다.
Sub Text 또는 입력안내와 같은 '정보표시' 목적의 텍스트는 Gray4
, 이외의 활성화 상태에서는 모두 Black
컬러를 사용합니다.
특정 영역을 강조해 표기하는 경우 Primary
컬러와 같은 Brand Color 및 Bold 타입의 텍스트 정책을 사용할 수 있습니다.
유효성 검사 등의 Infomation 영역에는 Alert
컬러를 활용할 수 있습니다.
Text Input 등의 컴포넌트 영역의 인포메이션, 비활성화와 같은 State 변경에는 Gray 3
색상을 적용합니다.
텍스트 컬러는 라이트모드
와 다크모드
에 따라 1:1 대응되지만,
예외적으로 Color Component 내부에는 항상 ****고정된 Fixed Text Color를 적용합니다.
(해당 컬러 적용시, 모드 변경에도 1:1 대응하지 않습니다.)
텍스트 색상 정책은 Color - Text Color 에서도 확인할 수 있습니다.
Regular 와 Bold 두 가지 Font Weight를 사용합니다.
한글 영문 동일하게 0px 자간을 사용합니다.
디바이스 별 반응형 정책에 대응하는 텍스트 종류를 정의합니다.