Prev

Colors

Next

Icons

Back

Tok.D _ Design System (Beta)


https://s3-us-west-2.amazonaws.com/secure.notion-static.com/5b9c7362-ac8b-4b4c-bb19-a0c3db6238e6/Untitled.png

Setting - Typography

Typography

기본적으로 Noto Sans KR 를 사용하며, 한/영 통일된 텍스트 타입을 활용하고 있습니다.

반응형 정책에 따라 PC, Tab, Mobile 에서 대응되는 텍스트 규정을 적용합니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ab7271f3-03b2-41b3-bc9a-a369b13b656c/_2021-03-12__11.22.15.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/6f0e3140-e50f-4071-9a2b-167f09dcfd80/_2021-03-12__11.26.42.png

1)Text Type


https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ef11fece-7c2a-413f-ae1a-127f0f79427a/_2021-03-12__12.18.12.png

Title

타이틀 위치에 활용되는 타입이며, 항상 Bold로 스타일을 정의합니다.

위계에 따라 Extra Large, Large, Default, Small 사이즈에 적용 가능합니다.

Text

본문 및 일반 컨텐츠 영역에 활용되는 타입입니다. 항상 Regular로 스타일을 정의합니다.

위계에 따라 Extra Large, Large, Default, Small 사이즈를 활용할 수 있습니다.

Button

버튼 컴포넌트 영역에 활용되는 텍스트 타입을 정의합니다.

일반적으로 Bold 스타일을 적용하며, Default, Small 사이즈를 활용할 수 있습니다.

Active

컨텐츠 영역 내에서 하위 연결 페이지 이동 및, 링크 이동 등에 활용되는 텍스트 타입입니다.

Underline으로 나타내며 일반적으로 Regular 스타일을 적용합니다.

Default, Small 사이즈로 활용 가능합니다.

2)Text Size


https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4114f706-d9f3-4ad5-bf6a-377ebc51f7b6/_2021-03-12__12.03.35.png

Extra Large

프로덕트 내에서 강조 요소로 활용되는 가장 큰 사이즈의 텍스트입니다.

메인 타이틀, 메인 슬라이드 배너 등에 컨텐츠 요소로 활용됩니다.

Large

페이지 타이틀 등의 요소로 활용되는 텍스트 사이즈입니다.

Default 사이즈만으로 표기하기 어려운 Depth의 컨텐츠 위계 구조를 가지고 있을 경우 주로 활용합니다.

Default

가장 기본적으로 활용되는 텍스트 사이즈를 정의합니다.

타이틀, 본문 등 컨텐츠 페이지에 전반적으로 사용합니다.

Small

Alert 문구, 유효성 검사, 하위 정보, 푸터 등의 정보 고시에 활용되는 텍스트 사이즈입니다.

3)Text Color


텍스트에는 Black, Gray4, Brand Color, White 색상이 활용됩니다.

컨텐츠 위계 구조에 따라 Black , Gray4 색상과 Bold, Regular 타입을 순차적으로 사용합니다.

Sub Text 또는 입력안내와 같은 '정보표시' 목적의 텍스트는 Gray4, 이외의 활성화 상태에서는 모두 Black 컬러를 사용합니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/989697a2-e8d8-4656-8638-099e295ff2cb/_2021-03-15__2.37.55.png

특정 영역을 강조해 표기하는 경우 Primary 컬러와 같은 Brand ColorBold 타입의 텍스트 정책을 사용할 수 있습니다.

유효성 검사 등의 Infomation 영역에는 Alert 컬러를 활용할 수 있습니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/48c383a6-ae2a-4869-a147-9c8f82d990ea/_2021-03-12__12.57.38.png

Text Input 등의 컴포넌트 영역의 인포메이션, 비활성화와 같은 State 변경에는 Gray 3 색상을 적용합니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9f308aad-2818-4629-a05f-689da08d2413/_2021-03-12__2.04.49.png

텍스트 컬러는 라이트모드다크모드 에 따라 1:1 대응되지만,

예외적으로 Color Component 내부에는 항상 ****고정된 Fixed Text Color를 적용합니다.

(해당 컬러 적용시, 모드 변경에도 1:1 대응하지 않습니다.)

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/387978ee-dd97-4ff4-b610-a0a068fd4f60/_2021-03-12__10.41.29.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/66390600-edc1-4c90-866a-124103e285ba/More_03__4.png

텍스트 색상 정책은 Color - Text Color 에서도 확인할 수 있습니다.

4)Text Weight


Regular 와 Bold 두 가지 Font Weight를 사용합니다.

5)Letter Spacing


한글 영문 동일하게 0px 자간을 사용합니다.

6)Device


디바이스 별 반응형 정책에 대응하는 텍스트 종류를 정의합니다.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/90fbf9d1-049d-4aef-b3d9-72033a3bc02a/_2021-03-12__2.31.52.png

PC

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a1812773-450c-4535-9bcb-56aa8b6bbe2c/_2021-03-12__12.23.42.png

Tablet

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/16a8075f-a687-4a31-8ee8-fe9da673d77f/_2021-03-12__12.23.53.png

Mobile

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/601a5e87-63e4-4de5-9c3b-7c631b6d0f42/_2021-03-12__12.24.06.png