스윗

크림빛 폴드 위 65px 국문 두 줄로 열고, 그 뒤 13,988px를 900px짜리 피처 판으로 이어 붙인다.

스윗은 협업 소프트웨어의 랜딩 사이트로, 크림빛 폴드 위 65px 국문 두 줄로 엽니다. 홈 한 페이지가 1만 4천 픽셀에 가깝고 그 대부분이 화면 높이와 똑같은 900px짜리 판으로 끊겨 있어, 긴 랜딩을 어떻게 나눌지 참고하기 좋습니다. 조판에서 가장 배울 만한 것은 자간 규칙입니다 — 큰 제목에서는 좁히고 본문 아래로 내려갈수록 넓히는 전환이 크기 단마다 뚜렷하게 지정돼 있습니다. 지면의 87%가 한글이라 국문을 기준으로 설계된 페이지이고, 버튼은 모두 알약 하나로 통일한 뒤 채움 색만 네 가지로 갈라 위계를 줍니다.

https://swit.io/ko

Color Palette

Primary

Label

Line

Background

Static

Accent

Typography

Noto Sans KR (CDP 보고명 'OTS derived font') · 400 / 500 / 600 / 700 / 800한글 전부 + 라틴 82.1%

Manrope · 400 / 500 / 600 / 700 / 800라틴 보조 (선언 1순위)

Inter · 400 / 500캡션 (선언만)

