KT&G

흰 지면에 검정 한 색, 첫 화면만 3D 유리 꽃잎 영상이 색을 맡는 코퍼레이트 사이트.

KT&G는 흰 지면과 검정 글자, 회색 한 단계만 쓰는 절제된 코퍼레이트 사이트입니다. 첫 화면은 붉은색·초록·회색 유리 꽃잎이 놓인 전폭 영상이 색을 전부 맡고, 그 아래는 글자와 숫자가 중심입니다. 국문 대형 제목(63px·54px·48px, 굵기 600, Pretendard)이 홈과 서브 페이지 곳곳에 있어 국문 제목 타이포그래피를 참고하기 좋고, 홈 첫 화면 영문 제목은 Figtree입니다. 스크롤에 맞춰 장면이 바뀌는 긴 홈 구조와 연혁처럼 연도별 블록을 길게 쌓는 서브 페이지 구성을 배울 만합니다.

https://www.ktng.com

Color Palette

Primary

Label

Background

Line

Accent

Typography

Pretendard Variable · 400 / 500 / 600 / 700국문 제목·본문·UI 전부

Figtree · 500 / 600영문 디스플레이 (홈 히어로 'Beyond Limits,'·'Sustainability for Growth')

Type Scale크기는 layout

display-xl115.2px · 500 · 1

Handgloves 123

display96px · 600 · 1.13

Handgloves 123

stat78px · 600 · 1

다람쥐 헌 쳇바퀴

h2-xl63px · 600 · 1.4

다람쥐 헌 쳇바퀴

h254px · 600 · 1.4

다람쥐 헌 쳇바퀴

h348px · 600 · 1.4

다람쥐 헌 쳇바퀴

h432px · 600 · 1.4

다람쥐 헌 쳇바퀴

page-h128px · 700 · 1.5

다람쥐 헌 쳇바퀴

h522.4px · 600 · 1.4

다람쥐 헌 쳇바퀴

nav17.5px · 500 · 1.4

다람쥐 헌 쳇바퀴

body15px · 400 · 1.6

다람쥐 헌 쳇바퀴

caption13.1px · 500 · 1.4

다람쥐 헌 쳇바퀴

국문 · Korean

hangulFont	Pretendard Variable (한글 27,217글리프, 100%, webfont)
hangulWeights	400 주력(20,323) · 500(3,094) · 600(3,027) · 700(773)
body	15px w400 lh1.6 자간 −2% (raw 1920)
sub	17.5px w500 (GNB 6항목)
label	13.1px w500 (보조 GNB)
mixing	국문은 Pretendard 단일. 영문 디스플레이만 Figtree. 한 줄 안 혼용은 Pretendard 단일(예: 'KT&G가 그리는 미래는…')
hangulHeadings	있음 — 63px/600 '우리는 글로벌 리더 KT&G입니다'·54px/600 '시간이 지나도 변하지 않는 도전의 가치,'·48px/600 'KT&G가 그리는 미래는 지속가능성에 기반합니다'·서브 페이지 h1 28px/700 (1440, Pretendard). 단 홈 첫 화면 최대 제목 96px은 영문 Figtree
verdict	국문 대형 제목 레퍼런스로 유효(63·54·48px/600, 자간 −3%, Pretendard). 홈 첫 화면 히어로 자체는 영문이라 국문 히어로로는 서브 페이지 타이틀(54px)을 참고한다
rendered	Pretendard Variable ×27217

영문 · Latin영문 전용

latinFont	Pretendard 14,788글리프(98.4%) · Figtree 244글리프(1.6%) · Apple SD Gothic Neo 2글리프(0.0%)
latinWeights	실측 페이스 Light
share	라틴 15,034글리프 / 한글 27,217글리프 — 지면의 35.6%가 라틴이다 (1440 CDP 실측)
scale	타입 스케일에서 Pretendard를 쓰는 단: stat 78px/600 · h2-xl 63px/600 · h2 54px/600 · h3 48px/600 · h4 32px/600 · page-h1 28px/700 · h5 22.4px/600 · nav 17.5px/500 · body 15px/400 · caption 13.1px/500
mixing	국영문 혼용 노드 944개(전체 2,880개) — 혼용 노드는 한글만 담은 프로브로 재측정해 라틴 글리프를 한글 집계에서 분리했다
roleNote	Figtree 영문 전용(1.6% · 선언됨 · 최상단 디스플레이 독점)
verdict	영문 전용 서체가 있다 — Figtree 라틴 1.6% / 한글 0.0% · 최상단 디스플레이 독점. 영문 디스플레이 레퍼런스로 유효(타입 스케일 최대 115.2px)
sharedWithKorean	국문과 같은 서체: Pretendard
rendered	Pretendard Variable ×14788 · Figtree Light ×244 · Apple SD Gothic Neo ×2

Spacing & Shape

Spacing

Purpose	Value	Preview
Density	spacious
Base unit	8px
Max width	1316px
Section gap	서브 페이지 히어로 안쪽 위 175(소개)·140(인사제도)·196(문의·IR 타이틀 372px 밴드, 아래 88) / 홈 뉴스·IR·Business 섹션 위 123·아래 105~140
Header	91px fixed
Grid Card3	3열 316×334 거터 18 (경영이념, 소개 페이지)
Grid Stat	3열 427×157 거터 18 (소개 페이지 수치 카드)
Grid Stat Home	5열 350×368 거터 28 (홈 수치 섹션 y1092 h4500)
Grid List	연혁 연도 행 650×82 단일 열, 인사제도 카드 761×227
Button Padding	16×22 알약 / 8×16 칩 / 8×24 언어 버튼 / 12×20 입력

Border Radius

Role	Value	Preview
small	4px	6회 · 배지
standard	8px	66회 · 카드·입력·이미지
chip	100px	49회 · 버튼·칩
circle	100%	27회 · 아이콘 버튼
pill	9999px	84회 · JPG/AI 다운로드·언어 버튼