모든 도구 디자인 시스템 갤러리

Hyundai Motor (현대자동차)

현대 블루 가로 로고, 따뜻한 라이트 샌드 바탕, 각진 파란 견적 버튼

한국모빌리티차가운modern-minimalhumanism고딕spacioussharpflat라이트한글 지원출시 2016개정 2016

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

Brand DNA

브랜드 DNA

  • 브랜드명: 현대자동차 (Hyundai Motor). 현대자동차그룹 전체나 현대카드·기아의 시각 체계와 구분한다.
  • 한 줄 정체성: 자동차와 이동 서비스를 통해 사람의 일상을 넓히는 모빌리티 브랜드.
  • 공식 디자인 철학: 브랜드 비전은 「휴머니티를 향한 진보」(Progress for Humanity). 기술의 발전을 사람에 대한 배려와 연결한다. CI 안내는 로고가 간결한 브랜드 방향성을 보여 준다고 설명한다.
  • 시그니처 요소 1개: 라이트 샌드 위의 실물감 있는 차량과 각진 현대 블루 견적 버튼. 흰 머리띠 아래에 얇은 단계 구분선을 놓고, 차량의 넓은 가로 실루엣과 절제된 모델명을 함께 보여 준다. 푸른색은 선택 밑줄·가격·완료 버튼에 모아 차량과 선택 사양을 먼저 읽게 한다.
  • 문서의 범위: 공식 CI의 색·로고와 2026-10-04 현대닷컴의 HTML·CSS를 함께 정리했다. 공개된 웹 컴포넌트 디자인 시스템의 공식 배포본은 아니므로 is_official: false, source_type: hybrid, confidence: medium이다. 실제 차량 인포테인먼트의 디자인 체계는 다루지 않는다.
  • 연도 표기 (추정): 공식 발표문은 Hyundai Sans가 글로벌 브랜드 아이덴티티 개편의 일부로 2016년에 도입됐다고 밝힌다. 두 연도 필드는 이 시점을 분류 기준으로 삼았다. 웹 디자인 시스템의 첫 공개 연도와 이후 가장 최근 CI 개편 연도는 확인하지 못했다.

Tone & Mood

톤 & 무드

  • 핵심 키워드 3개: 신뢰감, 따뜻함, 절제
  • 무드 설명: 라이트 샌드를 넓게 깐 차량 스튜디오와 흰색 사양 패널을 맞대어 놓는다. 모델명은 간결하게, 트림·구동 방식·인치·가격은 촘촘하게 읽히도록 크기 차를 만든다. UI의 그림자는 억제하고 차체의 반사광과 접지 그림자만 살려, 현대 블루의 각진 완료 버튼으로 시선을 이어 간다.
  • 비주얼 스타일: 모던 미니멀, 휴머니즘 — 각진 UI와 넓은 여백에 부드러운 전용 서체를 함께 쓴다.
  • 밀도(Density): Spacious — 공용 콘텐츠 폭은 1120px이고 모델 목록은 위 40px·아래 50px의 여백을 쓴다. 헤더는 별도로 최대 1400px이다.
  • 모서리 성향: Sharp (0~2px) — 기본 버튼·텍스트 링크·입력은 각진 형태. 둥근 태그와 푸터 펼침판은 별도 예외다.
  • 평면성: Flat — 카드마다 떠오르는 그림자보다 라이트 샌드 면과 얇은 선으로 구획한다. 그림자는 검색 목록·도움말 같은 떠 있는 요소에 집중된다.

Color System

컬러 시스템 (CSS 변수)

공식 CI 9색은 전용색상 페이지의 HEX와 RGB를 대조했다. 모두 2026-10-04 curl 응답 200으로 확인했다.

