KRAFTON (크래프톤)

KRAFTON 레드 위에서 프레임이 비껴 열리는 Perspective Shift — PIONEER THE UNDISCOVERED

한국게이밍엔터프라이즈중립modern-minimalbrutalism고딕spacioussharpflat라이트공식한글 지원출시 2018개정 2026

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: KRAFTON (크래프톤)
한 줄 정체성: PUBG를 비롯한 독창적인 게임 IP와 AI 기술로 새로운 엔터테인먼트 세계를 개척하는 글로벌 퍼블리셔
공식 디자인 철학: Perspective Shift(관점의 전환) — 익숙한 시점을 비틀어 아직 발견되지 않은 가능성을 확장하고, "Pioneer the Undiscovered"라는 태도를 시각화한다
시그니처 요소 1개: KRAFTON 레드(#F6141E) 색면과 검정 프레임이 서로 다른 각도로 비껴 열리며 다음 장면을 드러내는 Perspective Shift 모티프

Tone & Mood

톤 & 무드

핵심 키워드 3개: 담대함, 개척적 에너지, 강렬한 대비
무드 설명: 밝은 캔버스 위에 검정 타이포와 선명한 KRAFTON 레드를 크게 배치한다. 프레임과 색면은 서로 다른 각도로 이동하며 익숙한 구도를 열어젖히고, 짧은 대문자 메시지와 넓은 여백이 글로벌 퍼블리셔의 자신감을 만든다.
비주얼 스타일: 모던 미니멀 + 브루털리즘 (초대형 영문 디스플레이 · 하드 엣지 · 과감한 레드 색면)
밀도(Density): Spacious — 한 화면에 하나의 선언적 메시지와 큰 색면을 두고, IP 정보는 짧은 모듈로 분리
모서리 성향: Sharp(0~2px) — Perspective Shift 프레임의 직각과 예각이 시그니처
평면성: Flat — 그림자를 거의 쓰지 않고 색면 대비와 괘선으로 위계를 만든다

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - KRAFTON Red 9단계 (시그니처 강조) */
  --color-primary-50:  #FEE8E9;   /* 연한 강조 배경 */
  --color-primary-100: #FCC5C8;
  --color-primary-200: #FA9499;
  --color-primary-300: #F8636B;
  --color-primary-400: #F73C45;
  --color-primary-500: #F6141E;   /* KRAFTON Red — 시그니처 강조 */
  --color-primary-600: #D60710;   /* hover */
  --color-primary-700: #A8060D;   /* active */
  --color-primary-800: #7A0409;
  --color-primary-900: #4D0206;

  /* Secondary - Signal Amber (실적/IR 강조) */
  --color-secondary-300: #FCD66B;
  --color-secondary-500: #F5B400;  /* Signal Amber — 핵심 수치 하이라이트 */
  --color-secondary-700: #B98600;

  /* CSR 영역 컬러 (영역별 보고서에서만 제한적 사용) */
  --color-csr-green:  #2BD15E;     /* Digital Empowerment */
  --color-csr-blue:   #2D7FF9;     /* Shared Growth */
  --color-csr-purple: #8B5CF6;     /* Inclusive Universe */

  /* Neutral - 흑백 램프 (브랜드 시그니처) */
  --color-neutral-0:    #FFFFFF;   /* Paper White */
  --color-neutral-50:   #FAFAFA;
  --color-neutral-100:  #F2F2F2;   /* Light Fill — 표 줄무늬/강조 박스 */
  --color-neutral-200:  #E6E6E6;
  --color-neutral-300:  #D9D9D9;   /* Line Gray — 괘선/구분선 */
  --color-neutral-500:  #5C5C5C;   /* Sub Gray — 캡션/단위 */
  --color-neutral-700:  #2E2E2E;
  --color-neutral-800:  #1A1A1A;   /* Body Ink — 본문 텍스트 */
  --color-neutral-900:  #111111;   /* KRAFTON Black — 표지/헤더 */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E6F9EE;   --color-success-fg: #1B9E45;  /* 증가/흑자 */
  --color-warning-bg: #FEF6E0;   --color-warning-fg: #B98600;  /* 주의 (앰버) */
  --color-error-bg:   #FEE8E9;   --color-error-fg:   #D60710;  /* 감소/적자 */
  --color-info-bg:    #E8F1FE;   --color-info-fg:    #2D7FF9;  /* 참고 */

  /* Surface (배경 위계) */
  --bg-base:     #FFFFFF;   /* 페이지 기본 (라이트 보고서) */
  --bg-subtle:   #F2F2F2;   /* 섹션 구분/표 줄무늬 */
  --bg-elevated: #FFFFFF;   /* 카드 */
  --bg-overlay:  rgba(17,17,17,0.55);   /* 모달/드롭다운 */

  /* Text 위계 */
  --text-primary:    #1A1A1A;   /* 본문 (Body Ink) */
  --text-secondary:  #5C5C5C;   /* 보조 (Sub Gray) */
  --text-tertiary:   #8A8A8A;   /* 캡션/단위 */
  --text-on-primary: #FFFFFF;   /* 레드/블랙 위 */
  --text-disabled:   #B5B5B5;

  /* Border */
  --border-default: #D9D9D9;   /* Line Gray — 표 괘선 */
  --border-subtle:  #E6E6E6;
  --border-strong:  #111111;   /* 블랙 강조 테두리/세로 컬러바 */
  --border-focus:   #F6141E;   /* 포커스 링 (레드) */
}

