NVIDIA

검정 무대의 사선 금속 GPU, 초록 파동과 각진 구매 버튼, 굵은 GeForce 제품명

서양AI따뜻한modern-minimal고딕spacioussharpsubtle라이트다크한글 지원출시 2019개정 2026

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

Brand DNA

브랜드 DNA

브랜드명: 엔비디아(NVIDIA).
한 줄 정체성: GPU, 소프트웨어, 시스템을 함께 설계해 AI와 그래픽 작업을 가속하는 컴퓨팅 플랫폼 기업.
공식 디자인 철학: 회사 소개는 가속 컴퓨팅으로 어려운 문제를 풀고 산업을 바꾸는 역할을 강조한다. 이를 시각적으로 해석하면 기술을 먼저 보여 주고, 짧고 굵은 제목과 선명한 행동 버튼으로 다음 단계를 안내하는 구성이다. 후반부의 시각적 해석은 공식 표어가 아닌 화면 관찰이다.
시그니처 요소 1개: 검정 제품 무대 위 흑연색 GPU와 NVIDIA Green 구매 버튼의 대비. GeForce 화면은 사선으로 놓인 금속 제품을 넓게 보여 주고, 제품명은 흰색 굵은 산세리프, 구매 행동은 검정 글자의 각진 초록 버튼으로 구분한다. 초록 파동은 제품 아래에만 둔다.
자료 범위: 공식 브랜드 가이드, 현재 공식 웹 CSS, NVIDIA App 릴리스 노트를 함께 참고했다. 독립된 공개 디자인 시스템 사이트는 확인하지 못해 is_official: false로 표기했다. 색·서체·크기·간격의 원값은 공식 자료에서 가져왔고, 갤러리용 이름과 일부 역할 연결은 재구성했다. 전체 신뢰도는 medium이다.
연도: 2019년은 확인한 브랜드 PDF의 발행 연도다. 첫 디자인 시스템 공개 연도는 알 수 없어 released_year는 추정이다. 2026년은 현재 CSS를 확인한 해이며, 메이저 개편 연도가 확인된 것은 아니다.
로고 원본: 현재 브랜드 페이지의 가로형 공식 SVG에서 두 경로를 가져왔다. 그림의 좌표와 비율은 보존하고 바깥의 빈 캔버스만 줄였다. 모든 id에는 nvidia- 접두사를 붙였다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 선명함, 정밀함, 자신감.
무드 설명: GeForce의 검정 제품 무대에서는 촘촘한 방열핀, 얇은 금속 테두리와 대각선 구도가 주인공이다. 짧고 굵은 제품명을 왼쪽에 놓고 초록은 구매 버튼과 제품 밑의 빛에 집중한다. 설명은 간결하게, 사양은 단위와 큰 숫자를 정렬해 기술 제품 특유의 리듬을 만든다.
비주얼 스타일: 모던 미니멀.
밀도(Density): Spacious — 공식 웹의 큰 제목, 넓은 기술 소개 섹션, 분리된 콘텐츠 카드 구성을 따른다. 카드 미리보기는 320×240·280×210에서 제품 그림, 구매 행동과 세 사양 열이 함께 보이도록 압축했다.
모서리 성향: Sharp(0~2px) — 기본 버튼은 각지고, 공식 .nv-teaser--card의 모서리는 2px이다.
평면성: Subtle — 대부분 면으로 구분하며, 카드에는 약한 그림자를 쓴다.
테마 근거: NVIDIA App 11.0.4·11.0.4.159 공식 릴리스 노트에 Settings > Features > Theme에서 라이트·다크를 선택한다고 명시되어 있다. 따라서 [light, dark]다. 이 문서의 화면은 공식 웹을 바탕으로 재구성했으며, 앱의 정확한 색 토큰을 복제한 것은 아니다.

Color System

컬러 시스템 (CSS 변수)

2019년 공식 PDF 8~9쪽은 NVIDIA Green #76B900(RGB 118·185·0), Dark Gray #1E1E1E, White #FFFFFF를 명시한다. 현재 공식 SVG와 CSS의 --color-nvidia-green도 #76B900이다.

현재 웹 CSS에는 초록 5단계, 무채색 15단계, 상태 표현에 쓸 보조색이 공개되어 있다. 아래 --color-primary-*는 갤러리 스키마의 이름이다. 공개 단계가 적은 구간은 같은 값을 공유한다. #91C733은 실제 버튼 hover, #5E9400은 실제 스크롤바 hover 값이다. 완전한 10단계 공식 브랜드 스케일로 해석하지 않는다.