| 공식 이름 | HEX | RGB | 이 문서에서의 역할 | |---|---|---|---| | 현대 블루 (Hyundai Blue) | #002C5F | 0, 44, 95 | 로고·주 버튼 | | 현대 샌드 (Hyundai Sand) | #E4DCD3 | 228, 220, 211 | 따뜻한 보조 면·선 | | 현대 라이트 샌드 (Hyundai Light Sand) | #F6F3F2 | 246, 243, 242 | 옅은 섹션 바탕 | | 현대 골드 (Hyundai Gold) | #A36B4F | 163, 107, 79 | 제한된 장식 강조 | | 흰색 (White) | #FFFFFF | 255, 255, 255 | 페이지·카드 | | 검정 (Black) | #000000 | 0, 0, 0 | 제목·본문 | | 액티브 블루 (Active Blue) | #00AAD2 | 0, 170, 210 | 작은 그래픽 강조 | | 스카이 블루 (Sky Blue) | #AACAE6 | 170, 202, 230 | 옅은 파란 그래픽 | | 액티브 레드 (Active Red) | #E63312 | 230, 51, 18 | 선택적인 강조 |

현대닷컴의 .btn.btn-skyblue는 CI의 액티브 블루와 다른 `#007FA8`을 쓴다. 두 색을 같은 값으로 취급하지 않는다. 아래 이름은 재사용을 위해 붙인 이름이며 공식 토큰명이 아니다.

Primary 단계 배치 (추정): 공식적인 50~900 명도 사다리는 공개 자료에서 확인하지 못했다. 스키마를 맞추되 새 색을 만들지 않고 확인한 색을 재사용한다. 50~300과 500~900의 반복은 의도적이다. 공식 단계별 색상표로 해석하지 않는다.

:root {
  /* Primary — 단계 이름은 재구성, HEX는 공식 CI·현대닷컴 실측 */
  --color-primary-50:  #AACAE6; /* 공식 스카이 블루 재사용 */
  --color-primary-100: #AACAE6; /* 별도 100단계 미확인 */
  --color-primary-200: #AACAE6; /* 별도 200단계 미확인 */
  --color-primary-300: #AACAE6; /* 별도 300단계 미확인 */
  --color-primary-400: #007FA8; /* 실측 .btn.btn-skyblue */
  --color-primary-500: #002C5F; /* 공식 현대 블루, 실측 .btn.btn-normal */
  --color-primary-600: #002C5F; /* 더 짙은 공식 단계 미확인 */
  --color-primary-700: #002C5F; /* 현대 블루 재사용 */
  --color-primary-800: #002C5F; /* 현대 블루 재사용 */
  --color-primary-900: #002C5F; /* 현대 블루 재사용 */

  /* Secondary — 공식 CI, 역할 이름은 이 문서의 재구성 */
  --color-secondary-50:  #F6F3F2; /* 현대 라이트 샌드 */
  --color-secondary-500: #E4DCD3; /* 현대 샌드 */
  --color-accent-blue:   #00AAD2; /* 공식 액티브 블루 */
  --color-accent-red:    #E63312; /* 공식 액티브 레드 */
  --color-accent-gold:   #A36B4F; /* 공식 현대 골드 */

  /* Neutral — 현대닷컴 CSS에서 확인한 중립색 */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F6F3F2; /* 따뜻한 중립 바탕 */
  --color-neutral-100:  #E5E5E5; /* 구획 선 */
  --color-neutral-200:  #E5E5E5; /* 같은 선색 재사용 */
  --color-neutral-300:  #CCCCCC; /* 모델 목록 경계 */
  --color-neutral-400:  #CECDCA; /* 비활성 버튼 면 */
  --color-neutral-500:  #767676; /* 날짜·보조 버튼 */
  --color-neutral-700:  #444444; /* 푸터 링크·드롭다운 */
  --color-neutral-900:  #1C1B1B; /* 사이트 CSS의 짙은 중립색 */
  --color-neutral-1000: #000000;

  /* Semantic — 홈페이지에 포함된 Element UI CSS의 구현색, CI 색이 아님 */
  --color-success-bg: #F0F9EB; /* .el-alert--success */
  --color-success-fg: #67C23A;
  --color-warning-bg: #FDF6EC; /* .el-alert--warning */
  --color-warning-fg: #E6A23C;
  --color-error-bg:   #FEF0F0; /* .el-alert--error */
  --color-error-fg:   #F56C6C;
  --color-info-bg:    #F4F4F5; /* .el-alert--info */
  --color-info-fg:    #909399;
  --color-input-error: #FF0000; /* 별도 .input-error의 CSS red */

  /* Surface — 실제 면의 역할을 옮김 */
  --bg-base:     #FFFFFF;
  --bg-subtle:   #F6F3F2;
  --bg-sand:     #E4DCD3;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  #FFFFFF; /* 팝업 패널, 뒤의 딤과 구분 */

  /* Text — 현대닷컴 .btn·본문·보조 텍스트 */
  --text-primary:    #000000;
  --text-secondary:  #666666;
  --text-tertiary:   #767676;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #666666; /* 비활성 선형 버튼 */

  /* Border — 실측 선색, 포커스 역할 배치는 추정 */
  --border-default: #E5E5E5;
  --border-subtle:  #E4DCD3;
  --border-strong:  #CCCCCC;
  --border-focus:   #007FA8; /* .btn-etc-default.select의 선택 선 재사용 */
}
  • 테마: [light]. 현대닷컴의 공용 바탕은 흰색·라이트 샌드다. 확인한 공식 자료에는 다크 토큰이나 사이트의 라이트/다크 전환 기능이 없다. CI의 어두운 배경용 로고와 차량 사진 위 흰 로고는 로고 배색 규칙이다.
  • 상태색의 한계: Element UI 색은 공식 홈페이지가 내려준 CSS에서 확인했지만 모든 상태가 실제 화면에 나타나는지는 확인하지 못했다. 작은 상태 아이콘에 쓰고 설명 글자는 --text-primary로 둔다. 이를 현대자동차의 공식 상태색 규정으로 소개하지 않는다.

