NVIDIA

검정 무대에 사선으로 뜬 은색 Founders Edition 과 연두 리본, 모서리 0 녹색 사각 버튼 「See All Buying Options」

서양AI게이밍인프라중립modern-minimal고딕comfortablesharpsubtle라이트다크한글 지원출시 2019개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: NVIDIA (엔비디아) — GeForce 그래픽카드, NVIDIA App, GeForce NOW 를 nvidia.com 한곳에서 판다.
한 줄 정체성: GPU 회사에서 AI 컴퓨팅 플랫폼 회사가 된 기업. 웹 전체가 한 컴포넌트 체계(AEM 기반 nv-button·nv-teaser)로 묶이고, GeForce 구역만 검정 「무대」로 바뀐다.
공식 디자인 철학: 공개 디자인 시스템은 없다. 2019년 로고 사용 가이드(PDF)가 Green #76B900(PMS 376C)·Dark Gray #1E1E1E(「검정이 아니라 회색」)·White 세 색을 정하고, 로고에 효과 넣기·다시 그리기·풀컬러 로고를 초록 바탕에 두기를 금한다. 제품 페이지는 두 단어 표어(「Game Changer」)와 숫자 한 줄(「Starting at $1999」)로 말한다.
시그니처 요소 1개: 검정 무대에 사선으로 뜬 은색 Founders Edition 과 그 아래 연두 리본 소용돌이, 그리고 모서리 0·검정 글자의 녹색 사각 버튼. 초록은 버튼·활성 밑줄·「›」 꺾쇠·로고 눈에만 있고, 넓은 초록은 제품 사진의 빛으로만 나온다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 강렬함, 정밀함, 절제
무드 설명: 검정 #000 무대에 흰 굵은 제목과 금속 제품을 올리고 연두는 빛처럼 아껴 쓴다. 제목은 NVIDIA Sans Bold 한 굵기로 짧게 끊고, 수치는 단위와 함께 크게 보여 준다(32 GB GDDR7 · 3352 AI TOPS · 1792 GB/sec).
비주얼 스타일: 모던 미니멀 — 제품 사진·수치·직각 버튼으로만 위계를 만든다.
밀도(Density): Comfortable — 구역은 위아래 60~75px 로 비우고, 메뉴·사양 표는 14~15px 로 촘촘하다.
모서리 성향: Sharp (버튼·입력·탭 0px, 카드 2px. 알약은 마켓플레이스 배지·캐러셀 점뿐)
평면성: Subtle — 면은 평평하고 카드만 옅은 그림자로 띄운다.

> 테마 판정: 페이지마다 테마가 정해진다(CSS theme-light·theme-geforce 실측). 회사·드라이버 페이지는 흰 바탕, GeForce 페이지는 #000 바탕이다. 그래서 light·dark 두 판을 두고, 제품 무대와 페이지 내 탐색 띠는 두 테마 모두 검정으로 고정한다.

Color System

컬러 시스템 (CSS 변수)

공식 웹 CSS(clientlib-site.min.css) 실측: --color-nvidia-green:#76b900, 초록 5단계, 회색 13단계(--color-gray-025~975), 빨강·노랑·파랑 보조 팔레트. 로고 가이드 PDF 의 세 색과 맞는다. #1A1A1A 는 회색 단계 밖이지만 39번 쓰인 실제 띠·카드 색이다. 라이트는 회사·드라이버 페이지 값이고, GeForce 페이지의 다크 값은 다크 판에 있다.