Typography

타이포그래피

폰트 페어링:
- 한글: Pretendard (OFL) — 미설치 환경 폴백 맑은 고딕(Malgun Gothic)
- 영문/숫자: Arial · Helvetica 계열 Bold — 핵심 헤드라인은 대문자(UPPERCASE) 처리
- 원칙: 한 문서에 2종 이내(한글 + 영문)로 통일
위계 (font-size / font-weight / line-height / letter-spacing):
- Display (영문 대문자): 44px / 800 / 1.0 / +0.03em (UPPERCASE)
- H1 (섹션 제목): 28px / 700 / 1.15 / -0.01em — 좌측 컬러바 + 번호
- H2 (소제목): 20px / 700 / 1.25 / -0.005em
- H3: 16px / 700 / 1.3 / 0
- Body Large: 17px / 400 / 1.6 / 0
- Body: 15px / 400 / 1.6 / 0
- Body Small: 13px / 400 / 1.5 / 0
- Caption · 단위: 12px / 500 / 1.4 / +0.01em (Sub Gray)
- KPI (핵심 수치): 40px / 800 / 1.0 / -0.02em (영문/숫자, 강조색 가능)

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; ``
Container: max-width 1200px (기본), 900px (좁은 보고서 본문) / 좌우 패딩 30px

Border Radius

--radius-none: 0;       /* 표지·표 헤더·검정 블록 (기본 — 하드 엣지) */
--radius-sm:   2px;     /* 버튼·인풋 */
--radius-md:   4px;     /* 카드 */
--radius-lg:   8px;     /* 강조 박스 (예외적) */
--radius-xl:   12px;
--radius-full: 9999px;  /* 뱃지/필 (제한적) */

> KRAFTON은 Sharp 성향 — 기본은 0~2px. 둥근 모서리는 강조 박스 등 예외에만 사용.

Shadow / Elevation

--shadow-none: none;                              /* 기본 — 평면 + 괘선으로 위계 */
--shadow-sm:   0 1px 2px rgba(17,17,17,0.06);     /* 가벼운 카드 분리 */
--shadow-md:   0 2px 8px rgba(17,17,17,0.08);     /* 카드 hover */
--shadow-lg:   0 8px 24px rgba(17,17,17,0.12);    /* 모달 */
--shadow-xl:   0 16px 40px rgba(17,17,17,0.16);   /* 풀스크린 dialog */

> Flat 브랜드 — 그림자보다 --border-strong(블랙) 테두리와 색면 대비를 우선한다.

Iconography

스타일: Outline (정밀, 기하학적)
Stroke 굵기: 2px
모서리 처리: Square (사선/직각 모티프와 일치)
추천 라이브러리: Lucide / Tabler