Typography

타이포그래피

  • 폰트 페어링:
    • 한글: Hyundai Sans Head KR (제목) + Hyundai Sans Text KR (본문). 브랜드 전용 서체이며 별도 배포 라이선스는 확인하지 못했다.
    • 영문: Hyundai Sans Head + Hyundai Sans Text. 한글판 공식 CSS에는 같은 계열의 KR 파일이 선언돼 있다.
    • 미리보기: 외부 폰트를 가져오지 않는다. 설치된 HyundaiSansHeadKR·HyundaiSansTextKR가 없으면 Apple SD Gothic Neo·Malgun Gothic·Arial로 표시한다.
  • 굵기 운용: 현대닷컴은 Medium 파일을 font-weight: 400으로 등록하고 Regular 파일을 HyundaiSansHeadKRR·HyundaiSansTextKRR라는 별도 이름으로 등록한다. 아래 400은 파일 자체의 굵기까지 얇다는 뜻이 아니다.

| 위계 | 크기 / CSS 굵기 / 줄 높이 / 자간 | 근거 | |---|---|---| | Display | 58px / 400 / 70px / -0.4px | .title-k1 | | H1 | 44px / 400 / 56px / -0.4px | .title-h1 | | H2 | 30px / 400 / 42px / -0.4px | .title-h2 | | H3 | 20px / 400 / 32px / -0.4px | .title-h3 | | Body Large | 18px / 400 / 30px / -0.4px | 18px 탭과 30px 줄 높이를 본문용으로 재구성 (추정) | | Body | 16px / 400 / 28px / -0.4px | .text-b1 | | Body Small | 14px / 400 / 26px / -0.4px | .text-c1 | | Caption | 12px / 400 / 24px / 0.016px | .text-c2 |

카드 미리보기는 320×240·280×210 안에 맞춰 6.5~18px로 재배치한 표현용 화면이다. 이 축소 수치를 제품의 본문 규격으로 쓰지 않는다.

Spacing

스페이싱

  • Base unit: 4px (추정). 공식적인 기본 단위는 공개하지 않았다. 실제 사이트는 10·15·20·30·40·50px도 함께 쓴다. 아래는 관찰한 여백을 이름에 연결한 체계다.
