헤라

흑백만 남긴 지면에 578px 밴드를 여섯 번 쌓고, 폴드 카피만 국문 38px/900으로 세운다.

헤라는 색을 거의 쓰지 않는 뷰티 커머스입니다. 팔레트 다섯 색이 전부 흑백회색이고 화면에서 유일한 채도는 제품 셰이드 칩 47종뿐이라, 검정 헤더와 검정 푸터 사이를 578px 높이 밴드가 여섯 번 반복하며 내려갑니다. 라이브러리의 뷰티 브랜드 가운데 폴드에서 국문이 제목을 맡는 몇 안 되는 사이트로, 히어로 슬라이드 카피가 38px/900 행간 1.33으로 올라옵니다. 다만 자간을 크기와 상관없이 −0.325px 한 값으로 고정해 큰 글자가 거의 조여지지 않으니, 국문 디스플레이 자간은 참고 대상이 아니라 반례로 보시는 편이 낫습니다.

https://www.hera.com/kr/ko

Color Palette

Label

Line

Background

Accent

Typography

Noto Sans KR · 400 / 500 / 700한글 전부 + 라틴 절반

Cera Pro · 500 / 700라틴 디스플레이·UI (선언 1순위)

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

Montserrat · 400선언만 있고 사실상 미사용

Type Scale크기 기준은 layout

section-en45px · 900 · 1

Handgloves 123

hero-ko38px · 900 · 1.33

다람쥐 헌 쳇바퀴

h1-product32px · 700 · 1.25

다람쥐 헌 쳇바퀴

section-label30px · 900 · 1.3

Handgloves 123

page-title30px · 600 · 1.2

다람쥐 헌 쳇바퀴

lead24px · 400 · 1.58

다람쥐 헌 쳇바퀴

product-name22px · 500 · 1.2

다람쥐 헌 쳇바퀴

button18px · 700 · 1.38

다람쥐 헌 쳇바퀴

body15px · 400 · 1.73

다람쥐 헌 쳇바퀴

ui14px · 400 · 1.4

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Noto Sans KR (self-hosted NotoSansKR-Light/Regular/Medium/Bold .woff2 4파일). 한글 10,957글리프의 94.7%(Regular 8,211 74.9% · Medium 1,566 14.3% · Bold 600 5.5%)를 그리고, 나머지 580글리프(5.3%)는 Apple SD Gothic Neo — macOS 시스템 폰트라 Windows에서는 맑은 고딕이 된다. 선언 1순위 Cera Pro와 2순위 Montserrat는 한글을 한 글자도 그리지 않는다
hangulWeights	400: Regular 6,746 + Apple SD Gothic Neo 580 · 500: Regular 1,465 · 600: Medium 1,158 · 700: Medium 408 · 900: Bold 600. 파일이 4개뿐이라 CSS 600·700을 Medium(500)이, 900을 Bold(700)가 받는다 — 폴드 카피 38px/900이 실제로는 Noto Sans KR Bold다
body	15px/400 lh1.73 자간 −0.325px(raw ×9) · 14px/400 lh1.40 −0.325px(×42, 최다) · 13px/400 −0.325px(×21)
sub	홈 슬라이드 상품명 22px/500 lh normal 자간 normal(1440 실측 y338) · 상세 리드 24px/400 lh1.58 −0.325px
label	13px/800 lh1.00 −0.325px(×18) · 13px/200 lh1.00(×9, weight 200) · 12px/600 lh0.00 −0.325px(×12) · 필터 14px/400
mixing	한 줄에 국영문이 그대로 붙는다 — 폴드 카피 'LET YOUR GLOW SPEAK / 내 안에서 깨어나는 맑고 투명한 빛'(38px/900), 상품명 'THE ICON. THE ORIGINAL 블랙 쿠션 파운데이션'(22px/500). 서체는 글자 단위로 갈려 라틴은 Cera Pro, 한글은 Noto Sans KR이 그린다. 혼용 노드는 456개(전체 1,296개)로 전부 프로브 재측정을 거쳤다
hangulHeadings	있다, 그리고 폴드에 있다. 히어로 슬라이드 9장 중 8장의 카피가 38px/900 lh50.54px(1.33) 자간 normal 국문이다('확실한 모공 커버 효과의 혁신 프라이머'·'초밀착 클라우드 블러 스킨'·'피부 속 맑고 풍성한 빛을 / 깨우는 광채탄력세럼' 등, 1440 실측 y379~413). 다만 그보다 큰 45px/900(FACE·LIP·SKIN CARE·BRAND STORY)과 30px/900(BEST SELLER)은 전부 영문이다. 카테고리 h1은 30px/600 국문 '페이스', 상품 상세 h1은 32px/700 국문이다
verdict	국문 히어로 레퍼런스로 조건부 유효하다 — 라이브러리의 뷰티 5곳 중 폴드에서 국문이 제목을 맡는 곳은 헤라와 아모레퍼시픽뿐이고, 헤라 쪽이 슬라이드 8장으로 표본이 더 많다. 다만 두 가지를 빼고 봐야 한다: ① 크기가 38px로 크지 않고 45px 이상 자리는 영문이 가져간다 ② 자간을 크기와 무관하게 −0.325px 한 값으로 고정하는 방식은 큰 글자에서 −0.7%밖에 조여지지 않아 국문 디스플레이 조판으로는 반례에 가깝다(폴드 카피 38px은 아예 자간 0이다). 그대로 가져갈 만한 것은 본문 15px/400 lh1.73과 UI 14px/400 lh1.40, 그리고 578px 밴드 반복으로 짠 홈 골격이다
rendered	Noto Sans KR Regular ×8211 · Noto Sans KR Medium ×1566 · Noto Sans KR Bold ×600 · Apple SD Gothic Neo ×580

