고혼진

흰 지면과 검정 영상 히어로 위에 브랜드 레드(#CE1324) 한 색만 올리고, 글자는 Pretendard 한 서체로 조용히 둔 뷰티 스토어.

고혼진은 카페24 기반의 뷰티 공식 스토어로, 지면은 흰색과 아주 옅은 웜 화이트(#FAF9F7)이고 홈 첫 화면만 전폭 검정 영상으로 엽니다. 색은 검정·흰색·회색에 브랜드 레드 한 가지만 얹어, 제품 사진과 푸터의 거대한 레드 워드마크가 색을 맡습니다. 국문 대형 제목은 브랜드 스토리 페이지의 얇은 Pretendard 제목에 한정되고 나머지 제목은 영문 대문자 라벨이라, 화장품·뷰티 브랜드의 절제된 스토어 구조(영상 히어로 → 카드 캐러셀 → 제품 분할 섹션 → 대형 워드마크 푸터)를 참고할 때 쓸 만합니다. 첫 화면 헤더가 투명 오버레이이므로 영상 위 흰 글자 내비게이션 처리를 볼 때 유용합니다.

https://www.kohonjin.com

Color Palette

Primary

Label

Background

Accent

Typography

Pretendard Variable · 400 / 500 / 600 / 700heading·body·ui, 한글 98.9%

Noto Sans KR Thin · 400 / 700폴백(한글 183글리프, 1.0%)

Roboto · 400 / 500 / 700링크·UI 소형(12–15px)

Apple SD Gothic Neo · 400OS 폰트 폴백(한글 36글리프)

Type Scalepx 기준은 layout

h1-brand55px · 400 · 1.2

다람쥐 헌 쳇바퀴

h2-lg39px · 600 · 1.26

다람쥐 헌 쳇바퀴

label-display38px · 700 · 1.2

다람쥐 헌 쳇바퀴

h2-feature36px · 700 · 1.2

다람쥐 헌 쳇바퀴

h332px · 500 · 1.3

다람쥐 헌 쳇바퀴

h2-media24px · 400 · 1.3

다람쥐 헌 쳇바퀴

h420px · 500 · 1.3

다람쥐 헌 쳇바퀴

body16px · 400 · 1.55

다람쥐 헌 쳇바퀴

nav15px · 400 · 1.3

다람쥐 헌 쳇바퀴

body-sm13px · 400 · 1.3

다람쥐 헌 쳇바퀴

caption12px · 400 · 1.83

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard Variable (18,978글리프, 98.9%) · Noto Sans KR Thin 183글리프 · Apple SD Gothic Neo 36글리프(OS 폰트, 웹폰트 아님 — Mac/Windows에서 다르게 보임)
hangulWeights	400 주력(17,662글리프) · 500(687) · 700(454) · 600(167) · 900(8)
body	16px w400 lh1.55
sub	13–15px w400, 상품 설명 lh1.95
label	대문자 영문 라벨 38px/700 +18% · 14px/700 +8%
mixing	Pretendard 단일. 영문 라벨도 Pretendard로 그림. 헤더 일부 노드는 Noto Sans KR Thin이 같은 줄에 섞임
hangulHeadings	있음(제한적) — 브랜드 스토리 h1 '시간의 흐름에도 흔들리지 않는 아름다움' 약 55px/400(raw 1920 heading-1, 1440 값 미확인), h2 39px/600. 홈 제목은 영문 대문자 라벨(38/700)과 36px/700 국문 소식 제목
verdict	국문 대형 제목은 브랜드 스토리 한 페이지에 한정된 얇은(400) 큰 제목이라 국문 히어로 레퍼런스로는 약함. 영문 대문자 + 넓은 자간 라벨과 영상 히어로가 참고 가치
rendered	Pretendard Variable ×18978 · Noto Sans KR Thin ×183 · Apple SD Gothic Neo ×36

영문 · Latin국문과 동일

latinFont	Pretendard 37,199글리프(95.8%) · Noto Sans KR 941글리프(2.4%) · Roboto 667글리프(1.7%) · Rokkitt SemiBold 16글리프(0.0%)
latinWeights	실측 페이스 Thin · SemiBold
share	라틴 38,846글리프 / 한글 19,197글리프 — 지면의 66.9%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: h1-brand 55px/400 · h2-lg 39px/600 · label-display 38px/700 · h2-feature 36px/700 · h3 32px/500 · h2-media 24px/400 · h4 20px/500 · body 16px/400 · nav 15px/400 · body-sm 13px/400 · caption 12px/400
mixing	국영문 혼용 노드 259개(전체 1,036개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 66.9%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 95.8%를 그리는 Pretendard가 한글도 98.9% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: Pretendard · Noto Sans KR · Apple SD Gothic Neo
rendered	Pretendard Variable ×37199 · Noto Sans KR Thin ×941 · Roboto ×667 · Rokkitt SemiBold Thin ×16 · Rokkitt SemiBold ×16 · Apple Color Emoji ×5 · Apple SD Gothic Neo ×2

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	regular
Base unit	10px
Max width	1200px
Section gap	홈 섹션 높이 900(히어로)·900·954·810·900, 'IN THE SPOTLIGHT' 상단 패딩 100
Header	60px fixed
Grid Brand	3×3 카드 443×646, gap 15, r7.5px (브랜드 스토리)
Grid Category	제품 카드 3열, 가로 폭 1360 기준
Button Padding	16×52 (제품 보러가기, 검정 직각)

Border Radius

Role	Value	Preview
xs	2px	4회 · 버튼 일부
button-sm	3px	8회 · 버튼
small	4px	31회 · span·버튼
input	5px	27회 · fieldset
image	10px	18회 · img
—	15px	4회 · 관측만
card	16px	10회 · a 카드
—	21px	7회 · a (상담 신청 알약 추정)
large	30px	14회 · div·iframe
circle	50%	28회 · 닫기 버튼·상담 버블
pill	999px	2회 · span 칩