바로고

국문 제목 크기를 42px 한 단으로 못 박고, 주황 #FA5014은 버튼과 태그에만 꺼낸다.

바로고 홈은 제목 크기를 하나로 못 박은 사이트입니다. 히어로부터 마지막 섹션까지 국문 제목이 전부 42px 굵기 700이고, 그 아래는 20px 본문 한 단으로 곧장 떨어집니다. 색도 흰 지면·검정 지면·주황 #FA5014 셋으로 끝나며 주황은 버튼과 태그에만 나옵니다. 다만 확보한 페이지가 홈 한 장뿐이라 아래 레이아웃·컴포넌트 서술은 전부 그 한 장에 근거합니다.

https://www.barogo.com

Color Palette

Primary

Label

Fill

Line

Background

Typography

Pretendard · 400 / 500 / 700heading·body·ui — 한글 98.3%, 라틴 94.0%

Pretendard Medium · 500weight 500 전용 페이스

Type Scale크기는 뷰포트에 비례하지 않는다 — 1440 layout의 42px 제목·20px 본문이 raw 1920과 같은 값이다

h1/h242px · 700 · 1.43

다람쥐 헌 쳇바퀴

lead24px · 700 · 1.5

다람쥐 헌 쳇바퀴

nav-active20px · 700 · 1.5

다람쥐 헌 쳇바퀴

nav20px · 500 · 1.5

다람쥐 헌 쳇바퀴

body20px · 400 · 1.5

다람쥐 헌 쳇바퀴

ui18px · 700 · 1

다람쥐 헌 쳇바퀴

body-sm16px · 400 · 1

다람쥐 헌 쳇바퀴

link-sm14px · 700 · 1

다람쥐 헌 쳇바퀴

footer-link12px · 500 · 2.17

다람쥐 헌 쳇바퀴

caption12px · 400 · 1

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard 4,421글리프(98.3%) + Pretendard Medium 75(1.7%). 선언 1순위(Pretendard)와 실렌더가 일치한다
hangulWeights	400 Pretendard 3,432(76.3%) · 700 Pretendard 989(22.0%) · 500 Pretendard Medium 75(1.7%). 500은 헤더 비활성 nav와 푸터 링크에만 쓰여 사실상 2웨이트 체계다
body	20px w400 lh1.5 자간 −0.1px(−0.5%). 51회로 전체 최다 단이며 제목 바로 아래에 붙는다
sub	중간 단이 사실상 없다 — 42px와 20px 사이는 배너 카피 24px w700 lh1.5 한 건뿐이다
label	헤더 nav 20px w500/w700 자간 −0.1px · 카드 태그 12px w400 · 푸터 링크 12px w500 lh2.17
mixing	국영문을 한 서체가 그린다(Pretendard가 한글 98.3% · 라틴 94.0%). 영문은 브랜드명(BAROGO)·이메일 주소·저작권 정도로 지면의 27.2%뿐이고 국문이 인상을 만든다
hangulHeadings	있다. 히어로 h1 42px w700 국문 2행('무엇이든 어디서나 / 배달은 누구보다 확실하게')과 섹션 h2 4개가 모두 42px w700 국문이다. 42px는 라이브러리 국문 히어로 중 작은 편이다(루닛 84 · 한화 54 · 엔씨 48 대비)
verdict	국문 히어로 레퍼런스로 유효하되 크기는 크지 않다(42px). 이 사이트의 값은 크기가 아니라 제목 단을 하나로 못 박고 곧장 20px 본문으로 떨어뜨리는 2단 위계에 있다. 자간 규칙은 20px 세 단의 −0.1px뿐이라 배울 것이 적다. 표본이 홈 1페이지뿐이라 다른 템플릿(문의·채용·회사 소개)의 국문 조판은 판정하지 못했다
rendered	Pretendard ×4421 · Pretendard Medium ×75

영문 · Latin국문과 동일

latinFont	Pretendard 1,679글리프(100.0%)
latinWeights	실측 페이스 Medium
share	라틴 1,679글리프 / 한글 4,496글리프 — 지면의 27.2%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: h1/h2 42px/700 · lead 24px/700 · nav-active 20px/700 · nav 20px/500 · body 20px/400 · ui 18px/700 · body-sm 16px/400 · link-sm 14px/700 · footer-link 12px/500 · caption 12px/400
mixing	국영문 혼용 노드 173개(전체 376개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 27.2%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 100.0%를 그리는 Pretendard가 한글도 100.0% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: Pretendard
rendered	Pretendard ×1578 · Pretendard Medium ×101

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	5px
Max width	1180px
Section gap	히어로 917 → 피처 900 → 노하우 822(padding 200/200) → 라스트마일 574 → (285px 공백) → 배너 800(padding 80/80) → 콘텐츠 슬라이더 920(padding 200/200) → (130px 공백) → 로고 스트립 891 → 푸터 533. 큰 섹션 패딩은 200/200 두 곳과 80/80 한 곳뿐이다
Header	110px fixed
Grid Slider	콘텐츠 카드 575×410, gap-x 25, 한 행에 43장 — 1180 폭에 2장(575×2+25=1,175)만 보이고 나머지는 가로 스크롤이다
Grid Logo Strip	1180×30 행 3개(B2B 브랜드 · 주문 중개 플랫폼 · 협업사 & 협력 단체)
Button Padding	바로 문의하기 0 40px (r3.008) · 닫기 0 (r3.008)

Border Radius

Role	Value	Preview
button	3.008px	7회 · 버튼 전부(바로 문의하기 · 닫기). 사실상 각진 모서리에 가깝다
image	20px	45회 · 이미지·카드 썸네일 — 최다 라운드

Guidelines

국문 제목을 42px w700 lh1.43 한 단으로 통일한다 — 히어로 h1과 섹션 h2 4개가 전부 같은 크기다
제목 아래를 20px w400 lh1.5 본문 한 단으로 받는다(51회, 전체 최다). 중간 단은 배너 카피 24px 하나뿐
브랜드 주황 #FA5014은 CTA 배경·아웃라인 테두리·활성 밑줄·태그 네 자리에만 쓴다(118회)
버튼은 radius 3px로 각지게, 이미지는 radius 20px로 둥글게 — 두 값만 쓴다(3.008px 7회 · 20px 45회)
지면을 흰색 → #F6F6F6 → 사진 → 검정 순으로 내려가며 바꾼다. 하단부(로고 스트립 891 + 푸터 533)는 검정이다
섹션 호흡은 padding 200/200 두 곳으로만 크게 준다 — 나머지는 섹션 높이 자체(574~920)가 여백을 만든다
전환은 0.5s ease로 길게 잡는다(0.5s 8회 · ease 11회)

Don't

제목 크기를 여러 단으로 쪼개지 않는다 — 이 사이트의 위계는 42 → 20 두 단이다
#999999을 본문에 쓰지 않는다(흰 바탕 2.85:1, AA 미달) — 비활성 nav·캡션 전용
주황 위에 흰 글자를 작은 크기로 올리지 않는다 — #FA5014/#FFFFFF는 3.37:1이라 20px w700(large text) 이상에서만 통과한다
알약·원형 버튼을 만들지 않는다(9999·1000px·50% 0건)
자간을 크기별로 계단화하지 않는다 — 18개 스타일 중 −0.1px이 붙은 20px 세 단이 전부다
반응형 분기를 여러 단으로 나누지 않는다 — 실측 브레이크포인트는 768px 한 단뿐이다
가로 슬라이더를 그리드로 오해하지 않는다 — 콘텐츠 카드 575×410 43장은 1180 폭에 2장만 보인다