Kia (기아)

풀블리드 차량 사진 위 흰 한 획 로고와, 모서리 0px 미드나이트 블랙 사각 버튼 「견적 내기」

한국모빌리티소비자차가운modern-minimal고딕spacioussharpflat라이트한글 지원출시 2021개정 2021

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

Brand DNA

브랜드 DNA

브랜드명: 기아 (Kia, 2021년 1월 사명을 「기아자동차」에서 「기아」로 바꿈)
한 줄 정체성: 승용·RV·EV 에서 PBV(목적 기반 차량)까지 넓혀 가는 「지속가능한 모빌리티 솔루션 프로바이더」. 웹사이트는 차량 사진 한 장을 화면 가득 깔고 그 위에 미드나이트 블랙 사각 버튼 두 개(「자세히 보기」「견적 내기」)만 얹는 구성이다
공식 디자인 철학: 브랜드 슬로건 「Movement that inspires(영감을 주는 움직임)」, 디자인 철학 「Opposites United(상반된 개념의 조화)」 — 「빛과 그림자, 자연과 기술, 질서와 변화, 전통과 혁신」처럼 반대되는 것이 만나는 경계에서 새로운 길을 찾는다(worldwide.kia.com/kr/our-design). 2021년 1월 인천 하늘의 불꽃 드론 쇼로 새 로고를 공개했다
로고의 의미: 공식 「Our Symbol」 페이지는 새 로고에 Symmetry(대칭 — 자신감)·Rhythm(끊김 없는 리듬 — 영감의 순간)·Rising(솟아오르는 몸짓 — 브랜드의 포부) 세 원칙을 담았다고 설명한다. 손글씨 서명처럼 K·I·A 가 한 획으로 이어진다. 로고는 단색(검정 또는 흰색)으로만 쓰고 원형·타원 테(2021년 이전 로고)는 없다
색 체계(공식): 기본 2색 Kia Midnight Black·Kia Polar White + 포인트 1색 Kia Live Red. 흑과 백은 「서로 반대이면서 자연스러운 균형」 — 곧 Opposites United 의 색 버전이다. 보조색 Afternoon Yellow·Forest Green·City Grey 는 사진·경험 연출용이며 단색 면으로 쓰지 않는다(kia.com 「What is the meaning behind Kia's brand color?」). Live Red 는 로고·모티프에 쓰지 못한다
시그니처 요소 1개: 차량 사진이 꽉 찬 풀블리드 키비주얼 위에 흰 한 획 로고, 그리고 모서리 0px 의 미드나이트 블랙(#05141F) 사각 버튼 — 마우스를 올리면 왼쪽에서 오른쪽으로 #37434B 면이 0.4초 동안 차오른다

Tone & Mood

톤 & 무드

핵심 키워드 3개: 대담함, 절제, 대비
무드 설명: 색은 거의 흑백뿐이다. 사이트 CSS 의 hex 집계에서 #05141F 가 1,350회로 압도적 1위이고, 그다음이 회색 #697278·경계 #DADBDC·면 #F8F8F8 다. 색은 사진이 맡고 UI 는 미드나이트 블랙·폴라 화이트의 대비로만 말한다. 버튼·입력·카드 모서리를 대부분 각지게 두어 자동차 판금처럼 단단한 인상을 준다.
비주얼 스타일: 모던 미니멀 — 풀블리드 사진 + 흑백 타이포 + 1px 회색 경계선
밀도(Density): Spacious — 키비주얼이 뷰포트 높이 대부분을 차지하고 섹션 사이 여백이 넓다(컨테이너 1344px)
모서리 성향: Sharp (0~2px) — 주 버튼·보조 버튼·입력·탭은 0. 필터 칩(30px 알약)·일부 카드(8px)만 예외
평면성: Flat — 그림자는 드롭다운·하단 고정 바(0 -8px 20px rgba(5,20,31,.16))에만

Color System

컬러 시스템 (CSS 변수)

kia.com/kr clientlib-site.min.css(1.9MB) 등 CSS 4개의 hex 사용 빈도를 집계해 옮겼다. 사이트 CSS 에 --color-* 같은 색 토큰은 없고 hex 를 직접 쓴다. 공식 색 이름(Midnight Black·Polar White·Live Red)과 hex 의 연결은 CSS 실측으로 판단했다.

:root {
  /* Primary — Kia Midnight Black 램프. 500 이 실측 기본색, 위쪽은 사이트 회색 단계 */
  --color-primary-50:  #F8F8F8;  /* 섹션 면 (247회) */
  --color-primary-100: #F0F1F1;  /* 옅은 면·표 머리 (14회) */
  --color-primary-200: #DADBDC;  /* 기본 경계선 (380회) */
  --color-primary-300: #9FA5A9;  /* 보조 버튼 테두리·비활성 버튼 면 (52회) */
  --color-primary-400: #37434B;  /* 주 버튼 hover 채움(:after)·진한 보조 글자 (180회) */
  --color-primary-500: #05141F;  /* Kia Midnight Black — 본문·주 버튼·로고 (1,350회, 1위) */
  --color-primary-600: #010E18;  /* 더 깊은 면 (실측 4회) */
  --color-primary-700: #020B12;  /* (추정) */
  --color-primary-800: #01070C;  /* (추정) */
  --color-primary-900: #000000;

  /* Secondary — Kia Live Red: 포인트색. 필수 표시(*)·오류·등락 ↑·포커스 테에만 */
  --color-secondary-500: #EA0029; /* CSS 50회. 공식 이름 Live Red 와의 대응은 (추정) */

  /* Neutral — Kia 회색 */
  --color-neutral-0:    #FFFFFF;  /* Kia Polar White */
  --color-neutral-50:   #F8F8F8;
  --color-neutral-100:  #F0F1F1;
  --color-neutral-200:  #DADBDC;
  --color-neutral-300:  #B4B9BC;  /* 다크 버튼 비활성 글자 */
  --color-neutral-500:  #697278;  /* 보조 글자 (754회, 2위) */
  --color-neutral-700:  #37434B;
  --color-neutral-900:  #05141F;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #EAF4EE;   /* (추정) 사이트에 성공 전용 색 없음 */
  --color-success-fg: #1E7A45;   /* (추정) */
  --color-warning-bg: #FFF6E0;   /* (추정) */
  --color-warning-fg: #8A5A00;   /* (추정) */
  --color-error-bg:   #FDECEF;   /* (추정) */
  --color-error-fg:   #EA0029;   /* 실측 — .error_msg·.compulsory-tag */
  --color-info-bg:    #EEF4FE;   /* (추정) */
  --color-info-fg:    #0764ED;   /* 실측 7회 — 텍스트 링크 강조 */

  /* Surface */
  --bg-base:     #FFFFFF;        /* Polar White 페이지 */
  --bg-subtle:   #F8F8F8;        /* 섹션 반쪽 배경(.half-bg) */
  --bg-elevated: #FFFFFF;        /* 카드 */
  --bg-overlay:  rgba(5,20,31,0.7); /* 딤 — 실측 .dimbg */

  /* Text */
  --text-primary:    #05141F;
  --text-secondary:  #37434B;
  --text-tertiary:   #697278;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #9FA5A9;

  /* Border */
  --border-default: #DADBDC;
  --border-subtle:  #F0F1F1;
  --border-strong:  #9FA5A9;     /* .btn-secondary 테두리 */
  --border-focus:   #05141F;     /* 헤더 배너 링크는 Live Red 2px (예외) */
}

라이트 전용: kia.com 한국·글로벌 사이트 모두 다크 모드 토글이 없다. 키비주얼 위 헤더만 흰 로고(logo_w.svg)로 바뀌는 --white 변형이 있을 뿐이다. 그래서 이 문서는 라이트만 다룬다
Live Red 규칙: 공식 문서상 로고·모티프에는 쓰지 않는다. 넓은 면을 칠하지 않는다

Typography

타이포그래피

폰트 페어링:
- 한글: Kia Signature (기아 전용 서체, 비공개 — woff2 534KB 로 한글 글리프 포함 (추정)) / 폴백 Apple SD Gothic Neo, Malgun Gothic
- 영문: Kia Signature Bold · Regular · Light + 숫자 고정폭 Kia Signature Fix (전용) / 폴백 Arial
굵기 운용: 굵기를 font-weight 로 주지 않고 패밀리 이름을 바꿔 쓴다(font-family: Kia Signature Bold 787회, Regular 470회, Light 78회. 모두 font-weight:400). 제목·버튼 = Bold, 본문 = Regular, 키비주얼 윗줄(pre-title) = Light
위계 (PC 기준 실측, 모바일은 괄호):
- Display (키비주얼 main-title): 52px / Bold / 1.23 / normal (34px)
- H1: 42px / Bold / 1.3 / normal (28px)
- H2 (섹션 제목): 32px / Bold / 1.4 / normal (24px)
- H3: 24px / Bold / 1.4 / normal (20px)
- Body Large (키비주얼 pre-title): 18px / Light / 1.67 / normal (14px)
- Body: 16px / Regular / 1.5 / normal
- Body Small (버튼·링크): 14px / Bold / 1.43 / normal — 사이트에서 가장 많이 쓰는 크기(1,018회)
- Caption: 12px / Regular / 1.5 / normal
표기: 모델명은 영문 「The 2027 Sportage」「The Kia PV5」 처럼 정관사 The 를 붙인다. 한 줄 카피는 짧게(「Open Road SUV」「시대의 Mainstream」「우리만의 스케일대로」)

Spacing

스페이싱

Base unit: 8px (실측 여백 8·16·24·40·64px)
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; /* 버튼 세로 패딩 1pc */ --space-lg: 24px; /* 버튼 가로 패딩·퀵링크 간격 */ --space-xl: 40px; --space-2xl: 64px; /* 슬라이드 간격 상한 */ --space-3xl: 120px; /* 섹션 간격 (추정) */ ``
Container: max-width 1344px(84pc), 좌우 패딩 GNB clamp(16px, 5.78vw - 62.97px, 48px) — 모바일 16px·PC 48px

Border Radius

--radius-none: 0;        /* 주·보조 버튼, 입력, 탭, 키비주얼 — 기본값 */
--radius-sm: 4px;        /* 체크박스·작은 배지 */
--radius-md: 8px;        /* 일부 정보 카드·팝업 */
--radius-lg: 12px;       /* 모바일 바텀시트 윗모서리 (추정) */
--radius-xl: 16px;       /* (추정) 거의 쓰지 않음 */
--radius-full: 9999px;   /* 필터 칩(.btn-filters 30px)·슬라이드 도트·아이콘 원형 버튼 */

사이트 CSS 에서 border-radius:50%(원형 아이콘·도트) 다음으로 많은 것이 8px·0 이지만, 면적이 가장 넓은 버튼·입력은 전부 0 이라 성향은 Sharp.

Shadow / Elevation

--shadow-none: none;                                   /* 기본 — 카드도 경계선이나 면 구분만 */
--shadow-sm: 0 3px 6px 0 rgba(0,0,0,0.16);             /* 드롭다운·툴팁 (실측 10회) */
--shadow-md: 3px 8px 12px 0 rgba(5,20,31,0.12);        /* 떠 있는 차량 카드 (실측) */
--shadow-lg: 0 -8px 20px 0 rgba(5,20,31,0.16);         /* 하단 고정 견적 바 — 위로 드리움 (실측) */
--shadow-xl: 0 7px 15px 0 rgba(0,0,0,0.2);             /* 모달 (실측 4회) */

Iconography

스타일: Outline (단색, 퀵메뉴 아이콘은 흰색 버전 -w.svg 짝을 둔다: 자동차·핸들·위치·선물상자)
Stroke 굵기: 1.5px (추정)
모서리 처리: Square 에 가까운 각진 끝 (추정)
추천 라이브러리: 실제는 /content/dam/kwp/.../icon/*.svg 자체 세트. 대체재는 Lucide (stroke 1.5)
화살표: 텍스트 링크 뒤에 icon_Chevron-Right.svg 16px, 외부 링크엔 icon_arro_link.svg

Component Guide

컴포넌트 가이드 (상태별 CSS)

Button — .btn-primary·.btn-secondary 실측. 모서리 0, 높이 48px, 왼쪽에서 차오르는 hover

.kia-btn {
  position: relative; z-index: 1; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  min-width: 88px; height: 48px; padding: 0 24px; border-radius: var(--radius-none); text-decoration: none;
  font: 400 14px/1 "Kia Signature Bold", "Kia Signature", Arial, sans-serif; cursor: pointer;
  transition: color var(--duration-base) var(--ease-in-out);
}
.kia-btn::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; z-index: -1; transition: width var(--duration-base) var(--ease-in-out); }
.kia-btn:hover::after { width: 100%; }
.kia-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.kia-btn--primary { background: var(--color-primary-500); border: 1px solid var(--color-primary-500); color: var(--text-on-primary); }
.kia-btn--primary::after { background: var(--color-primary-400); }             /* #37434B 가 차오름 */
.kia-btn--primary:active::after { background: var(--color-primary-600); width: 100%; }
.kia-btn--primary:disabled { background: #9FA5A9; border-color: #9FA5A9; color: rgba(255,255,255,.6); }
.kia-btn--primary:disabled::after { display: none; }
.kia-btn--primary[aria-busy="true"] { color: transparent; }
.kia-btn--primary[aria-busy="true"]::before {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; animation: kia-spin .8s linear infinite;
}
@keyframes kia-spin { to { transform: rotate(360deg); } }

.kia-btn--secondary { background: #fff; border: 1px solid var(--border-strong); color: var(--text-primary); }
.kia-btn--secondary::after { background: var(--color-primary-50); }
.kia-btn--secondary:hover { border-color: var(--text-primary); }
.kia-btn--secondary:disabled { color: var(--text-disabled); border-color: var(--border-default); }

/* 사진 위 흰 버튼 — .btn-secondary.no-border / .btn-primary.type-dark */
.kia-btn--ghost { background: #fff; border: 1px solid #fff; color: var(--text-primary); }
.kia-btn--ghost::after { background: #DADBDC; }
.kia-btn--ghost:disabled { background: #828A8F; border-color: #828A8F; color: #B4B9BC; }

.kia-btn--danger { background: #fff; border: 1px solid var(--color-secondary-500); color: var(--color-secondary-500); } /* (추정) — 사이트에 빨간 채움 버튼 없음 */
.kia-btn--danger::after { background: #FDECEF; }
.kia-btn--danger:disabled { color: var(--text-disabled); border-color: var(--border-default); }

Input — 각진 박스, 밑줄이 아닌 1px 테

.kia-input { width: 100%; height: 48px; padding: 0 16px; border: 1px solid var(--border-default); border-radius: 0; background: #fff; font: 400 16px/1.5 "Kia Signature Regular", "Kia Signature", Arial, sans-serif; color: var(--text-primary); }
.kia-input::placeholder { color: var(--text-tertiary); }
.kia-input:focus { border-color: var(--border-focus); outline: none; }           /* 한 겹 */
.kia-input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.kia-input[aria-invalid="true"] + .kia-input__msg { color: var(--color-error-fg); font-size: 14px; margin-top: 8px; }
.kia-input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }
.kia-search { display: flex; height: 56px; border-bottom: 2px solid var(--text-primary); }  /* 통합검색 — 56px 검색 버튼 */

Card — 차량 카드(사진 + 모델명 + 가격) / 강조(검정 면) / Outlined

.kia-card { background: var(--bg-elevated); padding: 24px; border-radius: 0; }
.kia-card__img { aspect-ratio: 16 / 9; background: var(--bg-subtle); }
.kia-card__name { font: 400 20px/1.4 "Kia Signature Bold", Arial, sans-serif; margin-top: 16px; }
.kia-card__price { font: 400 14px/1.43 "Kia Signature Regular", Arial, sans-serif; color: var(--text-tertiary); }
.kia-card:hover { box-shadow: var(--shadow-md); }
.kia-card--strong { background: var(--color-primary-500); color: #fff; }
.kia-card--outlined { border: 1px solid var(--border-default); }

Badge / Tag

.kia-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: var(--radius-none); font: 400 12px/1 "Kia Signature Bold", Arial, sans-serif; }
.kia-badge--solid   { background: var(--color-primary-500); color: #fff; }        /* NEW · EV */
.kia-badge--subtle  { background: var(--color-primary-100); color: var(--text-secondary); }
.kia-badge--outline { border: 1px solid var(--border-strong); color: var(--text-primary); }
.kia-chip { height: 36px; padding: 0 24px; border: 1px solid var(--border-strong); border-radius: 30px; font: 400 12px/1 "Kia Signature Bold", Arial, sans-serif; } /* .btn-filters 실측 */
.kia-chip[aria-pressed="true"] { background: var(--color-primary-500); border-color: var(--color-primary-500); color: #fff; }

Navigation — 투명 헤더(키비주얼 위 흰 로고) ↔ 스크롤 뒤 흰 헤더

.kia-gnb { position: fixed; inset: 0 0 auto; height: 72px; padding: 0 clamp(16px, 5.78vw - 62.97px, 48px); display: flex; align-items: center; gap: 48px; background: #fff; border-bottom: 1px solid var(--border-default); z-index: 10; }
.kia-gnb--white { background: transparent; border-color: transparent; color: #fff; }   /* 원본 .global-header--white */
.kia-gnb__logo { width: 102px; }                                                      /* 모바일 70px (--gnb-logo-width) */
.kia-gnb__menu { display: flex; gap: 40px; font: 400 16px/1 "Kia Signature Bold", Arial, sans-serif; }
.kia-gnb__menu a { color: inherit; text-decoration: none; padding: 28px 0; border-bottom: 2px solid transparent; }
.kia-gnb__menu a:hover { border-bottom-color: currentColor; }
.kia-gnb__util { margin-left: auto; display: flex; gap: 20px; }

실제 1단 메뉴: 차량 · 구매 · 체험 · 이벤트 · 고객 지원 · Discover Kia · Kia Connect · PBV. 메가 메뉴 맨 아래에 늘 「견적 내기 · 카탈로그/가격표 · 시승 신청 · 이 달의 구매 혜택」 바로가기가 붙는다.

Motion

--duration-fast: 300ms;                          /* 일반 hover (transition: all .3s — 62회, 최다) */
--duration-base: 400ms;                          /* 버튼 hover 채움 (.btn-primary:after .4s) */
--duration-slow: 500ms;                          /* 키비주얼 제목 슬라이드 인 */
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* (추정) */
--ease-in-out: ease-in-out;

키비주얼은 swiper 로 넘어가며, 활성 슬라이드의 pre-title·main-title 이 translateX + opacity 로 왼쪽에서 들어온다. 좌하단에 「01 / 05」 진행 막대와 일시정지 버튼. prefers-reduced-motion 이면 자동 넘김과 이동을 끈다.

Anti-patterns

1. 버튼·입력에 둥근 모서리 주기 금지 — 기아 주 버튼은 0px 사각. 알약은 필터 칩에만 2. Live Red 를 로고·모티프·넓은 배경에 쓰기 금지 — 공식 규정상 로고와 모티프에는 쓰지 않고, 사이트에서도 필수 표시·오류 같은 작은 신호에만 3. 옛 타원 엠블럼(2021년 이전 「KIA」 원형 로고)이나 「기아자동차」 표기 재사용 금지 — 현행은 한 획 서명 로고·「기아」 4. 보조색(Afternoon Yellow·Forest Green·City Grey)을 단색 UI 면으로 칠하기 금지 — 공식 설명대로 사진·경험 연출에만 5. 키비주얼 위에 버튼을 세 개 이상 늘어놓기 금지 — 「자세히 보기」(흰색)·「견적 내기」(검정) 두 개가 원칙

Kia (기아)

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드 (상태별 CSS)

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처