색값은 공식 자료에서 확인했다. 성공·주의 등 의미와 배경·글자 역할의 연결은 예시용 재구성(추정)이다. 라이트는 공식 .theme-light의 흰색·검정, 다크는 .theme-dark의 검정·밝은 회색을 바탕으로 구성했다. 기본 파일은 라이트, 다크 변형 파일은 다크가 :root 기본값이다.

:root {
  /* 공식 원색과 공식 웹 팔레트를 갤러리 이름으로 대응 */
  --color-primary-50: #CFFF40;   /* 공식 --color-green-050 */
  --color-primary-100: #BFF230;  /* 공식 --color-green-100 */
  --color-primary-200: #91C733;  /* 공식 버튼 hover */
  --color-primary-300: #76B900;  /* 공식 --color-green-300 */
  --color-primary-400: #76B900;  /* 기본색의 별칭 */
  --color-primary-500: #76B900;  /* NVIDIA Green */
  --color-primary-600: #5E9400;  /* 공식 스크롤바 hover */
  --color-primary-700: #3F8500;  /* 공식 --color-green-500 */
  --color-primary-800: #265600;  /* 공식 --color-green-700 */
  --color-primary-900: #265600;  /* 가장 짙은 공개 단계의 별칭 */
  --color-secondary-500: #1E1E1E; /* 공식 PDF의 Dark Gray */

  /* 공식 CSS의 무채색 원값 */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F7F7F7;
  --color-neutral-100: #EEEEEE;
  --color-neutral-200: #E0E0E0;
  --color-neutral-300: #CCCCCC;
  --color-neutral-400: #A7A7A7;
  --color-neutral-500: #757575;
  --color-neutral-600: #636363;
  --color-neutral-700: #4B4B4B;
  --color-neutral-800: #313131;
  --color-neutral-900: #222222;
  --color-neutral-950: #161616;
  --color-neutral-975: #0C0C0C;
  --color-neutral-1000: #000000;

  /* 공식 팔레트 값, 의미 연결은 예시용 (추정) */
  --color-success-bg: #F7F7F7;
  --color-success-fg: #265600;
  --color-warning-bg: #FEEEB2;
  --color-warning-fg: #4B4B4B;
  --color-error-bg: #FFD7D7;
  --color-error-fg: #961515;
  --color-info-bg: #CBF5FF;
  --color-info-fg: #0046A4;

  /* 역할 대응 (추정): 값 자체는 공식 웹 CSS */
  --bg-base: #FFFFFF;
  --bg-subtle: #F7F7F7;
  --bg-elevated: #FFFFFF;
  --bg-overlay: #FFFFFF;       /* .nv-modal의 면 */
  --text-primary: #000000;
  --text-secondary: #4B4B4B;
  --text-tertiary: #636363;
  --text-on-primary: #000000;  /* 공식 초록 버튼의 검은 글자 */
  --text-disabled: #A7A7A7;
  --text-inverse: #FFFFFF;
  --border-default: #CCCCCC;
  --border-subtle: #E0E0E0;
  --border-strong: #636363;
  --border-focus: #76B900;
  --action-hover: #91C733;     /* 공식 .nv-button hover·active */
  --action-active: #91C733;
  --font-sans: "NVIDIA Sans", "NVIDIA-NALA", "NVIDIA-APAC", "Source-Han-Sans-KR", "Source Han Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Arial, sans-serif;
}

[data-theme="dark"] {
  /* 공식 다크 웹 면과 팔레트로 역할을 재구성 (추정) */
  --color-success-bg: #161616; --color-success-fg: #BFF230;
  --color-warning-bg: #161616; --color-warning-fg: #FCDE7B;
  --color-error-bg: #161616; --color-error-fg: #FF8181;
  --color-info-bg: #161616; --color-info-fg: #7CD7FE;
  --bg-base: #000000; --bg-subtle: #161616;
  --bg-elevated: #222222; --bg-overlay: #0C0C0C;
  --text-primary: #FFFFFF; --text-secondary: #EEEEEE;
  --text-tertiary: #A7A7A7; --text-disabled: #757575;
  --text-inverse: #000000;
  --border-default: #313131; --border-subtle: #222222; --border-strong: #898989;
}

