우아한형제들

흑백 사진 지면 위에 900 웨이트 국문 한 줄, 민트 #00C9B9는 호버와 히어로 그라디언트에서만 튄다.

배달의민족을 운영하는 회사의 코퍼레이트 사이트입니다. 홈 히어로는 현장 사진 위에 900 웨이트 78px 국문 한 줄을 올리고, 민트색은 메뉴 호버와 히어로 그라디언트에서만 잠깐 튑니다. 서브페이지 일곱 곳이 48px 중앙 타이틀 + 부제 뒤에 화면 전폭 비주얼을 붙이는 골격을 그대로 반복해서, 국문 히어로와 코퍼레이트 하위 페이지 참고로 유효합니다. 다만 자간은 본문값 하나가 모든 크기에 상속될 뿐 설계라 할 것이 없으니, 자간 규칙은 다른 곳에서 가져오시는 편이 낫습니다.

https://www.woowahan.com

Color Palette

Primary

Label

Fill

Line

Background

Static

Typography

Pretendard Variable · 400 / 500 / 700 / 900display·heading·body·ui·caption — 한글·라틴 전부

Noto Sans KR · 400 / 700선언만 — 렌더 0글리프

Type ScaleDS 문서 없음

display78.3px · 900 · 1

다람쥐 헌 쳇바퀴

h148px · 700 · 1.35

다람쥐 헌 쳇바퀴

h240px · 700 · 1.3

다람쥐 헌 쳇바퀴

h332px · 700 · 1.4

다람쥐 헌 쳇바퀴

h424px · 700 · 1.5

다람쥐 헌 쳇바퀴

h520px · 700 · 1.6

다람쥐 헌 쳇바퀴

lead20px · 400 · 1.45

다람쥐 헌 쳇바퀴

nav18px · 500 · 1.5

다람쥐 헌 쳇바퀴

body16px · 400 · 1.5

다람쥐 헌 쳇바퀴

small14px · 400 · 1.5

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard Variable 25,604/25,609글리프(100.0%) — self-hosted subset 23파일. Apple SD Gothic Neo 1글리프·Apple Color Emoji 4글리프는 아티클 상세(이모지)뿐. 선언된 Noto Sans KR(Google Fonts 400·700)은 렌더 0
hangulWeights	400 21,010(82%) 본문·타임라인 · 700 4,385(17%) 제목·버튼·GNB 활성 · 500 124 GNB 1차 라벨 · 900 85 홈 히어로
body	16px w400 lh1.5 ls−0.32px(−2%) ×36, 열 폭 680/692, 색 #232324
sub	20px w400 lh1.45 ls−0.32px ×4 (48px 타이틀 아래 부제 1행, 중앙)
label	18px w500 ls−0.32px (GNB 1차) · 16px w400 (GNB 2차) · 14px w400 ×36 (푸터) · 14px w700 (다크 버튼) · 12px w700 ls0 ×9
mixing	국문 단독 사이트. 원칙명은 영문 구호+국문을 한 덩어리로('Own it 내 일의 대표는 나' 20/700 ×6), 히어로는 국문 제목 78.3/900과 영문 캡션 'sustainability'를 행으로 분리. 영문 전용 서체 없이 라틴 310글리프도 Pretendard — 한 줄 혼용 시 서체 전환 없음
hangulHeadings	있음 — 홈 히어로 78.3px w900 국문 1행 ×5 슬라이드('한그릇'·'장사에 힘이 됩니다') · 서브 타이틀 48/700 ×7('배민식지 않는 따뜻함을 전합니다'·'우아한형제들이 지키는 지속가능미래') · 홈 섹션 40/700 ×4('세상 모든 것이 식지 않도록') · 아티클 제목 42/700('숫자로 보는 배민아카데미 이야기') · 카드 제목 22/700 ×10
verdict	국문 히어로·대형 제목 레퍼런스로 유효 — 900 웨이트 78px 1행을 사진+민트 그라디언트 위에 올리는 구성과, 48/700 lh1.35 중앙 타이틀 + 20/400 부제 조합이 7페이지에서 반복된다. 단 자간 설계는 없다(−0.32px 상속 한 값, 40px만 −3%) — 자간 레퍼런스로는 부적합. 본문 16/400/1.5 국문 표준
rendered	Pretendard Variable ×33140

