잔디 (JANDI)

거의 흰 지면(#FAFAFC) 위에 56px 700 국문 히어로 한 덩어리, 색은 초록 #00C473 하나뿐.

잔디는 B2B 협업툴의 랜딩으로, 거의 흰 지면 위에 초록 한 색만 얹은 단정한 인상입니다. 국문 대형 제목이 전 페이지에 걸려 있는 드문 사례로, 홈을 포함한 다섯 페이지의 히어로가 56px 굵은 국문 한 덩어리입니다. 다만 자간을 선언한 스타일이 하나도 없어 자간 규칙의 레퍼런스로는 쓸 수 없고, 56px 제목의 행간도 본문만큼 성긴 편이라 값을 그대로 옮기기 전에 확인이 필요합니다. 제품 화면 캡처와 긴 요금 비교표가 중심이라 B2B SaaS 랜딩의 페이지 구성을 잡을 때 보면 좋습니다.

https://www.jandi.com/landing/kr

Color Palette

Primary

Label

Fill

Line

Background

Static

Accent

Typography

Noto Sans KR · 400 / 500 / 700display·heading·body·ui, 한글 100%

icomoon · 400icon

Apple SD Gothic Neo · 400fallback

Type Scale35개 스타일 전부 letterSpacing 미선언(raw typography

display56px · 700 · 1.43

다람쥐 헌 쳇바퀴

h144px · 700 · 1.45

다람쥐 헌 쳇바퀴

h242px · 700 · 1.43

다람쥐 헌 쳇바퀴

h2-sub40px · 700 · 1.4

다람쥐 헌 쳇바퀴

h332px · 700 · 1.25

다람쥐 헌 쳇바퀴

h424px · 700 · 1.58

다람쥐 헌 쳇바퀴

ui18px · 700 · 1.67

다람쥐 헌 쳇바퀴

body16px · 400 · 1

다람쥐 헌 쳇바퀴

body-sm15px · 400 · 2

다람쥐 헌 쳇바퀴

label14px · 500 · 1.43

다람쥐 헌 쳇바퀴

caption13px · 400 · 1.54

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Noto Sans KR — 한글 22,648글리프 중 Regular 17,366(76.7%)·Bold 4,500(19.9%)·Medium 741·icomoon 30·Apple SD Gothic Neo 9·PingFang SC 2. 선언 1순위는 'Noto Sans'이고 실제로 한글을 그리는 것은 Noto Sans KR이다(폰트 URL 0건 — 웹폰트/로컬 여부 미확인)
hangulWeights	400 주력(17,366) · 700 제목(3,891) · 600 선언도 Bold로 렌더(460) · 500 Medium은 nav·본문 보조(741)
body	16px/400 lh1.00(24회) 기준, 성긴 단락은 15px/400 lh2.00(9회), 법적 문서는 13px/400 lh1.54(18회)
sub	히어로 부제 15px/400 lh2.00 · 카드 설명 15px/500 lh1.47(8회)
label	nav·표 셀 14px/500 lh1.43(18회) · 버튼 18px/700 lh1.67(9회) · 캡션 12px/400 lh1.50(2회)
mixing	국영문을 폰트로 가르지 않는다 — 라틴 1,425글리프도 같은 Noto Sans KR가 그린다(Regular 997·Bold 397). 'AI'·'MCP'·'JANDI' 같은 영문 약어가 국문 제목 안에 그대로 섞여 들어간다(h1 'AI로 일이 술술 풀리는 협업툴 잔디')
hangulHeadings	있음. 56px/700 국문 h1이 5페이지(홈·프로젝트·비교·실시간 협업·고객사례), 44px/700이 2페이지(다운로드·회사소개), 섹션 제목은 42px/700 6회·40px/700 3회·32px/700 4회. 라이브러리에서 국문 대형 제목이 전 페이지에 걸린 드문 사례다
verdict	국문 히어로·섹션 제목 레퍼런스로 유효하다(56/700 lh1.43, 42/700 lh1.43). 단 자간이 35개 스타일 전부 미선언이라 자간 규칙 레퍼런스로는 쓸 수 없고, 56px에 lh1.43(80px)은 국문 디스플레이로는 성긴 편이라 값을 그대로 옮기기 전에 의도를 확인해야 한다.
rendered	Noto Sans KR Regular ×19404 · Noto Sans KR Bold ×4868 · Noto Sans KR Medium ×719 · icomoon ×15

영문 · Latin국문과 동일

latinFont	Noto Sans KR 12,101글리프(99.7%) · icomoon 21글리프(0.2%) · Apple SD Gothic Neo 17글리프(0.1%) · PingFang SC 2글리프(0.0%)
latinWeights	실측 페이스 Regular · Bold · Medium
share	라틴 12,141글리프 / 한글 25,006글리프 — 지면의 32.7%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Noto Sans KR를 쓰는 단: display 56px/700 · h1 44px/700 · h2 42px/700 · h2-sub 40px/700 · h3 32px/700 · h4 24px/700 · ui 18px/700 · body 16px/400 · body-sm 15px/400 · label 14px/500 · caption 13px/400
mixing	국영문 혼용 노드 719개(전체 1,981개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	라틴 32.7%를 국문 서체가 그대로 그린다 — 영문용 선택 없음
verdict	영문 전용 서체 없음 — 라틴 99.7%를 그리는 Noto Sans KR가 한글도 99.9% 그린다. 국영문을 한 서체가 맡는다
sharedWithKorean	국문과 같은 서체: Noto Sans KR · icomoon
rendered	Noto Sans KR Regular ×10179 · Noto Sans KR Bold ×1806 · Noto Sans KR Medium ×116 · icomoon ×21 · Apple SD Gothic Neo ×17 · PingFang SC ×2

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	regular
Base unit	8px
Max width	1200px
Docs width	1164px
Section gap	홈 기능 블록은 381px 높이가 560~561px 간격으로 6회 반복(y 1400→4203)
Header	66px fixed
Grid Home	홈 콘텐츠 780px — 고객사례 카드 3×3 780×439, 고객사 로고 16열 180×80 거터 5
Grid Pricing	1200px 12열 없음 — 비교표는 1200×56 행(13·5·7행)과 1200×76 행(멤버 관리·글로벌 지원)
Card Padding	다운로드 카드 304×260 거터 24 · 회사소개 뉴스 카드 392×306 거터 32 · 프로젝트 FAQ 행 1200×76
Button Padding	10px(주 CTA 18/700) · 12×30(도입문의) · 12×20(계산기) · 8×16(연간 토글) · 5×14(더 알아보기)

Border Radius

Role	Value	Preview
badge	4px	50회 · 배지 4종(pad 2×8)
button	6px	113회 · 버튼·링크 전부(a/button)
standard	8px	304회 · 카드·리스트·인풋 표준(div/li)
—	12px	10회 · 관측만
media	16px	52회 · 이미지. 상·하만 둥근 '16px 16px 0 0'·'0 0 16px 16px'이 각 44회 — 카드 머리/발 분할
media-large	30px	18회 · 큰 이미지·iframe(영상)
circle	50%	12회 · 아이콘·불릿(span/i)
pill	50px	3회 · 알약 링크 3곳뿐 — 이 사이트의 예외

Guidelines

국문 히어로는 56px/700 lh1.43(=80px) 2행으로 잡는다 — 5개 템플릿이 같은 값이다
액센트는 #00C473 한 색으로 버튼 배경·1px 보더(11회)·배지 틴트(.12)까지 돌려 쓴다
지면은 #FFFFFF와 #FAFAFC 두 장만 쓰고, 한 페이지 안에서 섞지 않는다(홈 13섹션 전부 #FAFAFC)
radius는 카드·리스트 8px, 버튼·링크 6px, 이미지 16px 세 값으로 끝낸다(합계 469회)
여백은 8px 배수(8·16·24·32·40)로만 — 8px가 1,254회로 압도적이다
콘텐츠 폭은 1200px을 기본으로, 카드가 큰 홈만 780px로 좁힌다
긴 문서(개인정보 처리방침)는 1164px 폭에 13px/400 lh1.54로 눕힌다

Don't

#00C473 위에 흰 글자를 작은 크기로 얹지 않는다 (2.3:1, 50쌍이 AA 미달) — 18px/700 이상에서만
#A2A2A2를 흰 지면 본문에 쓰지 않는다 (2.55:1) — 검정 푸터(6.96:1) 전용으로
자간을 임의로 넣지 않는다 — 이 사이트는 35개 스타일 전부 자간 미선언이다
그림자로 띄우지 않는다 — 12종 중 최다가 rgba(0,0,0,.08) 0 2px 16px 3px 36회로 거의 안 보이는 세기다
알약 버튼을 쓰지 않는다 (radius 50px 3회뿐, 버튼 표준은 6px 113회)
액센트를 늘리지 않는다 — #15BBC6(21회)·#69A7F3(148회)은 각각 한 페이지에만 있는 예외다
행간을 크기에 반비례로 짜지 않는다 — 이 사이트는 16px 본문이 lh1.00, 24px 제목이 lh1.58로 뒤집혀 있어 그대로 베끼면 본문이 붙는다