초록 버튼의 검정 글자는 약 8.7:1, 흰 글자는 약 2.4:1의 대비다. 작은 버튼 글자는 공식 웹처럼 검정을 쓴다. 숫자는 sRGB 상대 휘도로 계산한 값이다. 로고의 초록 경로는 두 테마에서 그대로 유지하고 글자 경로만 흑백으로 전환한다.

Typography

타이포그래피

폰트 페어링:
- 영문: NVIDIA Sans — 전용 서체. 공식 CSS 내부 이름은 지역에 따라 NVIDIA-NALA, NVIDIA-APAC 등이다. 서체 배포본은 NVIDIA의 전용 EULA를 따른다.
- 한글: Source Han Sans KR(본고딕, SIL OFL 1.1). 공식 한국어 CSS는 body.ko-kr-fonts-loaded에서 Source-Han-Sans-KR를, 한국어 페이지의 인라인 스타일은 source-han-sans-korean을 사용한다.
- 미리보기: 설치된 글꼴만 사용하며 한글은 Apple SD Gothic Neo·맑은 고딕으로 대체할 수 있다. 실제 전용 서체와 화면의 글자 폭은 다를 수 있다.
위계 (데스크톱 공식 웹 클래스 기준, 크기 / 굵기 / 행간 / 자간):
- Display: 60px / 700 / 1.25 / normal — .h--huge.
- H1: 48px / 700 / 1.25 / normal — .h--large, CSS의 3pc를 px로 환산.
- H2: 36px / 700 / 1.25 / normal — .h--medium.
- H3: 28px / 700 / 1.25 / normal — .h--small.
- Body Large: 22px / 400 / 1.75 / normal — .p--large.
- Body: 15px / 400 / 1.67 / normal — --tp_p-m과 기본 본문 규칙.
- Body Small: 14px / 400 / 1.5 / normal — 공식 크기·굵기·행간 토큰의 조합(역할 연결은 추정).
- Caption: 11px / 400 / 1.4 / normal — .p--small.
반응형: 공식 제목 단계는 60→48→36px, 48→36→28px처럼 줄어든다. 예시의 H1은 28~48px로 제한했다. 카드의 24px 제품명, 13px 사양 숫자, 7~9px 탐색·보조 글자는 갤러리 압축용 추정이며 제품 UI의 실제 규격이 아니다.

Spacing

스페이싱

Base unit: 4px — 공식 --size-100:4px부터 8·12·16·24·32·48·64px가 이어진다. 1·2·3·6px 같은 보조 단계도 있다.
토큰: 아래 값은 현재 공식 웹 CSS의 --size-*에서 가져왔다. 별칭의 사용 위치는 재구성이다.

:root {
  --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-max: 1320px;
}

Container: 1320px는 공식 데스크톱 .breadcrumb-container의 990pt와 같다. 이를 데모 본문 폭으로 대응한 것은 추정이다. 좌우 16px는 공식 --padding-text이며, 큰 화면 예시는 32px로 늘린다.
버튼 여백: 공식 기본 버튼은 13px 15px, 작은 화면은 11px 13px 또는 9px 12px다. ⑨ 기본형은 13px 15px를 사용한다.

Border Radius

:root {
  --radius-none: 0;   /* 각진 기본 버튼 */
  --radius-sm: 2px;   /* 공식 .nv-teaser--card */
  --radius-md: 2px;   /* 같은 카드 값의 별칭 */
  --radius-lg: 2px;   /* 같은 카드 값의 별칭 */
  --radius-xl: 2px;   /* 같은 카드 값의 별칭 */
  --radius-full: 50%; /* 공식 스피너·원형 계정 아이콘 */
}

별칭을 여러 개 두었지만 기본 모양은 0~2px로 통일한다. 입력의 0px 적용과 배지의 2px 적용은 예시용 추정이다.

Shadow / Elevation

:root {
  --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: var(--shadow-lg);           /* 공개된 모달 값의 별칭 */
}

기본 카드에는 약한 그림자만, 테두리형에는 선만 쓴다. 다크 모드에서는 면과 경계를 먼저 구분하고 그림자의 원값은 보존한다.

Iconography

