디자인 시스템 갤러리 Hyundai Card (현대카드)

Hyundai Card (현대카드)

1:1.58 카드 플레이트 그리드와 Youandi 모노 타이포그래피

한국핀테크라이프스타일중립modern-minimalbrutalism고딕comfortablesharpflat라이트한글 지원출시 2003개정 2024

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

Brand DNA

브랜드 DNA

  • 브랜드명: Hyundai Card (현대카드)
  • 한 줄 정체성: 카드 플레이트부터 앱과 문화 공간까지 하나의 시각 언어로 설계하는 디자인 중심 카드사
  • 공식 디자인 철학: 전용 서체 Youandi와 카드 비례 기반 모듈 그리드로 일관된 현대카드의 정체성을 구축한다.
  • 시그니처 요소 1개: 1:1.58 카드 플레이트 그리드와 Youandi 모노 타이포그래피

Tone & Mood

톤 & 무드

  • 핵심 키워드 3개: 절제된, 정교한, 선도적
  • 무드 설명: 흰 바탕과 검정 타이포그래피가 정보의 우선순위를 단호하게 나누고, 실제 카드 플레이트가 화면의 핵심 오브제가 된다. 포인트·혜택·결제 정보는 촘촘한 모듈 그리드 안에서 명료하게 정리한다.
  • 비주얼 스타일: 모던 미니멀 + 브루털리즘
  • 밀도(Density): Comfortable — 금융 정보를 충분한 여백과 짧은 스캔 단위로 제시
  • 모서리 성향: Sharp (0~2px) — UI 패널은 직선형, 실물 카드 플레이트에만 물리적 라운드 적용
  • 평면성: Flat — 선과 면의 대비로 위계를 만들고 그림자는 절제

Color System

컬러 시스템 (CSS 변수)

:root {
  --color-primary-50: #F5F5F5; --color-primary-100: #E0E0E0;
  --color-primary-200: #C7C7C7; --color-primary-300: #999999;
  --color-primary-400: #555555; --color-primary-500: #000000;
  --color-primary-600: #1A1A1A; --color-primary-700: #2D2D2D;
  --color-primary-800: #555555; --color-primary-900: #888888;

  /* the Card 등급 컬러 */
  --hc-the-black: #000000;
  --hc-the-red:   #DA0011;
  --hc-the-purple:#5C0099;
  --hc-the-green: #1FAE5B;

  --color-secondary-500: #DA0011;

  --color-neutral-0: #FFFFFF; --color-neutral-50: #FAFAFA;
  --color-neutral-100: #F5F5F5; --color-neutral-200: #F0F0F0;
  --color-neutral-300: #E0E0E0; --color-neutral-500: #C7C7C7;
  --color-neutral-700: #888888; --color-neutral-800: #555555;
  --color-neutral-900: #191919; --color-neutral-1000: #000000;

  --color-success-bg: #DCF7E5; --color-success-fg: #1AAD5C;
  --color-warning-bg: #FFF1D9; --color-warning-fg: #B45309;
  --color-error-bg: #FFE5E5; --color-error-fg: #DA0011;
  --color-info-bg: #E0F0FE; --color-info-fg: #2563EB;

  --bg-base: #FFFFFF; --bg-subtle: #F5F5F5;
  --bg-elevated: #FFFFFF; --bg-overlay: rgba(0,0,0,0.50);

  --text-primary: #000; --text-secondary: #555;
  --text-tertiary: #888; --text-on-primary: #FFFFFF;
  --text-disabled: #C7C7C7;

  --border-default: #E0E0E0; --border-subtle: #F0F0F0;
  --border-strong: #C7C7C7; --border-focus: #000;
}

Typography

타이포그래피

  • 폰트 페어링:
    • 한글: Youandi New (현대카드 전용) / Pretendard (OFL 폴백)
    • 영문: Youandi New (현대카드 전용) / "Helvetica Neue" 폴백
  • 위계:
    • Display: 64px / 300 / 1.05 / -0.025em (얇은 디스플레이 시그니처)
    • H1: 36px / 300 / 1.2 / -0.02em
    • H2: 22px / 700 / 1.27 / -0.015em
    • H3: 16px / 700 / 1.3 / 0.04em (uppercase)
    • Body Large: 14px / 500 / 1.5 / 0
    • Body: 13px / 500 / 1.5 / 0
    • Body Small: 12px / 500 / 1.43 / 0.02em
    • Caption: 11px / 700 / 1.27 / 0.06em (uppercase)