Component Guide

컴포넌트 가이드

Button — Primary는 KRAFTON Black 고대비, 레드는 단일 강조(accent)로 절제 사용

.btn {
  font: 700 14px/1 Arial, 'Pretendard', -apple-system, sans-serif;
  border-radius: var(--radius-sm);
  height: 44px; padding: 0 22px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid transparent;
  letter-spacing: 0.01em;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.btn-primary { background: var(--color-neutral-900); color: #fff; }      /* 블랙 고대비 */
.btn-primary:hover { background: #000; }
.btn-primary:active { background: #000; transform: translateY(1px); }
.btn-primary:disabled { background: var(--color-neutral-200); color: var(--text-disabled); }
.btn-primary.is-loading { color: transparent; position: relative; }

.btn-accent { background: var(--color-primary-500); color: #fff; }       /* 레드 — 페이지당 1개 */
.btn-accent:hover { background: var(--color-primary-600); }
.btn-accent:active { background: var(--color-primary-700); }

.btn-secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--color-neutral-100); }

.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-ghost:hover { background: var(--color-neutral-100); }

.btn-danger { background: var(--color-error-fg); color: #fff; }

Input — Default / Focus / Error / Disabled

.input {
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  height: 44px; padding: 0 14px;
  font: 400 15px/1.4 'Pretendard', Arial, sans-serif;
  color: var(--text-primary);
}
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 2px rgba(246,20,30,0.20); }
.input.is-error { border-color: var(--color-error-fg); }
.input:disabled { background: var(--color-neutral-100); color: var(--text-disabled); }

Card — 기본형 / 강조형 / Outlined

.card { background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 24px; }
.card-emphasis { border: 2px solid var(--border-strong); }              /* 블랙 강조 */
.card-outlined { background: transparent; box-shadow: none; }
.card-kpi { background: var(--color-neutral-900); color: #fff; border: 0; }  /* KPI 블록 */
.card-kpi .num { font: 800 40px/1 Arial, sans-serif; color: var(--color-secondary-500); }

Badge / Tag — Solid / Subtle / Outline

.tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-sm); font: 700 12px/1.4 Arial, sans-serif; letter-spacing: 0.02em; text-transform: uppercase; }
.tag-solid   { background: var(--color-primary-500); color: #fff; }
.tag-subtle  { background: var(--color-primary-50); color: var(--color-primary-700); }
.tag-outline { border: 1px solid var(--border-strong); color: var(--text-primary); }
.tag-amber   { background: var(--color-secondary-500); color: #111; }

Navigation — 머리글(헤더) 1종: 좌측 워드마크 + 우측 문서명 + 얇은 하단선

.topnav {
  display: flex; align-items: center; gap: 24px;
  padding: 16px 30px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-default);
}
.topnav .wordmark { font: 900 16px/1 Arial, sans-serif; letter-spacing: 0.18em; color: var(--text-primary); }
.topnav .doc-name { margin-left: auto; font: 500 13px/1 'Pretendard', sans-serif; color: var(--text-secondary); }

Motion

--duration-fast: 120ms;
--duration-base: 240ms;
--duration-slow: 400ms;
--ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

> 절제된 모션 — 짧고 단호하게. 과한 바운스/이징은 지양.

Anti-patterns

이 브랜드가 회피하는 패턴 5개: 1. 중간 톤의 모호한 회색 배경을 기본 캔버스로 사용 금지 — 흰색 또는 KRAFTON Black 고대비가 원칙 2. 한 섹션에 강조색을 2개 이상 흩뿌리기 금지 — Single Accent, 페이지당 강조색 1개 3. Perspective Shift 프레임을 임의의 장식 사선처럼 반복하거나 핵심 문구의 가독성을 가리기 금지 4. 여러 게임의 고유 비주얼을 한 화면에 무질서하게 섞기 금지 — IP마다 독립된 프레임과 명확한 라벨을 제공 5. 둥근 모서리·과한 그림자로 부드럽게 처리 금지 — 하드 엣지와 색면 대비를 우선

KRAFTON (크래프톤)

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처