:root {
  /* Primary — NVIDIA Green */
  --color-primary-50:  #F1F8E6;  /* (추정) 옅은 초록 면 */
  --color-primary-100: #CFFF40;  /* 공식 green-050 */
  --color-primary-200: #BFF230;  /* 공식 green-100 — 다크 위 강조 */
  --color-primary-300: #A6D936;  /* (추정) */
  --color-primary-400: #91C733;  /* 실측 버튼 hover */
  --color-primary-500: #76B900;  /* 공식 NVIDIA Green, PMS 376C */
  --color-primary-600: #5E9400;  /* 실측 스크롤바 hover */
  --color-primary-700: #3F8500;  /* 공식 green-500 — 흰 바탕 위 초록 글자 */
  --color-primary-800: #265600;  /* 공식 green-700 */
  --color-primary-900: #173400;  /* (추정) */

  --color-secondary-500: #1E1E1E;  /* 로고 가이드 Dark Gray */

  /* Neutral — 공식 gray + 실측 */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F7F7F7;  /* gray-025 라이트 띠 */
  --color-neutral-100:  #EEEEEE;  /* gray-050 다크 본문 */
  --color-neutral-200:  #E0E0E0;
  --color-neutral-300:  #CCCCCC;
  --color-neutral-400:  #A7A7A7;  /* gray-300 */
  --color-neutral-500:  #757575;  /* 캡션 */
  --color-neutral-600:  #666666;  /* 실측 글로벌 메뉴 */
  --color-neutral-700:  #4B4B4B;
  --color-neutral-800:  #313131;  /* 다크 구분선 */
  --color-neutral-900:  #1A1A1A;  /* 실측 탐색 띠·다크 카드 */
  --color-neutral-950:  #111111;  /* 실측 다크 성능 구역 */
  --color-neutral-1000: #000000;  /* GeForce 무대 */

  /* Semantic — 공식 보조 팔레트, 역할 연결 (추정) */
  --color-success-bg: #F1F8E6;  --color-success-fg: #3F8500;
  --color-warning-bg: #FEEEB2;  --color-warning-fg: #DF6500;
  --color-error-bg:   #FFD7D7;  --color-error-fg:   #961515;
  --color-info-bg:    #CBF5FF;  --color-info-fg:    #0046A4;

  /* Surface */
  --bg-base:     #FFFFFF;
  --bg-subtle:   #F7F7F7;
  --bg-elevated: #FFFFFF;  /* 카드 — 그림자로 띄운다 */
  --bg-overlay:  #FFFFFF;
  --bg-field:    #EEEEEE;
  --bg-stage:    #000000;  /* 제품 무대 — 테마 무관 */
  --bg-band:     #1A1A1A;  /* 페이지 내 탐색 — 테마 무관 */

  /* Text */
  --text-primary:    #1A1A1A;  /* 실측 라이트 본문 */
  --text-strong:     #000000;  /* 제목 */
  --text-secondary:  #666666;
  --text-tertiary:   #757575;  /* 흰 바탕 4.6:1 */
  --text-on-primary: #000000;  /* 초록 위 8.7:1 */
  --text-disabled:   #999999;  /* 실측 */
  --text-accent:     #3F8500;

  /* Border */
  --border-default: #CCCCCC;
  --border-subtle:  #E0E0E0;
  --border-strong:  #000000;  /* 외곽선 버튼 hover */
  --border-focus:   #76B900;  /* 실측 focus 2px */

  --font-sans: 'NVIDIA Sans', 'NVIDIA-NALA', Arial, Helvetica, 'Source Han Sans KR', 'Malgun Gothic', sans-serif;
}

Typography

타이포그래피

폰트 페어링:
- 영문: NVIDIA Sans (전용, 비공개 EULA) — 웹폰트 NVIDIA 와 지역판 NVIDIA-NALA·EMEA·APAC·CN·RU, 굵기 300·400·500·700. 폴백 Arial, Helvetica(실측)
- 한글: 본고딕 Source Han Sans KR (SIL OFL) — 한국어 페이지에서 NVIDIA-APAC, Source-Han-Sans-KR 순서(실측)
위계 (데스크톱 최대값 실측, 1349·1023·639px 아래에서 한 단계씩 작아진다. 괄호는 1280px 화면 값):
- Display: 60px / 700 / 1.25 / normal — .h--huge
- H1: 48px / 700 / 1.25 / normal — .h--large (제품 히어로 36px)
- H2: 36px / 700 / 1.25 / normal — .h--medium (구역 제목 28px)
- H3: 28px / 700 / 1.25 / normal — .h--small (「Game Changer」 24px)
- Body Large: 22px / 400 / 1.75 / normal — .p--large
- Body: 15px / 400 / 1.667 / normal — --tp_p-m
- Body Small: 14px / 400 / 1.667 / normal — 메뉴 설명·사양 표
- Caption: 11px / 400 / 1.4 / normal — .p--small, 차트 각주
규칙: 자간 normal, 대문자 변환 없음, 굵기는 400·700 둘. 구역 머리말 18px/700, 버튼 16px/700.

Spacing

스페이싱