:root {
  --space-xs: 4px;   /* 헤더 활성 선의 두께에서 가져온 작은 단위, 역할 재구성 */
  --space-sm: 8px;   /* 입력 보조 버튼의 오른쪽 위치 */
  --space-md: 20px;  /* 입력 아이콘의 오른쪽 여유 */
  --space-lg: 30px;  /* PC 검색 패널·푸터 영역의 가로 패딩 */
  --space-xl: 40px;  /* 모델 목록 위 여백 */
  --space-2xl: 50px; /* 모델 목록 아래 여백 */
  --space-3xl: 80px; /* 큰 팝업의 세로 패딩 */
}
  • Container: 공용 콘텐츠 1120px, 헤더 1400px. .visual-wrap .top-breadcrumb는 width: calc(100% - 120px)와 최대 1120px을 사용한다. 검색 패널은 좌우 30px, 모바일 푸터 영역은 15px이다. ⑫의 1120px·PC 30px·모바일 15px 조합은 이 값들을 적용한 재구성이다.

Border Radius

Border Radius

--radius-none: 0;      /* 각진 버튼·입력·본문 카드 */
--radius-sm: 0;        /* 별도 작은 모서리 단계 미확인, 기본형 재사용 */
--radius-md: 0;        /* 별도 중간 단계 미확인 */
--radius-lg: 0;        /* 일반 카드에 둥근 모서리를 추가하지 않음 */
--radius-xl: 20px;     /* 실측 푸터 펼침판의 윗모서리·.btn-round */
--radius-full: 50%;    /* 실측 원형 아이콘 버튼, 같은 폭·높이에서 사용 */

0·20px·50%는 사이트 CSS에서 확인했다. 단계 이름을 통일한 부분은 추정이다. 푸터 펼침판은 네 모서리를 모두 둥글게 하지 않고 20px 20px 0 0을 쓴다.

Shadow / Elevation

Shadow / Elevation

--shadow-none: none;                            /* 일반 콘텐츠, 면과 선으로 구분 */
--shadow-sm: 0 1px 2px 0 rgba(0,0,0,.1);        /* 실측 헤더 검색 패널 */
--shadow-md: 0 1px 2px 2px rgba(0,0,0,.08);      /* 실측 최근 검색 목록 */
--shadow-lg: 1px 1px 5px 1px rgba(0,0,0,.2);     /* 실측 언어 선택 목록 */
--shadow-xl: 1px 2px 6px 2px rgba(0,0,0,.1);     /* 실측 .tip-baloon 도움말 */

토큰 이름은 역할을 구분하기 위해 붙였다. 크기에 따라 항상 더 강해지는 공식 단계표는 아니다. 기본 카드와 ⑫의 사양 패널에는 --shadow-none을 쓴다.

Iconography

Iconography

  • 스타일: Outline 중심. 현대닷컴은 PNG·SVG 자체 아이콘과 Element UI 아이콘 폰트를 함께 사용한다.
  • Stroke 굵기: 텍스트 화살표의 CSS 선은 기본 2px, .thin은 1px이다. 예시의 1.5px SVG 선은 축소 화면에 맞춘 추정이다.
  • 모서리 처리: Square 중심 (추정). 직선으로 된 메뉴·화살표와 핸들·검색처럼 곡선이 필요한 도형을 함께 쓴다.
  • 추천 라이브러리: Lucide를 대체재로 권장한다. 현대자동차가 공식 채택한 라이브러리라는 뜻은 아니다.
  • 로고: 공식 logo.svg의 심볼·워드마크 도형을 그대로 인라인으로 넣었다. 파일의 공용 .st0 스타일을 currentColor로 옮겨 색만 연결했고 경로·비율은 유지했다. 모든 SVG id는 hyundai-motor-로 시작한다.

Component Guide

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

실측과 재구성의 경계: 기본 버튼의 180×50px·16px 글자·현대 블루, 선형 버튼·스카이 블루 버튼, 비활성 면 #CECDCA, 40px 검색 입력은 실측이다. 문서에 필요한 전체 Hover·Active·Loading 조합, Danger 버튼, 포커스 규칙, 카드·배지의 공통 클래스는 확인한 색과 화면 구성을 바탕으로 재구성한 추정이다.

