Nintendo

Nintendo Red(#E60012) + Joy-Con 실루엣 + 둥근 게임 타일 — 함께 노는 콘솔의 활기

아시아게이밍소비자따뜻한humanismmodern-minimal고딕comfortableroundflat라이트다크한글 지원출시 1985개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: Nintendo
한 줄 정체성: Switch / Mario / Zelda — 가족 친화 콘솔 게이밍의 일본 거장
공식 디자인 철학: "Bring smiles to everyone" — 친근하고 가족적인 톤
시그니처 요소 1개: Nintendo Red #E60012와 좌우 Joy-Con이 감싼 화면 실루엣. 둥근 게임 타일과 선명한 IP 컬러를 결합해 작은 크기에서도 닌텐도를 즉시 식별하게 한다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 활기, 친근, 패밀리
무드 설명: Basic White와 Basic Black 양쪽에서 Nintendo Red를 핵심 액센트로 유지한다. Mario/Zelda/Splatoon 등 각 IP의 고유색은 둥근 게임 타일 안에 한정하고, 넉넉한 중성 캔버스와 친절한 위계로 가족형 콘솔의 쉬운 인상을 만든다.
비주얼 스타일: 휴머니즘 + 모던 미니멀
밀도(Density): Comfortable
모서리 성향: Round (14~20px)
평면성: Flat

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - Nintendo Red */
  --color-primary-50:  #FFE9EA;
  --color-primary-100: #FFC4C7;
  --color-primary-200: #FF9298;
  --color-primary-300: #FF606A;
  --color-primary-400: #FF2F3D;
  --color-primary-500: #E60012;       /* 시그니처 */
  --color-primary-600: #B8000E;
  --color-primary-700: #8C000A;
  --color-primary-800: #5F0008;
  --color-primary-900: #330004;

  /* Game-specific accents (각 IP별) */
  --color-mario: #E60012;
  --color-zelda: #1565D8;
  --color-animal: #C0830B;
  --color-splatoon: #2F8C2F;
  --color-kirby: #FF7AB8;

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #FAFAFA;
  --color-neutral-100:  #F0F0F0;
  --color-neutral-300:  #D4D4D4;
  --color-neutral-500:  #A1A1A1;
  --color-neutral-700:  #6B6B6B;
  --color-neutral-900:  #1A1A1A;
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #ECFDF5;
  --color-success-fg: #047857;
  --color-warning-bg: #FFFBEB;
  --color-warning-fg: #B45309;
  --color-error-bg:   #FFE9EA;
  --color-error-fg:   #E60012;
  --color-info-bg:    #EFF6FF;
  --color-info-fg:    #1565D8;

  /* Surface */
  --bg-base:     #FFFFFF;
  --bg-subtle:   #FAFAFA;
  --bg-elevated: #FFFFFF;
  --bg-overlay:  rgba(26,26,26,0.55);

  /* Text */
  --text-primary:    #1A1A1A;
  --text-secondary:  #4A4A4A;
  --text-tertiary:   #6B6B6B;
  --text-on-primary: #FFFFFF;
  --text-disabled:   #A1A1A1;

  /* Border */
  --border-default: #F0F0F0;
  --border-subtle:  #FAFAFA;
  --border-strong:  #D4D4D4;
  --border-focus:   #E60012;
}

[data-theme="dark"] {
  --bg-base: #1A1A1A;
  --bg-subtle: #232323;
  --bg-elevated: #2D2D2D;
  --text-primary: #FFFFFF;
  --text-secondary: #D4D4D4;
  --border-default: #3A3A3A;
}

Typography

타이포그래피

폰트 페어링:
- UI(영문): Nintendo Std (자체) / Inter 폴백
- 한글: Pretendard / Noto Sans KR
- 일문: Hiragino Sans / Noto Sans JP
- 코드: JetBrains Mono
위계:
- Display: 56px / 700 / 1.1 / -0.02em
- H1: 36px / 700 / 1.2 / -0.015em
- H2: 24px / 700 / 1.3 / -0.01em
- H3: 18px / 700 / 1.35 / 0
- Body Large: 16px / 400 / 1.6 / 0
- Body: 14px / 400 / 1.55 / 0
- Body Small: 13px / 400 / 1.5 / 0
- Caption: 12px / 600 / 1.4 / 0.02em