영문 · Latin국문과 동일

latinFont	Pretendard 11,859글리프(99.9%) · Apple Color Emoji 9글리프(0.1%) · Apple SD Gothic Neo 1글리프(0.0%)
latinWeights	단일 페이스(웨이트 파생 페이스 없음)
share	라틴 11,869글리프 / 한글 33,140글리프 — 지면의 26.4%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: display 78.3px/900 · h1 48px/700 · h2 40px/700 · h3 32px/700 · h4 24px/700 · h5 20px/700 · lead 20px/400 · nav 18px/500 · body 16px/400 · small 14px/400
mixing	국영문 혼용 노드 845개(전체 2,015개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 26.4%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 99.9%를 그리는 Pretendard가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: Pretendard
rendered	Pretendard Variable ×11859 · Apple Color Emoji ×9 · Apple SD Gothic Neo ×1

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	4px
Max width	1352px
Docs width	980px
Section gap	80px (블록 간: 카드 행 피치 582−502, 원칙 블록 579−500, 뉴스룸 제목 pb80, 공유·관련글 pt80)
Header	72px fixed
Inner Text Column	680 (서브페이지 980 안 우측 본문 열; 원칙 카드 320×2+40, 서비스 리스트 행 680×24)
Grid Home	스토리 캐러셀 240×240 ×24 gap 32 · 뉴스룸 2열 380×329 gap 20 (=780, 7회) · 글꼴 타일 176×128 ×24 gap 0
Grid List	함께가치 카드 2열 ×5행, 카드 h502, 행 피치 582 (gap 80)
Subpage Title Y	타이틀 y172 (헤더 72 + 100) → 비주얼 y406(회사) / y474(서비스) 풀블리드 1440×400
Card Padding	카드 radius 0 · 공유 버튼 44×44 gap 12
Button Padding	0×18 (다크 14px) / 0×22 (그레이·고스트 16px), radius 8

Border Radius

Role	Value	Preview
none	0px	117회 · 카드·타일·이미지 전부 (layout repeated radius 0px)
button	8px	18회 · 버튼 3종(다크·그레이·고스트) 공통
—	16px	1회 · 관측만 (button, low confidence)
circle	50%	25회 · 공유 버튼 44×44 · 캐러셀 화살표 버튼

Guidelines

국문 히어로는 Pretendard 900 78px 1행을 사진 위 중앙에 — 영문 캡션은 별도 줄로 분리(슬라이드 5장 동일 구조)
서브페이지는 48/700 lh1.35 중앙 타이틀 + 20/400 부제 → 100px 뒤 풀블리드 1440×400 비주얼 (7페이지 동일)
본문은 16/400/1.5 자간 −0.32px, 열 폭 680(서브)·692(아티클). 색은 #232324 한 색, 보조는 #6C6D6F(5.18:1)까지만
카드는 radius 0·보더 0·그림자 0, 간격으로만 분리 — 뉴스 380×329 gap 20, 캐러셀 240 gap 32, 행 간 80
버튼만 radius 8: 다크 #232324/14/700 pad 0×18, 그레이 #F3F4F5/16/700 pad 0×22, 사진 위는 rgba(0,0,0,.3)+1px #fff
민트 #00C9B9는 호버 텍스트·밑줄 링크에만(2.09:1) — 면 색·버튼 배경으로 올리지 않는다
섹션 패딩은 120/140/160, 블록 간 80, 4px 배수(12 ×220 · 40 ×144 · 16 ×123)
모션은 0.2s ease 기본(241회), 히어로만 0.4–0.6s opacity/transform