Button — Primary / Secondary / Ghost / Danger. 공통 상태 규칙을 각 변형에 함께 적용한다.

.hm-btn {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-sm); width: 180px; min-height: 50px; padding: 0 var(--space-md);
  border: 0; border-radius: var(--radius-none); cursor: pointer;
  font: 500 16px/1.5 'HyundaiSansTextKR', 'Malgun Gothic', Arial, sans-serif;
  letter-spacing: -.4px;
  transition: background-color var(--duration-base) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}
.hm-btn--primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.hm-btn--secondary { background: transparent; color: var(--color-primary-500); border: 1px solid var(--color-primary-500); }
.hm-btn--ghost { background: transparent; color: var(--color-primary-500); }
.hm-btn--danger { background: var(--color-input-error); color: var(--text-on-primary); }
.hm-btn--primary:hover:not(:disabled):not([aria-busy="true"]) { background: var(--color-primary-400); } /* 확인한 버튼색을 Hover에 연결 (추정) */
.hm-btn--secondary:hover:not(:disabled):not([aria-busy="true"]),
.hm-btn--ghost:hover:not(:disabled):not([aria-busy="true"]) { background: var(--bg-subtle); }
.hm-btn--danger:hover:not(:disabled):not([aria-busy="true"]) { opacity: .85; }
.hm-btn:active:not(:disabled):not([aria-busy="true"]) { transform: translateY(1px); }
.hm-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.hm-btn:disabled { background: var(--color-neutral-400); color: var(--text-disabled); cursor: default; }
.hm-btn--secondary:disabled, .hm-btn--ghost:disabled { background: transparent; border-color: var(--border-strong); }
.hm-btn[aria-busy="true"] { cursor: progress; }
.hm-btn[aria-busy="true"]::before {
  content: ''; width: 14px; height: 14px; border: 2px solid currentColor;
  border-right-color: transparent; border-radius: var(--radius-full); animation: hm-spin .8s linear infinite;
}
@keyframes hm-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .hm-btn { transition: none; }
  .hm-btn:active:not(:disabled):not([aria-busy="true"]) { transform: none; }
  .hm-btn[aria-busy="true"]::before { animation: none; }
}

파란 Hover는 .btn-skyblue의 실제 색을 다른 상태에 연결한 추정이다. 사이트에 이 Hover 조합이 그대로 있다는 뜻은 아니다. Loading은 aria-busy="true"와 「처리 중」이라는 글자를 함께 표시한다.

Input — Default / Focus / Error / Disabled

