카카오페이

흰 지면·회청 틴트·먹 밴드 세 색면만 갈아 끼우고, 국문 63px 한 줄로 연다 — 채도는 형광펜 노랑 14px가 전부.

카카오페이 사이트는 흰 지면과 회청 틴트, 먹색 밴드 세 가지 색면만 갈아 끼우는 절제된 인상입니다. 채도가 있는 색은 제목 아래 형광펜처럼 깔리는 노란 줄 세 번이 전부입니다. 국문 히어로가 63px로 서지만 굵기는 500에서 멈추고 본문은 얇은 300을 20px로 쓰기 때문에, 제목과 본문의 대비를 크기가 아니라 굵기로 만듭니다. 얇은 국문 본문과 큰 국문 제목을 함께 쓰는 조판, 그리고 서비스 소개 여덟 페이지가 같은 틀을 반복하는 구조를 참고하기 좋습니다.

https://www.kakaopay.com

Color Palette

Label

Fill

Line

Background

Static

Accent

Typography

Noto Sans KR · 300 / 400 / 500 / 600 / 700display·heading·body·ui — 한글 100%, 라틴 100%

.SF NS · 400fallback

Type Scale1440 기준

display63px · 500 · 1.15

다람쥐 헌 쳇바퀴

h1-band45.5px · 600 · 1.39

다람쥐 헌 쳇바퀴

h1-page40px · 500 · 1.35

다람쥐 헌 쳇바퀴

h236px · 500 · 1.39

다람쥐 헌 쳇바퀴

h336px · 600 · 1.39

다람쥐 헌 쳇바퀴

lead26px · 500 · 1.46

다람쥐 헌 쳇바퀴

sub22px · 500 · 1.45

다람쥐 헌 쳇바퀴

body20px · 300 · 1.63

다람쥐 헌 쳇바퀴

ui16px · 500 · 1.15

다람쥐 헌 쳇바퀴

caption14px · 300 · 1.57

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Noto Sans KR — 자체 호스팅 5파일(NotoSans-Light/Regular/Medium/Bold/Black.woff), 한글 4,357글리프 100%. 선언 1순위(declaredFirstFamilies)도 Noto Sans KR이라 선언과 렌더가 일치한다
hangulWeights	300 → Light 2,949글리프(67.7%) · 500 → Medium 657(15.1%) · 600 → Bold 페이스 388 · 400 → Regular 299 · 700 → Black 페이스 63. 600·700은 선언보다 한 단계 무거운 페이스(700·900)가 그린다
body	20px w300 lh1.63 ls−0.2px (count 10) · 보조 본문 14px w300 lh1.57 ls0 (count 36, 최다)
sub	26px w500 lh1.46 ls−0.4px — 배너 리드 560px 폭 3행(행 높이 33)
label	16px w500 lh1.15 ls−0.2px(nav·버튼 25회) · 14px w700(스킵 링크 9회, Black 페이스로 렌더)
mixing	국영문 단일 서체. 라틴 324글리프도 Noto Sans KR Light(180)·Medium(144)이 그리고 .SF NS는 9글리프뿐이라, 영문 전용 디스플레이 서체가 없다. 로고(92×22 인라인 SVG)만 예외
hangulHeadings	있다. 홈 h1 ‘마음놓고 금융하다’ 63px/500(1920에서 72px/500 lh1.15) · 홈 먹 밴드 45.5px/600 ls−0.53 · 서비스 8페이지 배너 h1 40px/500 · 피처 타일 36px/600 ×16. 국문이 디스플레이를 전담한다
verdict	국문 히어로·대형 제목 레퍼런스로 유효하다 — 63px 국문 한 줄 히어로가 실재하고 웨이트 500, 자간은 0이다. 참고할 규칙: ① 대형 국문은 500~600에서 멈춘다(700 Black은 스킵 링크 14px에만 63글리프) ② 자간 음수는 20px 이상에서만(−0.9~−1.5%), 14px 이하는 0 ③ 본문을 Light 300 20px lh1.63으로 잡아 제목과 본문의 대비를 크기가 아니라 웨이트(500 vs 300)로 만든다. 주의: 본문 Light 300 + 보조색 #707478 조합은 #F8F9FA 위에서 4.47:1로 AA에 걸린다
rendered	Noto Sans KR Light ×4126 · Noto Sans KR Medium ×929 · Noto Sans KR Bold ×586 · Noto Sans KR Regular ×552 · Noto Sans KR Black ×108