Spacing

스페이싱

  • Base unit: 4px
  • 토큰:
--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, 좌우 패딩 16px(모바일) / 32px(데스크톱)

Border Radius

Border Radius

--radius-none: 0; --radius-sm: 0; --radius-md: 0;
--radius-lg: 2px; --radius-xl: 4px; --radius-full: 9999px;

Shadow / Elevation

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 24px rgba(0,0,0,0.16);
--shadow-xl: 0 16px 32px rgba(0,0,0,0.24);
  • sm = 눌림 가능한 미니 패널, md = 플로팅 카드, lg = 모달, xl = 풀스크린 다이얼로그

Iconography

Iconography

  • Outline (정밀), 1.5px, Square + Round
  • Lucide / Phosphor

Component Guide

컴포넌트 가이드

Button

.btn { font: 700 13px/1 'Youandi New','Hyundai Card Youandi',Pretendard,sans-serif; letter-spacing:0.02em; border-radius: 0; padding: 16px 22px; border: 1px solid transparent; cursor: pointer; transition: background var(--duration-fast) var(--ease-out),color var(--duration-fast) var(--ease-out),transform var(--duration-fast) var(--ease-out); }
.btn-primary { background: #000; color: #fff; }
.btn-primary:hover { background: #262626; }
.btn-primary:active { background: #454545; transform: translateY(1px); }
.btn-secondary { background: #fff; color: #000; border-color: #000; }
.btn-secondary:hover,.btn-ghost:hover { background: #F5F5F5; }
.btn-ghost { background: transparent; color: #000; }
.btn-danger { background: var(--color-error-fg); color: #fff; }
.btn:disabled,.btn.is-loading { background: #E0E0E0; border-color:#E0E0E0; color:#888; cursor:not-allowed; transform:none; }

Input

.input { background: #fff; border: 0; border-bottom: 1px solid #C7C7C7; border-radius: 0; padding: 10px 0; font-size: 16px; font-family: inherit; }
.input:focus { outline: none; border-bottom-color: #000; }
.input[aria-invalid="true"] { border-bottom-color: var(--color-error-fg); }
.input:disabled { color: var(--text-disabled); background: #F5F5F5; cursor:not-allowed; }

Card (the Card 시그니처)

.hc-card { background: #000; color: #fff; border-radius: 8px; padding: 28px 24px; aspect-ratio: 1.585; display: flex; flex-direction: column; justify-content: space-between; overflow:hidden; }
.hc-card .grade { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.hc-card .num { font-family: ui-monospace, monospace; font-size: 14px; letter-spacing: 0.05em; }
.hc-card .row { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.hc-card.red { background: var(--hc-the-red); }
.hc-card.purple { background: var(--hc-the-purple); }

.card { background: #fff; border: 1px solid #F0F0F0; border-radius: 0; padding: 16px; }
.card-emphasis { background:#F5F5F5; border-color:#F5F5F5; }
.card-outlined { background:#fff; border-color:#C7C7C7; }

Badge

.tag { padding: 2px 6px; border-radius: 0; font-size: 10px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.tag-solid { background: #000; color: #fff; }
.tag-subtle { background: #F5F5F5; color: #000; }
.tag-outline { border: 1px solid #000; color: #000; background: transparent; }

Navigation

.topnav { padding: 14px 16px; background: #fff; color: #000; border-bottom:1px solid #F0F0F0; display: flex; align-items: center; gap: 20px; }
.topnav .brand { font-weight: 900; font-size: 16px; letter-spacing: -0.04em; }
.topnav a { color:#555; font-size:13px; text-decoration:none; }
.topnav a:hover,.topnav a[aria-current="page"] { color:#000; }

Motion

Motion

--duration-fast: 100ms; --duration-base: 250ms; --duration-slow: 400ms;
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

Anti-patterns

Anti-patterns

1. 모든 UI 패널에 과도한 라운드 적용 금지 — 실물 카드 플레이트의 물리적 라운드는 예외 2. 등급 컬러를 임의 매핑 금지 — Black/Red/Purple/Green 보존 3. 헤드라인을 굵은 폰트로 강제 변경 금지 — 얇은(300) display 톤 4. 채도 높은 그라데이션 배경 금지 — 모노가 정체성 5. 카드 비율(1.585)을 임의 변경 금지

Sources

출처

  1. https://www.hyundaicard.com/