.hm-field { display: grid; gap: var(--space-sm); font-size: 14px; color: var(--text-primary); }
.hm-input {
  box-sizing: border-box; width: 100%; height: 40px; padding: 0 var(--space-md);
  border: 1px solid var(--border-strong); border-radius: var(--radius-none);
  background: var(--bg-base); color: var(--text-primary); font: inherit;
}
.hm-input::placeholder { color: var(--text-tertiary); }
.hm-input:focus { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.hm-input[aria-invalid="true"] { border-color: var(--color-input-error); }
.hm-input[aria-invalid="true"]:focus { outline-color: var(--color-input-error); border-color: transparent; }
.hm-field__error { color: var(--color-input-error); font-size: 12px; }
.hm-input:disabled { background: var(--bg-subtle); color: var(--text-disabled); cursor: default; }

Card — 기본형 / 강조형 / Outlined

.hm-card { padding: var(--space-lg); background: var(--bg-base); border: 0; border-radius: var(--radius-none); box-shadow: var(--shadow-none); }
.hm-card--emphasis { background: var(--bg-subtle); }
.hm-card--outlined { border: 1px solid var(--border-default); }
.hm-card__title { margin: 0 0 var(--space-sm); color: var(--text-primary); font-size: 20px; line-height: 32px; }
.hm-card__description { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 26px; }

Badge / Tag — Solid / Subtle / Outline

.hm-badge { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: var(--radius-none); font-size: 12px; line-height: 16px; }
.hm-badge--solid { background: var(--color-primary-500); color: var(--text-on-primary); }
.hm-badge--subtle { background: var(--bg-subtle); color: var(--color-primary-500); }
.hm-badge--outline { border: 1px solid var(--border-default); background: transparent; color: var(--text-secondary); }

배지의 4×8px 패딩·12px 크기는 축소 예시용 추정이다. 실제 사이트의 둥근 .btn-round와 별개의 표현용 기본형이다.

Navigation — 흰 헤더, 파란 활성 표시

.hm-nav { display: flex; align-items: center; gap: var(--space-lg); min-height: 80px; background: var(--bg-base); }
.hm-nav__item { padding: var(--space-sm) 0; background: transparent; border: 0; border-bottom: 4px solid transparent; color: var(--text-primary); font: inherit; cursor: pointer; }
.hm-nav__item[aria-current="page"] { border-bottom-color: var(--color-primary-500); color: var(--color-primary-500); }
.hm-nav__item:hover { color: var(--color-primary-500); }
.hm-nav__item:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

80px 헤더와 4px 현대 블루 표시선은 실측이다. 간소화한 메뉴 클래스와 포커스 동작은 추정이다.

Motion

Motion

--duration-fast: 200ms; /* 짧은 상태 변화에 쓸 예시값 (추정) */
--duration-base: 300ms; /* 실측 헤더 이동·모바일 로고 전환 .3s */
--duration-slow: 400ms; /* 실측 헤더 활성선 이동 .4s ease */
--ease-out: cubic-bezier(.25,.1,.25,1); /* 사이트 CSS의 ease를 숫자로 옮김; 이름은 재구성 */
--ease-in-out: cubic-bezier(.42,0,.58,1); /* 실측 모바일 펼침 표시 ease-in-out */

동작은 메뉴와 선택 상태를 설명하는 데 쓴다. ⑨·⑫의 prefers-reduced-motion 처리는 예시의 접근성 보완이며 공식 모션 규정은 아니다.

Anti-patterns

Anti-patterns

공식 CI의 도형 유지 원칙과 현대닷컴 관찰을 바탕으로 정리했다. 2~5는 이 문서의 적용 지침이다.

1. 심볼과 워드마크를 새로 그리거나 글자로 흉내 내지 않는다. 가로 조합 로고의 원래 도형·비율을 유지한다. 2. CI 액티브 블루 #00AAD2와 웹 버튼색 #007FA8을 같은 색으로 바꾸지 않는다. 3. 모든 카드·버튼을 둥글게 만들지 않는다. 넓은 콘텐츠는 각진 면과 여백으로 정돈하고 색상 선택은 차량 도장색의 작은 사각 타일로 보여 준다. 일반 UI를 브랜드 색상표로 대체하지 않는다. 4. 골드·액티브 레드를 넓은 UI 바탕에 깔지 않는다. 라이트 샌드·흰색 바탕을 유지하고 상태·강조가 필요한 작은 영역에만 색을 더한다. 5. 어두운 배경용 로고를 근거로 다크 UI를 추가하지 않는다. 확인하지 못한 파란 단계·상태·개편 연도를 공식 규정처럼 설명하지 않는다.

Sources

출처

  1. https://www.hyundai.com/kr/ko/info/ci/ci-color
  2. https://www.hyundai.com/kr/ko/info/ci
  3. https://www.hyundai.com/contents/images/logo.svg
  4. https://www.hyundai.com/kr/ko/e/vehicles/estimation/model/making?model=NE09&modelCode=NEJJ5VVD8&purposeCode=J
  5. https://www.hyundai.com/kr/ko/e/vehicles/ioniq5/intro
  6. https://www.hyundai.com/contents/repn-car/html/homepage/price/ne27-J-standard_price.content
  7. https://www.hyundai.com/contents/repn-car/side-45/ioniq5-27my-45side.png
  8. https://www.hyundai.com/kr/ko/e
  9. https://www.hyundai.com/etc/designs/hyundai/kr/ko/clientlibs/publish.css
  10. https://www.hyundai.com/kr/ko/info/ideology/vision

Hyundai Motor (현대자동차) 이름과 로고는 각 권리자의 상표입니다.