캐시노트

72px 국문 한 줄을 파란 지면에 통째로 앉히고, 그 아래를 56→44→40으로 내려가는 국문 제목 계단으로만 끌고 간다.

캐시노트는 라이브러리에서 국문 제목의 비중이 가장 높은 사이트입니다. 홈의 제목이 히어로 72px부터 마감 CTA 40px까지 전부 국문이고 영문 제목이 한 개도 없어서, 국문 대형 조판의 크기 계단을 통째로 볼 수 있습니다. 파란 지면(#2D91FF)으로 열고 닫으면서 가운데는 흰색과 아주 옅은 회백색만 쓰는 지면 운용도 참고할 만합니다. 다만 자간을 지정한 단이 하나도 없어 국문 자간 규칙은 여기서 배울 수 없고, 약관·공지 페이지는 웹폰트 없이 OS 폰트로 렌더되므로 본문 조판의 근거로는 쓰지 마세요.

https://cashnote.kr

Color Palette

Primary

Label

Fill

Line

Background

Accent

Typography

Pretendard · 400 / 600 / 700display·heading·body·ui — 마케팅 홈 한글 100%

Apple SD Gothic Neo · 400 / 500 / 600 / 700약관·공지·게시판 템플릿의 한글 전부

.SF NS · 400 / 600약관·공지 템플릿의 라틴·숫자

Type Scale제목 계단은 72 → 56 → 44 → 40이고 네 단 전부 weight 700 · 국문이다(영문 제목 0)

display72px · 700 · 1.19

다람쥐 헌 쳇바퀴

h256px · 700 · 0.82

다람쥐 헌 쳇바퀴

h344px · 700 · 1.27

다람쥐 헌 쳇바퀴

h440px · 700 · 1.3

다람쥐 헌 쳇바퀴

lead22px · 400 · 1.64

다람쥐 헌 쳇바퀴

body20px · 400 · 1.6

다람쥐 헌 쳇바퀴

button-lg19px · 700 · 1.37

다람쥐 헌 쳇바퀴

ui16px · 600 · 1.63

다람쥐 헌 쳇바퀴

caption14px · 400 · 1.57

다람쥐 헌 쳇바퀴

micro13px · 600 · 1.54

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	템플릿별로 갈린다. 마케팅 홈은 Pretendard(자체 호스팅 3웨이트 서브셋)가 한글 2,456글리프를 100% 그린다. 약관·공지·게시판 5개 템플릿은 Apple SD Gothic Neo(OS 폰트)가 100% 그린다(term/terms 각 39,282 · id 6,645 · notice 5,191 · protection 537). 사이트 합계 103,217글리프 중 88.1%가 OS 폰트인 것은 약관 페이지의 글자 수가 압도적이기 때문이지 홈의 조판과는 무관하다
hangulWeights	Pretendard 기준 400 6,275 · 600 2,870 · 700 3,135글리프. 홈만 보면 400 1,882 · 600 574이고 히어로 72px만 700이다. 500 웨이트는 Pretendard 쪽에 없다(OS 폰트 쪽에만 4,706)
body	22px/400 lh1.64(히어로 부제·후기 인용) · 20px/400 lh1.60(기능 설명). 자간 0
sub	20px/600 lh1.60 — 같은 크기에서 웨이트만 올려 부제를 만든다(600이 8회로 400의 2배)
label	16px/600 lh1.63(버튼·카드 라벨) · 14px/400 lh1.57(푸터) · 13px/600 lh1.54(메타)
mixing	홈은 사실상 국문 단일이다 — 한글 2,456 대 라틴 1,188글리프이고 그 라틴도 전부 같은 Pretendard가 그린다. 숫자·영문을 위한 별도 서체가 없다
hangulHeadings	있음 — 홈의 모든 제목이 국문이다. 72px/700 히어로 '내 사업이 채워지는 모든 순간, 캐시노트'(y0 h1020, bg #2D91FF)와 같은 72px/700 중반 선언 '사업의 시작부터 끝까지 사장님과 함께합니다.'(y10045 h800), 56px/700 섹션 제목 4개('창업을 준비하는 사장님들을 위한 첫걸음'·'매일 마주하는 매장 운영을 더 쉽고 편리하게'·'오늘도 한걸음 더, 사업을 성장시켜보세요'·'직접 사용해본 사장님들이 말하는 캐시노트'), 44px/700 기능 제목 6개, 40px/700 마감 CTA. 영문 제목 0개
verdict	국문 히어로·대형 제목 레퍼런스로 유효하고, 라이브러리에서 국문 제목의 비중이 가장 높은 축이다 — 72·56·44·40 네 단이 전부 국문 700이고 영문 제목이 하나도 없어 국문만으로 위계를 세운 계단을 통째로 볼 수 있다. 한계는 두 가지다. ① 자간 규칙이 0종이라 국문 대형 조판에서 가장 자주 필요한 트래킹 값을 여기서 가져올 수 없다(72px에도 자간 0). ② 약관·공지 템플릿은 웹폰트 없이 OS 폰트로 렌더되므로 본문·목록 조판의 근거로 쓰지 않는다 — 이 사이트에서 인용할 수 있는 조판은 홈 템플릿에 한정된다
rendered	Apple SD Gothic Neo ×90937 · Pretendard ×9410 · Pretendard SemiBold ×2870

영문 · Latin폴백

latinFont	.SF NS 19,041글리프(58.1%) · Apple SD Gothic Neo 7,371글리프(22.5%) · Pretendard 6,370글리프(19.4%) · Lucida Grande 2글리프(0.0%)
latinWeights	실측 페이스 SemiBold
share	라틴 32,784글리프 / 한글 103,217글리프 — 지면의 24.1%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일 단이 라틴 전용 서체로 지정된 곳 없음 — 라틴은 국문 서체 또는 폴백이 그린다
mixing	국영문 혼용 노드 1,324개(전체 2,965개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	.SF NS 폴백(58.1%)
verdict	영문 전용 서체 없음(폴백) — 라틴을 .SF NS 58.1%가 그리지만 전부 OS·브라우저 기본 페이스다. 서체를 고른 결과가 아니라 스택이 흘러간 결과이므로 디자인 결정으로 인용하지 말 것
sharedWithKorean	국문과 같은 서체: Apple SD Gothic Neo · Pretendard
rendered	.SF NS ×19041 · Apple SD Gothic Neo ×7371 · Pretendard ×5940 · Pretendard SemiBold ×430 · Lucida Grande ×2

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	8px
Max width	1040px
Docs width	900px
Section gap	대부분의 섹션은 padding 0이고 섹션 높이(192·280·366·492·600·699·756·800·896)가 그대로 간격이 된다. padding을 쓰는 곳은 히어로(260/282)와 성장·후기 두 섹션(200/200)뿐이다
Header	nullpx static
Grid Cards	기능 카드 500×114 radius 20 ×4 (섹션 3·8·12) · 후기 카드 520×210 4개 2열(520×2=1040) · 통계 219×99 3열 거터 100 · 앱 화면 387×785 3개
Grid Slider	히어로 아래 이미지 슬라이더 940×600 12장, 거터 97 (섹션 4, class slider-container)
Card Padding	카드 자체 치수만 실측됐다 — 내부 여백 미확인
Button Padding	0×12 r12 (헤더 CTA 16/600) · 0×16 r16 (앱 다운로드 19/700) · 0×24 r16 (컨설턴트 19/600) · 12×28 r12 (앱 다운로드 16/600)

Border Radius

Role	Value	Preview
hairline	3px	22회 · 메뉴 열기/닫기 아이콘
small	4px	64회 · 인라인 이미지·이모지
—	8px	1회 · 관측만
button	12px	21회 · 헤더 CTA·앱 다운로드 버튼
button-lg	16px	16회 · 히어로 큰 버튼 2종
standard	20px	116회 · 카드·이미지 표준 — 사이트 최다
modal	24px	4회 · 모달
circle	50%	44회 · 아이콘·아바타
pill	60px	8회 · 알약 버튼

Guidelines

국문 제목 계단을 72 → 56 → 44 → 40(전부 700)으로 놓는다. 홈의 모든 제목이 국문이고 영문 제목은 0이다
히어로와 마감 CTA를 같은 #2D91FF로 칠해 지면을 열고 닫는다(y0 h1020 · y12001 h522)
가운데 지면은 #FFFFFF와 #F9FBFC 두 장으로만 가고, 강조 구간에만 #CAE7FF를 깐다(3섹션)
카드·이미지 라운드는 20px 하나로 통일한다(116회). 카드 규격도 500×114·520×210 두 종뿐이다
본문 색은 #374151(10.31:1 ×836), 파란색 #2D91FF는 지면·버튼 배경과 큰 글자에만 쓴다
섹션 간격을 padding이 아니라 섹션 높이로 만든다 — 16섹션 중 14섹션이 padding 0이다
카드 진입은 1s ease [opacity, transform](×22)로 느리게 올린다 — 실측 이동량은 translateY 54.3px → 2.0px(약 52px)이고 opacity는 0.1에서 1로 간다

Don't

국문 자간을 이 사이트에서 가져오지 않는다 — 자간을 지정한 단이 0종이다(raw 38종 중 워드프레스 잔재 1종 제외)
약관·공지·게시판 템플릿의 조판을 본문 근거로 쓰지 않는다 — 웹폰트가 없고 Apple SD Gothic Neo(OS 폰트)가 한글을 100% 그린다
#2D91FF를 흰 지면 위 본문 글자색으로 쓰지 않는다(3.18:1 ×28, AA 미달). #728094(3.73:1)·#A4AEBA(2.25:1)도 마찬가지다
그림자로 면을 띄우지 않는다 — 그림자는 rgba(0,0,0,.3) 0 5px 15px 하나가 4회, 그라디언트는 0이다
CSS 변수의 54색 램프(mango·mint·grape…)를 브랜드 색으로 오해하지 않는다 — 마케팅 지면에 칠해진 채도색은 #2D91FF·#192D82 둘뿐이다
고정 헤더를 전제하지 않는다 — 홈 헤더는 높이 0 static이고 nav 라벨이 1개('캐시노트')뿐이다
버튼 라운드를 12·16·60으로 섞지 않는다 — 사이트가 그렇게 하고 있지만 규칙이 보이지 않는다