Base unit: 4px (--size-100:4px ~ --size-2400:96px 실측)
토큰: ``css --space-xs: 4px; /* --size-100 */ --space-sm: 8px; /* --size-200 */ --space-md: 16px; /* --size-400 */ --space-lg: 24px; /* --size-600 */ --space-xl: 32px; /* --size-800 */ --space-2xl: 48px; /* --size-1200 */ --space-3xl: 64px; /* --size-1600 */ ``
Container: 내용 폭 954px(1280px 화면 좌우 163px), 구역 위아래 60·75px, 페이지 내 탐색 띠 70px(모바일 45px)·항목 간격 30px.

Border Radius

--radius-none: 0;      /* 버튼·입력·탭·표·무대 */
--radius-sm: 2px;      /* 카드 실측 */
--radius-md: 2px;      /* 더 둥근 단계 없음 */
--radius-lg: 2px;
--radius-xl: 2px;
--radius-full: 9999px; /* 캐러셀 점·마켓플레이스 배지 */

Shadow / Elevation

--shadow-none: none;                          /* 버튼·띠·무대 */
--shadow-sm: 0 0 5px 0 rgba(0, 0, 0, .3);     /* 카드 — 실측 */
--shadow-md: 0 0 15px 0 rgba(0, 0, 0, .35);   /* 카드 hover — 실측 */
--shadow-lg: 0 3px 4.7px .3px rgba(0, 0, 0, .24), 0 1px 5.88px .12px rgba(0, 0, 0, .16);  /* 모달 — 실측 */
--shadow-xl: 0 0 0 100vmax rgba(0, 0, 0, .8); /* 모달 뒤 딤 — 실측 */

Iconography

스타일: 혼합 — 헤더는 Outline(돋보기·지구·계정), 링크 꺾쇠는 Font Awesome 6 Pro Solid, 기능 소개는 흰 선 일러스트
Stroke 굵기: 1.5px (24px 그리드, 추정)
모서리 처리: Square
추천 라이브러리: 실제는 Font Awesome 6 Pro·Sharp, 공개 대체는 Lucide 1.5px

Component Guide

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

Button — 녹색 사각에 검정 굵은 글자(.btn-content 실측), 보조는 2px 초록 테두리, Ghost 는 글자 + 초록 「›」