Spacing

스페이싱

Base unit: 4px
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 36px; --space-2xl: 56px; --space-3xl: 80px; ``
Container: max-width 1200px

Border Radius

--radius-none: 0;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 20px;        /* 카드 시그니처 */
--radius-xl: 28px;
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(26,26,26,0.06);
--shadow-md: 0 6px 18px rgba(26,26,26,0.08);
--shadow-lg: 0 20px 48px rgba(26,26,26,0.12);
--shadow-red: 0 6px 18px rgba(230,0,18,0.20);

Iconography

스타일: Filled (둥근 형태) / Outline 혼합
Stroke 굵기: 2px
모서리 처리: Round
추천 라이브러리: 자체 아이콘 / Phosphor (Bold variant)

Component Guide

컴포넌트 가이드

Button

.btn { font: 700 14px/1 'Nintendo Std',Inter,sans-serif; padding: 11px 22px; border-radius: 9999px; border: 0; cursor: pointer; transition: transform 150ms ease, box-shadow 150ms ease; }
.btn-primary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-primary:hover { background: var(--color-primary-600); transform: translateY(-1px); box-shadow: var(--shadow-red); }
.btn-secondary { background: var(--bg-base); color: var(--text-primary); border: 2px solid var(--color-primary-500); }
.btn-secondary:hover { background: var(--color-primary-50); }
.btn-ghost { background: transparent; color: var(--color-primary-600); }

Input

.input { background: var(--bg-base); border: 1px solid var(--border-strong); border-radius: 14px; padding: 11px 16px; font: 400 15px/1.4 'Nintendo Std',sans-serif; color: var(--text-primary); width: 100%; }
.input:focus { outline: none; border-color: var(--border-focus); box-shadow: 0 0 0 4px rgba(230,0,18,0.12); }

Card (Game)

.card { background: var(--bg-base); border-radius: 20px; padding: 0; overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; transition: transform 150ms ease, box-shadow 150ms ease; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.card .cover { aspect-ratio: 1; background: var(--color-primary-50); }
.card .meta { padding: 14px 16px; }
.card h3 { font: 700 16px/1.3 'Nintendo Std',sans-serif; color: var(--text-primary); margin: 0 0 4px; }
.card .price { font: 700 14px/1 inherit; color: var(--color-primary-600); }

Badge

.tag { display: inline-flex; padding: 4px 12px; border-radius: 9999px; font: 700 11px/1.4 'Nintendo Std',sans-serif; }
.tag-red { background: var(--color-primary-500); color: var(--text-on-primary); }
.tag-pink { background: var(--color-primary-100); color: var(--color-primary-700); }
.tag-sale { background: linear-gradient(135deg, #FF606A, #E60012); color: #fff; letter-spacing: 0.04em; text-transform: uppercase; }

Navigation

.topbar { background: var(--color-primary-500); color: var(--text-on-primary); padding: 12px 24px; display: flex; align-items: center; gap: 16px; }
.topbar .logo { width: 56px; height: 24px; background: #fff; border-radius: 9999px; display: grid; place-items: center; color: var(--color-primary-500); font: 900 14px/1 'Nintendo Std',sans-serif; letter-spacing: 0.04em; }
.topbar .item { font: 700 13px/1 inherit; padding: 8px 12px; cursor: pointer; opacity: 0.9; }
.topbar .item:hover { opacity: 1; }
.topbar .item.active { opacity: 1; }

Motion

--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 400ms;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);

Anti-patterns

1. Nintendo Red를 넓은 본문 캔버스 전체에 과다 사용 금지 — 헤더·CTA·선택 상태에 집중 2. 모서리 sharp(<8px) 사용 금지 — 모든 카드/버튼은 round 3. 빨강 외 강조 색을 본문에 사용 금지 (각 IP별 색은 그 게임 컨텍스트에서만) 4. 본문에 무거운 굵기(800+) 사용 금지 — 700이 maximum 5. 여러 게임 IP 컬러를 구획 없이 한 영역에 혼합 금지 — 타일 단위로 색의 소유권 분리

Nintendo

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

출처