스타일: Outline 중심, 일부 Filled. 공식 웹은 Font Awesome 6 Pro·Sharp와 인라인 SVG를 함께 사용한다.
Stroke 굵기: 헤더 24px 아이콘은 1.5px, 32px 아이콘은 2px로 확인된다.
모서리 처리: Square 중심의 간결한 선.
추천 라이브러리: 실제 세트는 Font Awesome 6 Pro·Sharp다. 공개 대체재로는 Lucide의 1.5px 선 아이콘을 사용할 수 있다(예시용 제안).
예시 도형: 제품 그림은 공식 RTX 5090 Founders Edition 사진의 방열핀 두 면과 중앙 X 프레임을 SVG로 재구성했다. 방열핀을 팬 아이콘 두 개로 대체하지 않는다. ⑫ 메모리·연산·냉각 그림은 사양을 설명하는 자체 도형이며, 로고는 공식 SVG 원형을 유지한다.

Component Guide

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

버튼의 기본색·hover·각진 모양·여백·200ms 전환, 카드의 2px 모서리·그림자는 공식 웹 CSS에 근거한다. 아래 상태 연결, 입력·배지·내비게이션 조합, Danger·Loading 변형은 갤러리 예시용 재구성(추정)이다.

버튼(Button) — 기본형·보조형·투명형·위험형, 기본·마우스 올림·누름·비활성·처리 중.

.nvidia-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-sm);
  position:relative; padding:13px 15px; border:0; border-radius:var(--radius-none);
  font:700 18px/1.25 var(--font-sans); text-decoration:none; cursor:pointer;
  transition:background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.nvidia-btn--primary { background:var(--color-primary-500); color:var(--text-on-primary); }
.nvidia-btn--primary:hover { background:var(--action-hover); }
.nvidia-btn--primary:active { background:var(--action-active); }
.nvidia-btn--secondary { background:transparent; color:var(--text-primary); border:2px solid var(--color-primary-500); padding:11px 13px; }
.nvidia-btn--secondary:hover { border-color:var(--text-primary); }
.nvidia-btn--secondary:active { background:var(--bg-subtle); }
.nvidia-btn--ghost { background:transparent; color:var(--text-primary); }
.nvidia-btn--ghost:hover { background:var(--bg-subtle); }
.nvidia-btn--ghost:active { background:var(--border-subtle); }
.nvidia-btn--danger { background:var(--color-error-fg); color:var(--bg-base); }
.nvidia-btn--danger:hover { background:var(--color-error-bg); color:var(--color-error-fg); }
.nvidia-btn--danger:active { background:var(--color-error-fg); color:var(--bg-base); }
.nvidia-btn:focus-visible { outline:2px solid var(--border-focus); outline-offset:3px; }
.nvidia-btn:disabled { cursor:default; background:var(--bg-subtle); color:var(--text-disabled); }
.nvidia-btn--secondary:disabled { background:transparent; border-color:var(--border-default); }
.nvidia-btn--ghost:disabled { background:transparent; }
.nvidia-btn[aria-busy="true"] { color:transparent; pointer-events:none; }
.nvidia-btn[aria-busy="true"]::after {
  content:""; position:absolute; width:16px; height:16px; border:2px solid currentColor;
  color:var(--text-primary); border-top-color:transparent; border-radius:var(--radius-full);
  animation:nvidia-spin 2s linear infinite;
}
.nvidia-btn--primary[aria-busy="true"]::after { color:var(--text-on-primary); }
.nvidia-btn--danger[aria-busy="true"]::after { color:var(--bg-base); }
@keyframes nvidia-spin { to { transform:rotate(360deg); } }

처리 중 상태는 글자를 DOM에 남겨 접근 가능한 이름을 보존한다. aria-busy와 함께 중복 실행을 막는 로직은 실제 제품 구현에서 연결한다.

입력(Input) — 기본·포커스·오류·비활성.

.nvidia-field { display:grid; gap:var(--space-sm); }
.nvidia-input {
  box-sizing:border-box; width:100%; padding:12px 16px; border:1px solid var(--border-default);
  border-radius:var(--radius-none); background:var(--bg-base); color:var(--text-primary);
  font:400 15px/1.67 var(--font-sans);
}
.nvidia-input::placeholder { color:var(--text-tertiary); }
.nvidia-input:focus { outline:2px solid var(--border-focus); outline-offset:2px; border-color:transparent; }
.nvidia-input[aria-invalid="true"] { border-color:var(--color-error-fg); }
.nvidia-input[aria-invalid="true"]:focus { outline-color:var(--color-error-fg); border-color:transparent; }
.nvidia-field__error { color:var(--color-error-fg); font-size:14px; }
.nvidia-input:disabled { background:var(--bg-subtle); color:var(--text-disabled); }