.nv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 13px; border: 0; border-radius: 0; background: var(--color-primary-500); color: var(--text-on-primary); font: 700 16px/1.25 var(--font-sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-base) var(--ease-out); }
.nv-btn:hover, .nv-btn:active { background: var(--color-primary-400); }
.nv-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.nv-btn:disabled { background: rgba(153, 153, 153, .5); color: var(--text-disabled); cursor: default; }
.nv-btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.nv-btn.is-loading::after { content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid #000; border-right-color: transparent; border-radius: 50%; animation: nv-spin .8s linear infinite; }
@keyframes nv-spin { to { transform: rotate(360deg); } }
.nv-btn--sm { padding: 9px 12px; font-size: 14px; }
.nv-btn--outline { background: transparent; color: var(--text-strong); box-shadow: inset 0 0 0 2px var(--color-primary-500); }
.nv-btn--outline:hover { box-shadow: inset 0 0 0 2px var(--border-strong); }
.nv-btn--danger { background: #E52020; color: #FFFFFF; }  /* (추정) 공식 red-500 */
.nv-link { color: var(--text-strong); font: 700 16px/1.25 var(--font-sans); text-decoration: none; }
.nv-link::after { content: "›"; margin-left: 6px; color: var(--color-primary-500); transition: margin var(--duration-fast) var(--ease-out); }
.nv-link:hover::after { margin-left: 9px; }

Input — 드라이버 검색 상자 같은 테두리 없는 회색 면 (추정)

.nv-input { width: 100%; height: 52px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; background: var(--bg-field); color: var(--text-strong); font: 400 15px/1.5 var(--font-sans); }
.nv-input::placeholder { color: var(--text-tertiary); }
.nv-input:focus { outline: none; border-bottom-color: var(--color-primary-500); }
.nv-input.is-error { border-bottom-color: var(--color-error-fg); background: var(--color-error-bg); }
.nv-input:disabled { color: var(--text-disabled); background: var(--bg-subtle); }

Card — 2px 모서리 + 옅은 그림자(.cmp-teaser 실측). 강조형은 검정 제품 무대, 테두리형은 마켓플레이스 상품 칸

.nv-card { background: var(--bg-elevated); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); overflow: hidden; transition: box-shadow .8s var(--ease-in-out); }
.nv-card:hover { box-shadow: var(--shadow-md); }
.nv-card__body { padding: 20px 20px 24px; }
.nv-card__title { margin: 8px 0 0; font: 700 20px/1.25 var(--font-sans); color: var(--text-strong); }
.nv-card--stage { background: var(--bg-stage); color: #EEEEEE; }
.nv-card--outlined { border: 1px solid var(--border-default); border-radius: 0; box-shadow: none; }

Badge / Tag — 사이트는 굵은 머리말(「Games | News」)만 쓰고, 알약 배지는 마켓플레이스에만 있다(크기 추정)

.nv-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: var(--radius-full); font: 700 12px/1 var(--font-sans); }
.nv-badge--solid { background: var(--color-primary-500); color: #000000; }  /* Best Seller */
.nv-badge--outline { box-shadow: inset 0 0 0 2px var(--color-primary-500); color: var(--text-strong); }  /* Special Offer */
.nv-badge--subtle { background: var(--color-success-bg); color: var(--color-success-fg); }

Navigation — 흰 글로벌 메뉴 → 검정 하위 브랜드 띠 → #1A1A1A 페이지 내 탐색(활성 3px 초록 밑줄이 0.5s 미끄러진다)

.nv-gnav { height: 44px; display: flex; align-items: center; gap: 20px; padding: 0 48px; background: var(--bg-base); color: var(--text-strong); font: 400 14px/1 var(--font-sans); white-space: nowrap; }
.nv-gnav .menu { color: var(--text-secondary); font-size: 16px; }
.nv-gnav .sp { flex: 1; }
.nv-subnav { height: 60px; display: flex; align-items: center; gap: 28px; padding: 0 30px; background: var(--bg-stage); color: #999999; font: 400 16px/1 var(--font-sans); white-space: nowrap; overflow: hidden; }
.nv-subnav b { color: #FFFFFF; font-size: 24px; }
.nv-inpage { height: 70px; display: flex; gap: 30px; padding: 0 48px; background: var(--bg-band); color: #EEEEEE; font: 400 15px/1.667 var(--font-sans); white-space: nowrap; overflow: hidden; }
.nv-inpage a { display: flex; align-items: center; color: inherit; text-decoration: none; transition: box-shadow var(--duration-slow); }
.nv-inpage a[aria-current="true"] { color: #FFFFFF; box-shadow: inset 0 -3px 0 var(--color-primary-500); }
.nv-inpage .nv-btn { flex: none; align-self: center; margin-left: auto; color: var(--text-on-primary); }

Motion

공식 CSS 에서 가장 많이 쓰인 전환값이다. 튀는 스프링은 없다.

--duration-fast: 100ms;   /* 링크 꺾쇠 3px 이동 */
--duration-base: 200ms;   /* 버튼 배경·테두리 */
--duration-slow: 500ms;   /* 탭 밑줄 이동·카드 그림자 */
--ease-out: ease-out;
--ease-in-out: cubic-bezier(.25, .8, .25, 1);

Anti-patterns

1. 초록을 넓은 바탕 면으로 깔지 않는다 — 버튼·활성 밑줄·「›」·로고 눈에만 쓴다. 넓은 초록은 제품 사진 속 빛으로만 나오고, 풀컬러 로고는 초록 바탕에 두지 않는다(공식 가이드). 2. 초록 버튼에 흰 글자를 쓰지 않는다 — 검정은 8.7:1, 흰색은 2.4:1. 흰 바탕 위 초록 글자도 700(#3F8500)으로 내린다. 3. 버튼·탭·입력을 둥글리지 않는다 — 0px 이 기본, 카드도 2px 까지. 알약은 마켓플레이스 배지에만. 4. 로고를 다시 그리거나 그림자·광택을 넣지 않는다 — 공식 SVG 를 쓰고, 어두운 바탕에서는 글자만 흰색으로 바꾼다. 5. 제품을 평면 아이콘이나 색 견본으로 대신하지 않는다 — 검정 무대 위 금속 제품과 수치(「32 GB GDDR7」「Starting at $1999」)가 주인공이고 설명은 짧게 곁에 붙는다.

Sources

출처

NVIDIA 이름과 로고는 각 권리자의 상표입니다.