Montage

흰 지면 위에 근검정 잉크 한 줄, 깊이는 그림자가 아니라 1px 헤어라인으로.

Montage는 원티드의 디자인 시스템 문서 사이트로, 흰 지면과 근검정 글자만 쓰는 조용한 인상입니다. 깊이를 그림자가 아니라 1px 헤어라인으로 만들고, 회색 한 색을 투명도만 바꿔 채움·테두리·링으로 돌려 쓰는 것이 이 사이트의 핵심 규칙입니다. 제목을 국문이 맡는 곳이 한 군데도 없어 국문 히어로 레퍼런스로는 쓸 수 없지만, 22px 이상은 자간을 좁히고 16px 이하는 오히려 넓히는 국문 본문·UI 조판은 그대로 배울 만합니다. 사이드바와 한 단 본문으로 이뤄진 문서 사이트를 설계할 때 참고하기 좋습니다.

https://montage.wanted.co.kr

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Wanted Sans Variable · 500 / 600display (영문 전용)

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

Menlo · 400code

Type ScaleMontage Typography 문서의 스타일표(Display 1 56px −0

display72px · 500 · 1

다람쥐 헌 쳇바퀴

h136px · 700 · 1.33

다람쥐 헌 쳇바퀴

h2-home32px · 600 · 1.33

다람쥐 헌 쳇바퀴

h2-doc22px · 600 · 1.36

다람쥐 헌 쳇바퀴

h317px · 600 · 1.41

다람쥐 헌 쳇바퀴

body15px · 500 · 1.6

다람쥐 헌 쳇바퀴

body-sm14px · 500 · 1.43

다람쥐 헌 쳇바퀴

label13px · 600 · 1.38

다람쥐 헌 쳇바퀴

caption11px · 600 · 1.27

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard Variable (7,664글리프, 100%)
hangulWeights	500 주력(7,279) · 600 소제목(313) · 400 소수(72)
body	15px w500 lh1.6 ls+0.144px
sub	14px w500 lh1.43 ls+0.2px (히어로 부제 2행, 중앙)
label	13px w600 ls+0.25px · 11px w600 ls+0.34px
mixing	이원화 — 영문 디스플레이(Wanted Sans 72/32)와 국문 본문(Pretendard)을 층으로 분리. 한 줄 안 혼용은 Pretendard 단일(예: 'Wanted Design System 제작기' 18/600 Pretendard×24)
hangulHeadings	없음. h1 36/700도 영문 단어(Action area·Table). 국문이 제목을 맡는 곳이 0
verdict	국문 본문·UI 조판 레퍼런스로 유효(양수 자간·lh1.6·500 웨이트). 국문 히어로·대형 제목 레퍼런스로는 부적합
rendered	Pretendard Variable ×9709

영문 · Latin영문 전용

latinFont	Pretendard 10,256글리프(98.3%) · Menlo 92글리프(0.9%) · Wanted Sans 81글리프(0.8%)
latinWeights	단일 페이스(웨이트 파생 페이스 없음)
share	라틴 10,429글리프 / 한글 9,709글리프 — 지면의 51.8%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: h1 36px/700 · h2-doc 22px/600 · h3 17px/600 · body 15px/500 · body-sm 14px/500 · label 13px/600 · caption 11px/600
mixing	국영문 혼용 노드 134개(전체 1,015개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	Wanted Sans 영문 전용(0.8% · 선언됨 · 최상단 디스플레이 독점)
verdict	영문 전용 서체가 있다 — Wanted Sans 라틴 0.8% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 72px)
sharedWithKorean	국문과 같은 서체: Pretendard
rendered	Pretendard Variable ×10256 · Menlo ×92 · Wanted Sans Variable ×81

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	4px
Max width	1060px
Docs width	710px
Section gap	홈 96px(히어로→그리드) / 192px(그리드 사이)
Header	62px sticky
Grid Home	3열 332px, 거터 32px (332×3+32×2=1060)
Grid Components	3열 241px, 거터 0 → 타일 안쪽 여백으로 분리
Grid Hero	11열 134px 타일, 거터 19px, 2행
Card Padding	타일 241×191 / 홈 카드 332×175·332×297
Button Padding	12×20 (알약) / 12×28 (주 액션)

Border Radius

Role	Value	Preview
small	6px	18회 · 작은 칩·인풋
—	10px	12회 · 관측만
standard	12px	632회 · 카드·버튼·코드블록 표준
—	20px	2회 · 관측만
large	24px	81회 · 큰 썸네일
circle	50%	18회 · 아바타·아이콘 버튼
pill	9999px	209회 · nav CTA·칩 (99px 2회 포함)