영문 · Latin국문과 동일

latinFont	Noto Sans KR 1,200글리프(99.2%) · .SF NS 10글리프(0.8%)
latinWeights	실측 페이스 Light · Medium · Bold · Regular · Black
share	라틴 1,210글리프 / 한글 6,301글리프 — 지면의 16.1%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Noto Sans KR를 쓰는 단: display 63px/500 · h1-band 45.5px/600 · h1-page 40px/500 · h2 36px/500 · h3 36px/600 · lead 26px/500 · sub 22px/500 · body 20px/300 · ui 16px/500 · caption 14px/300
mixing	국영문 혼용 노드 253개(전체 709개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 16.1%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 99.2%를 그리는 Noto Sans KR가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: Noto Sans KR
rendered	Noto Sans KR Light ×825 · Noto Sans KR Medium ×260 · Noto Sans KR Bold ×95 · Noto Sans KR Regular ×11 · .SF NS ×10 · Noto Sans KR Black ×9

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	8px
Max width	1200px
Docs width	916px
Section gap	서비스 페이지 피처 타일 간격 496px(y 834→1330→1826→2322)
Header	84px 홈 absolute · 서비스 8페이지 fixed
Grid Home	LineGridVertical 3열(좌·중·우) 세로 괘선이 y900부터 3,490px을 관통. 콘텐츠 폭 916(후보 916×5 · 1308×2 · 864×1 · 812×1)
Grid Logo	로고 타일 240×130, 멤버십 9열 · 청구서 8열, 이미지 70장, 섹션 높이 793
Card Padding	피처 타일 336px 고정 높이 · 배너 리드 560×33 3행 · 유의사항 행 1200×28 7개 · 홈 라우트 숏컷 148×84 7열
Button Padding	8px(아이콘 알약) · 0 22px(앱스토어 알약 18px/500) · 5px 10px(스킵 링크 14px/700)

Border Radius

Role	Value	Preview
square	0px	0회 · 이미지·카드·타일·로고 그리드 기본값 — radius 목록에 안 잡히는 것이 기본이라는 뜻
small	4px	12회 · 버튼
half-pill	9999px 0px 0px 9999px / 0px 9999px 9999px 0px	2회 · 좌·우 반쪽 알약 div 각 1회 (슬라이더 캡 추정, 미확인)
pill	9999px	23회 · ‘자산관리·보험·대출 페이지로 이동’·‘카카오페이증권 보도자료’ CTA와 영상 컨트롤

Guidelines

지면은 흰색 #FFFFFF, 구역 전환은 틴트 #EFF2F4(배너 479·마감 680)와 먹 밴드 #2E3338(795·448) 두 색면으로만 만든다
국문 디스플레이를 웨이트 500으로 잡는다 — 홈 63px/500, 서비스 배너 40px/500. 600은 밴드 제목(45.5)과 피처 타일(36)에만
본문은 Noto Sans KR Light 300 20px lh1.63 자간 −0.2px. 한글 렌더의 67.7%가 이 웨이트다
자간은 20px 이상에서만 음수(−0.9~−1.5%), 14px 이하는 0으로 둔다
반복 섹션은 같은 치수로 찍는다 — 피처 타일 336px 고정, 세로 간격 496px, 마지막 섹션 앞만 576px
라운드는 버튼에만 준다(4px 12회·알약 9999px 23회). 이미지·카드·로고 타일은 0px
CTA는 테두리 알약으로 — 흰 지면 1px rgba(6,11,17,.56), 어두운 면 1px #606A74