스타일 가이드
타이포그래피
디스플레이1
무게: semiBold, Bold, extraBold
글꼴-가족: Ubuntu
글꼴 크기: 40픽셀
줄 높이: 48픽셀
글자 간격: 보통
디스플레이 1
굵게
h1
무게: semiBold
글꼴-가족: Ubuntu
글꼴 크기: clamp(32px, 8vw, 40px)
줄 높이: clamp(40px, 8vw, 48px)
글자 간격: 보통
제목1
굵은 글씨
MH1
굵게
h2
무게: semiBold
글꼴-가족: Ubuntu
글꼴 크기: clamp(28px, 8vw, 32px)
줄 높이: clamp(32px, 8vw, 40px)
글자 간격: 보통
H2
중간
MH2
중간
h3
무게: semiBold
글꼴-가족: Ubuntu
글꼴 크기: clamp(24px, 8vw, 28px)
줄 높이: clamp(32px, 8vw, 32px)
글자 간격: 보통
H3
중간
MH3
중간
h4
무게: semiBold
글꼴-가족: Ubuntu
글꼴 크기: clamp(20px, 8vw, 24px)
줄 높이: clamp(24px, 8vw, 32px)
글자 간격: 보통
H4
중간
MH4
중간
h5
무게: semiBold
글꼴-가족: Ubuntu
글꼴 크기: clamp(16px, 8vw, 20px)
행 간격: clamp(24px, 8vw, 24px)
글자 간격: 보통
H5
중간
MH5
중간
h6
무게: semiBold
글꼴-가족: Ubuntu
글꼴 크기: clamp(14px, 8vw, 16px)
줄 높이: clamp(16px, 8vw, 24px)
글자 간격: 보통
H6
중간
MH6
중간
서브헤더1
체중: 일반
글꼴-가족: Ubuntu
폰트 크기: 24px
줄 높이: 32px
글자 간격: 보통
부제 1
정규
서브헤더2
체중: 일반
글꼴-가족: Ubuntu
글꼴 크기: 20픽셀
행 높이: 24픽셀
글자 간격: 보통
부제 1
정규
본문1
두께: 일반, 세미 볼드
글꼴-가족: Ubuntu
글꼴 크기: 16픽셀
줄 높이: 24픽셀
글자 간격: 보통
본문 1
정상
본문 1
세미 굵게
본문 1
일반 밑줄
body2
두께: 일반, 세미 볼드
글꼴-가족: Ubuntu
글꼴 크기: 14px
행 높이: 20px
글자 간격: 보통
본문 2
일반
본문 2
세미 볼드
본문 2
일반 밑줄
자막1
두께: 일반, 세미 볼드
글꼴-가족: Ubuntu
글꼴 크기: 12px
행 높이: 16px
글자 간격: 보통
캡션 1
정상
캡션 1
세미 볼드
캡션 1
일반 밑줄
자막2
두께: 일반, 세미 볼드
글꼴-가족: Ubuntu
글꼴 크기: 10픽셀
행 높이: 12픽셀
글자 간격: 보통
캡션 2
일반
캡션 2
세미 볼드
캡션 2
정상 밑줄
오버라인
체중: 일반
글꼴-가족: Ubuntu
글꼴 크기: 14px
줄 높이: 16px
글자 간격: 보통
font-variant: small-caps
오버라인
일반
오버라인
세미 볼드
버튼
체중: 중간
폰트 패밀리: 우분투
글꼴 크기: 16픽셀
줄 높이: 24픽셀
글자 간격: 보통
버튼
중간
스타일 가이드
색상
중립
대부분의 UI에 사용되는 중립적인 색조.
기본 - 픽턴 블루
UI의 주요 색조로 사용되는 기본 색조입니다.
세컨더리 - 체리색
UI의 주요 색조로 사용되는 기본 색조입니다.
억양
성공, 오류, 경고 및 정보와 같은 의미적 목적을 전달하기 위한 강조 색상 및 톤.
스타일 가이드
효과
그림자 부각
작은
작은
중간
대형
엑스트라 라지
블러
없음
작은
중간
대형
엑스트라 라지
스타일 가이드
아이콘
스타일 가이드
간격
4픽셀
8픽셀
16px
24픽셀
32픽셀
48픽셀
64픽셀
96픽셀
128픽셀
192픽셀
256픽셀
384픽셀
512픽셀
640픽셀
768픽셀