카드(Card) — 기본형·강조형·테두리형.

.nvidia-card { padding:var(--space-lg); border-radius:var(--radius-sm); background:var(--bg-elevated); color:var(--text-primary); box-shadow:var(--shadow-sm); transition:box-shadow var(--duration-card) var(--ease-out); }
.nvidia-card:hover { box-shadow:var(--shadow-md); }
.nvidia-card--strong { background:var(--text-primary); color:var(--bg-base); box-shadow:none; }
.nvidia-card--strong:hover { box-shadow:none; }
.nvidia-card--outlined { background:var(--bg-base); border:1px solid var(--border-default); box-shadow:none; }
.nvidia-card--outlined:hover { box-shadow:none; border-color:var(--border-strong); }
.nvidia-card h3 { margin:0 0 var(--space-sm); font:700 24px/1.25 var(--font-sans); }
.nvidia-card p { margin:0; font:400 15px/1.67 var(--font-sans); }

배지·태그(Badge / Tag) — 채움형·옅은 면·테두리형.

.nvidia-badge { display:inline-flex; align-items:center; padding:4px 8px; border-radius:var(--radius-sm); font:700 11px/1.4 var(--font-sans); }
.nvidia-badge--solid { background:var(--color-primary-500); color:var(--text-on-primary); }
.nvidia-badge--subtle { background:var(--bg-subtle); color:var(--text-secondary); }
.nvidia-badge--outline { border:1px solid var(--border-strong); color:var(--text-primary); }

내비게이션(Navigation) — 로고와 짧은 메뉴 항목을 나란히 놓는 헤더.

.nvidia-nav { display:flex; align-items:center; justify-content:space-between; gap:var(--space-lg); padding:var(--space-md) var(--space-xl); background:var(--bg-base); color:var(--text-primary); }
.nvidia-nav__items { display:flex; gap:var(--space-lg); align-items:center; }
.nvidia-nav__item { padding:8px 0; background:none; border:0; color:var(--text-secondary); font:400 15px/1.67 var(--font-sans); cursor:pointer; }
.nvidia-nav__item:hover,.nvidia-nav__item[aria-current="page"] { color:var(--text-primary); text-decoration:underline; text-underline-offset:6px; }
.nvidia-nav__item:focus-visible { outline:2px solid var(--border-focus); outline-offset:3px; }

Motion

:root {
  --duration-fast: 100ms;  /* 공식 링크 화살표 */
  --duration-base: 200ms;  /* 공식 기본 버튼 */
  --duration-card: 500ms;  /* 공식 기본 카드 그림자 */
  --duration-slow: 800ms;  /* 공식 카드 hover */
  --ease-out: ease-out;   /* 공식 버튼 */
  --ease-in-out: cubic-bezier(.25,.8,.25,1); /* 공식 카드 hover의 실제 곡선 */
}
@media (prefers-reduced-motion: reduce) {
  .nvidia-btn,.nvidia-card { transition:none; }
  .nvidia-btn[aria-busy="true"]::after { animation:none; }
}

모션은 행동과 상태를 설명하는 데 쓴다. Loading의 2초 회전은 공식 모달 스피너에서 가져왔다. 움직임 줄이기 대응은 예시용 보완이며, 회전이 멈춰도 aria-busy와 대기 문구로 상태를 알려 준다.

Anti-patterns

1. 로고의 눈과 글자 비율을 바꾸거나 직접 다시 그리지 않는다. 공식 브랜드 페이지의 형태 규칙이다. 2. 초록색 면 위에 두 색 로고를 그대로 얹지 않는다. 공식 브랜드 가이드는 그 배경에 별도의 단색 조합을 제시한다. 예시는 로고를 무채색 면에 둔다. 3. NVIDIA Green 버튼에 작은 흰 글자를 쓰지 않는다. 실제 공식 버튼은 검은 글자를 쓰며 대비도 높다. 4. 일반 버튼·카드를 큰 알약 모양으로 바꾸지 않는다. 현재 웹의 0~2px 모양에서 도출한 관찰 기준이다. 5. 제품을 작은 칩 아이콘으로 줄이거나 초록색 견본 띠로 대체하지 않는다. GeForce의 특징은 검정 무대, 크게 보이는 금속 제품, 제한된 초록 빛과 구매 버튼이다. 제품·가격·사양 대신 회사 표어만 크게 놓으면 이 시각 문법이 사라진다.

Sources

출처

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