영문 · Latin영문 전용

latinFont	Noto Sans KR 2,915글리프(50.9%) · Cera Pro 2,621글리프(45.8%) · Apple SD Gothic Neo 94글리프(1.6%) · Montserrat 93글리프(1.6%)
latinWeights	실측 페이스 Medium · Regular · Bold
share	라틴 5,723글리프 / 한글 10,957글리프 — 지면의 34.3%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Noto Sans KR를 쓰는 단: hero-ko 38px/900 · h1-product 32px/700 · page-title 30px/600 · lead 24px/400 · product-name 22px/500 · button 18px/700 · body 15px/400 · ui 14px/400
mixing	국영문 혼용 노드 456개(전체 1,296개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	Cera Pro 영문 전용(45.8% · 선언됨 · 최상단 디스플레이 독점)
verdict	영문 전용 서체가 있다 — Cera Pro 라틴 45.8% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 45px)
sharedWithKorean	국문과 같은 서체: Noto Sans KR · Apple SD Gothic Neo
rendered	Cera Pro Medium ×2235 · Noto Sans KR Regular ×2139 · Noto Sans KR Bold ×488 · Cera Pro ×386 · Noto Sans KR Medium ×288 · Apple SD Gothic Neo ×94 · Montserrat ×93

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	regular
Base unit	8px
Max width	1360px
Section gap	홈은 밴드 사이 여백 없이 578px 블록이 붙는다(y 113→691→1308→1895→2483→3060→3896, 간격 0~9px). 카테고리 제목 블록만 padding 86/55, 상세 카피 블록은 48/80·80/80
Header	113px relative
Content Widths	홈·카테고리 1360(cands 1360×8~9) · 상품 상세 624(624×99, 리뷰 행만 1260)
Grid Home	BEST SELLER 4열 319×383 gap 29 · 인스타 3열 560×560 · 히어로 슬라이드 1440×578 ×9
Grid Category	상품 카드 행 높이 816px, 셰이드 칩 5~6개 16×16 gap 4
Card Padding	카테고리 제목 블록 86/55 · 상세 카피 48/80
Button Padding	구매 14×95 · 리뷰더보기 12×46 · 필터 0×18 · 페이지 번호 12×0

Border Radius

Role	Value	Preview
small	4px	27회 · 인풋·앵커
standard	6px	74회 · 버튼(최다). 다만 실측된 버튼 6종은 전부 radius 0이라 검색·모달 쪽 버튼으로 추정한다(미확인)
small	8px	1회 · 관측만
small	10px	18회 · 셀렉트
medium	12px	1회 · 관측만
sheet	14px 14px 0px 0px	6회 · 위쪽만 둥근 시트·드로어
circle	50%	6회 · 아이콘 버튼
pill	999px	4회 · 칩

Guidelines

지면을 흑백으로만 짓고 채도는 제품 셰이드 칩(16×16 gap 4)에만 허용한다 — 팔레트 5색이 전부 무채색이다
홈을 같은 높이 밴드의 반복으로 짠다 — 578px 밴드 5개 + 617·836px 두 개, 밴드 사이 여백 0
폴드 카피는 국문 38px/900 lh1.33 자간 0으로 세우고, 45px 이상 영문 제목과 층을 나눈다
헤더 113px과 푸터 409px을 검정(#111111·#000000)으로 깔아 흰 지면을 위아래에서 잡는다
버튼·카드·칩·이미지 전부 radius 0으로 각지게 둔다(실측 버튼 6종·인풋 2종 모두 0)
본문은 15px/400 lh1.73, UI는 14px/400 lh1.40 — 국문 단락 행간을 1.7 이상으로 준다
카테고리 제목은 30px/600 국문 한 단어를 padding 86/55 블록에 혼자 세운다

Don't

자간을 −0.325px 한 값으로 전 단계에 고정하지 않는다 — 12px에서 −2.7%인 값이 48px에서는 −0.68%가 돼 큰 글자가 조여지지 않는다. 국문 디스플레이 자간은 %로 잡는다
검정 지면 위에 #1A1A1A·#000000 글자를 얹지 않는다(1.08~1.21:1, 181쌍)
웨이트 파일 없이 CSS 웨이트를 늘리지 않는다 — Noto Sans KR 4파일뿐이라 600·700이 Medium으로, 900이 Bold로 내려앉는다
한글 폴백이 빠진 스택을 남기지 않는다 — 580글리프(5.3%)가 Apple SD Gothic Neo로 흘러 Windows에서 맑은 고딕이 된다
Montserrat 18파일·Geor Grotesk 4파일처럼 렌더 0~93글리프인 서체를 싣지 않는다
셰이드 칩 위에 #666666 라벨을 얹지 않는다(3.70~4.38:1, 대부분 AA 미달)
line-height 0을 쓰지 않는다 — 12px/600 caption 12건과 12px 0px 스타일에 lh 0.00이 남아 있다