Type Scale자간이 크기에 따라 부호를 뒤집는 규칙이 뚜렷하다 — 48~65px −1px(−1

display-lg75px · 700 · 1.15

다람쥐 헌 쳇바퀴

display65px · 800 · 1.09

다람쥐 헌 쳇바퀴

h148px · 800 · 1.17

다람쥐 헌 쳇바퀴

h240px · 700 · 1.4

다람쥐 헌 쳇바퀴

h324px · 700 · 1.33

다람쥐 헌 쳇바퀴

lead20px · 400 · 1.4

다람쥐 헌 쳇바퀴

body-lg18px · 600 · 1.56

다람쥐 헌 쳇바퀴

body16px · 400 · 1.5

다람쥐 헌 쳇바퀴

body-sm14px · 400 · 1.43

다람쥐 헌 쳇바퀴

eyebrow14px · 700 · 1.14

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	자체 호스팅 Noto Sans KR — CDP가 이름 테이블을 못 읽어 'OTS derived font'로 보고한다. 한글 36,622글리프 중 36,616(99.98%)을 이 서체가 그리고 Manrope가 6글리프다. 선언 스택은 두 벌이다: 'Manrope, Noto Sans KR'(스타일 인스턴스 164회)와 'Noto Sans KR' 단독(85회). 실체 판정은 해석이지만 근거가 좁다 — 폰트 URL 27개 중 한글 가능 파일은 NotoSansKR-{Light,Regular,Medium,Bold} 4종뿐이고 Manrope·Inter에는 한글 글리프가 없다
hangulWeights	400 23,281(63.6%) · 500 6,626(18.1%) · 700 4,088(11.2%) · 600 1,409(3.8%) · 800 1,212(3.3%). 로드된 파일은 Light·Regular·Medium·Bold 4종인데 CSS는 다섯 단을 부르므로 600·800은 파일 없이 합성된다(해석). 히어로 65px/800과 h1 48px/800이 그 800이다
body	16px / weight 400 / line-height 1.50 / letter-spacing 0 (×4). 보조 본문 14px/400 lh1.43(×9), 리드 20px/400 lh1.40 ls +0.3px(×6). 국문 전용 스택이 맡는 단은 20·16·14·12px 네 단뿐이다
sub	히어로 부제 20px, 히어로 섹션 텍스트 총 88자에 CTA 2개. 다른 페이지 히어로는 48px 제목 아래 20px 리드 158~174자
label	eyebrow 14px/700 uppercase ls +2px(+14.3%) ×3 · 12px/800 uppercase ls +1.8px(+15%) ×1 · 푸터 링크 12px/400(×18)과 12px/700(×10) · 버튼 라벨 14px/600·16px/600
mixing	문자 체계로 서체가 갈린다 — 한글 36,616글리프는 자체 호스팅 한글 서체가, 라틴 5,456글리프는 Manrope가 100% 그린다(교차 오염은 한글 쪽 Manrope 6글리프뿐). 대신 한 줄 안에서 파일이 계속 바뀐다: 노드 2,155개 중 887개(41.2%)가 국영문 혼용이고, 실측 샘플 '요금 안내' 14px/500은 Manrope Medium×1(공백) + 한글 서체×8, '회사 소개'도 같은 형태다. 카피가 제품·기능명을 로마자 그대로 국문 문장에 박기 때문이다 — 'AI로 더 강력해진'(65/800) · 'Swit으로 인간 본연의 자연스러운 방식으로 일하기'(24/700) · 'If with Then 을 연결하는 오토메이션'(24/700) · 'Snap (Swit AI): 단순한 플랜 B가 아닌'(24/800). 그런데도 지면의 87.0%가 한글이라, 조판의 인상은 사실상 한글 서체 한 벌이 결정한다
hangulHeadings	있음, 그리고 단이 촘촘하다 — 홈 히어로 65px/800 lh1.09(71px) ls −1px 'AI로 더 강력해진 / 기업용 협업 플랫폼'. 아래로 48px/800 ls −1px ×6(전체기능·요금·프로젝트·소개 h1) · 40px/700 ls −0.1px ×13(섹션 제목 표준) · 30px/700 ×1 · 24px/700 ls −0.1px ×11(피처 판 제목)로 이어진다. 사이트 최대 단 75px/700은 히어로가 아니라 약관 페이지 제목 'Swit 약관 및 정책'이고, 그다음 큰 58px/600 ls −5px은 국문이 아니라 요금 가격 '$1.50'이다
verdict	국문 대형 조판 레퍼런스로 유효하다 — 65px/800이라는 '크고 굵은' 축을 잡고 48 → 40 → 24px 세 단을 여러 페이지에서 반복해 위계가 실증되고, 지면의 87.0%가 한글이라 국문 기준으로 설계된 페이지라는 점도 실측으로 뒷받침된다. 특히 자간 규칙이 라이브러리에서 손꼽게 명시적이다(48~65px −1px · 24~40px −0.1px · 20px +0.3px · 12~14px 대문자 +2px). 다만 국문 800은 파일 없이 합성된 굵기로 보이므로(로드된 한글 파일은 Light·Regular·Medium·Bold 4종), 65px/800의 인상을 그대로 옮기려면 실제 800 파일이 있는 서체로 바꿔야 한다
rendered	OTS derived font ×36616 · Manrope ×6

영문 · Latin영문 전용

latinFont	OTS derived font 7,349글리프(57.4%) · Manrope 5,462글리프(42.6%)
latinWeights	실측 페이스 Medium · SemiBold · ExtraBold
share	라틴 12,811글리프 / 한글 36,622글리프 — 지면의 25.9%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 OTS derived font를 쓰는 단: display-lg 75px/700 · display 65px/800 · h1 48px/800 · h2 40px/700 · h3 24px/700 · lead 20px/400 · body 16px/400 · body-sm 14px/400
mixing	국영문 혼용 노드 887개(전체 2,155개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	Manrope 영문 전용(42.6% · 선언됨)
verdict	영문 전용 서체가 있다 — Manrope 라틴 42.6% / 한글 0.0%. 다만 타입 스케일에서 최대 18px만 맡는다 — 디스플레이가 아니라 메타·숫자용이다
sharedWithKorean	국문과 같은 서체: OTS derived font · Manrope
rendered	OTS derived font ×7349 · Manrope Medium ×2035 · Manrope ×1970 · Manrope SemiBold ×880 · Manrope ExtraBold ×577

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	12px(136)
Max width	1196px
Section gap	홈 피처 판은 padding 40/40 고정
Header	65px relative
Card Padding	소개 카드 350×312 gap 30 radius 16 · 블로그 카드 377×365 gap 31 · 지원 카드 581×232 gap 32 radius 24 · 관리자 카드 275×319 gap 32 · 보안 배지 126×124 gap 28 · 후기 1274×167 · FAQ 행 998×61
Button Padding	12px (8종 전부 동일) · 배지 6×12
Content Widths	페이지마다 다르다 — 셸 1196(소개·전체기능·약관) · 홈·요금 1000 · 블로그 1180 · 프로젝트 788
Feature Slide Height	900px — 홈 섹션 8·9·13·14·18·19·20과 프로젝트 섹션 10·11·12가 정확히 뷰포트 높이다

Border Radius

Role	Value	Preview
hairline	3px	6회 · 인라인 비디오
small	4px	10회 · 인풋·체크박스
card-sm	6px	3회 · 작은 카드
image	8px	14회 · 이미지·배지
button-sm	10px	3회 · 보조 버튼
tab	12px 12px 0px 0px	3회 · 요금 플랜 탭(위쪽만 둥근다)
card	16px	12회 · 소개 카드 350×312
card-lg	20px	20회 · 큰 카드
panel	24px	25회 · 지원 카드 581×232 · 표 양끝 모서리('0 24px 24px 0' ·'24px 0 0 24px' 각 1)
pill	40px	91회 · 버튼 8종 전부 — 사이트 최다 라운드
circle	100px	1회 · 원형 요소 1개

Guidelines

국문 대형은 65px/800 lh1.09(71px) ls −1px으로 짜고, 아래로 48/800 → 40/700 → 24/700 세 단을 반복해 위계를 만든다(각 6·13·11회로 실제 반복이 확인된다)
자간을 크기로 뒤집는다 — 48px 이상 −1px, 24~40px −0.1px, 20px 국문 리드 +0.3px, 12~14px 대문자 라벨 +1.8~+2px
버튼은 알약 하나로 통일한다(radius 40px ×91, padding 12px, 14/600 또는 16/600). 채움만 4가지로 갈라 위계를 준다
지면은 흰색을 기본으로 두고 폴드·플랜 밴드만 크림 #F2F2EA로 눌러 구분한다(대비 14.9:1 유지)
코랄 #F7694C는 면(로고·CTA 밴드 배경)으로만 쓴다 — 흰 지면 위 텍스트는 2.97:1이라 못 쓴다
긴 랜딩은 900px 판으로 끊는다 — 판마다 제목 24/700 + 설명 16px + 이미지 1장, padding 40/40으로 고정
카드 라운드는 8→16→20→24px 네 단 안에서 고른다(합 71회)

Don't

국문 서체를 웨이트 파일 없이 800으로 부르지 않는다 — 로드된 파일은 Light·Regular·Medium·Bold 4종인데 600(1,409글리프)·800(1,212글리프)이 그 위에서 합성된다(해석)
선언 스택을 두 벌로 나누지 않는다 — 'Manrope, Noto Sans KR'(스타일 인스턴스 164회)과 'Noto Sans KR' 단독(85회)이 섞여 있어 같은 크기 단이 페이지마다 다른 스택으로 선언된다(20px·16px·14px·12px에 두 스택 버전이 각각 존재). 실렌더 결과는 같더라도 폴백이 바뀌면 조판이 갈린다
파일 없는 서체를 선언하지 않는다 — Inter를 3개 스타일이 1순위로 부르지만 폰트 URL 27개에 Inter가 없고 실렌더도 0글리프다
#8B8E95를 본문에 쓰지 않는다 (3.28:1 ×14, AA 미달). #3787FF도 #EDF5FF 위에서는 3.15:1이다
색 지면 위에 같은 계열 잉크를 얹지 않는다 — #161D30 on #1E2549 1.13:1 ×4 · on #307FE2 4.2:1 ×6이 남아 있다
그림자에 소수점 값을 그대로 옮기지 않는다 — 0 22.7929px 34.1894px, 0 23.5334px 20.1715px −28.5763px 같은 값은 디자인 툴 내보내기 잔재로 보인다(해석)
제품 앱 팔레트를 랜딩에 노출하지 않는다 — CSS 변수 81개(--color-file-pdf · --color-yellow-400-press 등)가 실려 있지만 랜딩에서 쓰이는 값은 0개다