Design System Inspired by NVIDIA

Category: 미디어 & 소비자 GPU 컴퓨팅. 그린-블랙 에너지, 기술적 파워 미학.

1. 비주얼 테마 & 분위기

NVIDIA의 웹사이트는 절제된 디자인으로 순수한 연산 능력을 전달하는 고대비, 기술 중심 경험이다. 페이지는 강렬한 블랙(#000000)과 화이트(#ffffff)를 기반으로, NVIDIA 고유의 그린(#76b900)이 포인트로 들어간다 — 이 색은 너무나 특정적이어서 브랜드 지문처럼 기능한다. 이것은 자연의 풍요로운 초록이 아니라, GPU가 렌더링한 빛의 전기적이고 라임-쉬프트된 그린으로, 차트리즈와 켈리 그린 사이 어딘가에 위치하며 기술 업계 사람이라면 누구나 즉각 “NVIDIA”를 떠올리게 만드는 색이다.

커스텀 NVIDIA-EMEA 폰트 패밀리(Arial과 Helvetica 폴백 포함)는 깔끔하고 산업적인 타이포그래피 보이스를 만들어낸다. 36px 볼드 헤딩에 1.25의 타이트한 줄간격은 밀도 높고 권위 있는 텍스트 블록을 형성한다. 이 폰트는 실리콘밸리 산세리프 특유의 기하학적 유희성이 없다 — 유럽적이고, 실용적이며, 엔지니어링에 집중되어 있다. 본문은 15~16px로 읽기 편하되 넉넉하지는 않으며, GPU 메모리처럼 화면 공간이 최적화되어 있다는 느낌을 유지한다.

NVIDIA 디자인이 다른 다크 배경 테크 사이트와 구별되는 점은 그린 액센트의 절제된 사용에 있다. #76b900은 보더(2px solid #76b900), 링크 언더라인(underline 2px rgb(118, 185, 0)), CTA에 나타나지만, 메인 콘텐츠의 배경이나 넓은 면적에는 절대 사용되지 않는다. 그린은 신호이지 표면이 아니다. 깊이감 있는 그림자 시스템(rgba(0, 0, 0, 0.3) 0px 0px 5px)과 최소한의 보더 반경(1~2px)이 결합되어, 전체적으로 픽셀로 렌더링된 정밀 엔지니어링 하드웨어 같은 인상을 준다.

주요 특성:

• NVIDIA Green(#76b900)을 순수 액센트로 사용 — 보더, 언더라인, 인터랙티브 하이라이트에만 적용
• 블랙(#000000) 지배적 배경, 다크 섹션에는 화이트(#ffffff) 텍스트
• Arial/Helvetica 폴백을 가진 NVIDIA-EMEA 커스텀 폰트 — 산업적이고, 유럽적이며, 깔끔한 느낌
• 타이트한 줄간격(헤딩 1.25)으로 밀도 높고 권위 있는 텍스트 블록 형성
• 최소한의 보더 반경(1~2px) — 전반에 걸쳐 샤프하고 정밀한 모서리
• 그린 보더 버튼(2px solid #76b900)이 기본 인터랙티브 패턴
• Font Awesome 6 Pro/Sharp 아이콘 시스템, weight 900으로 샤프한 아이코노그래피
• 풍부한 인터랙티브 컴포넌트를 지원하는 멀티 프레임워크 아키텍처(PrimeReact, Fluent UI, Element Plus)

2. 컬러 팔레트 & 역할

주요 브랜드

• NVIDIA Green (#76b900): 시그니처 — 보더, 링크 언더라인, CTA 아웃라인, 활성 상태 표시. 넓은 면적 채우기에는 절대 사용하지 않음.
• True Black (#000000): 페이지 기본 배경, 밝은 표면 위 텍스트, 지배적 톤.
• Pure White (#ffffff): 다크 배경 위 텍스트, 밝은 섹션 배경, 카드 표면.

확장 브랜드 팔레트

• NVIDIA Green Light (#bff230): 하이라이트와 호버 상태를 위한 밝은 라임 액센트.
• Orange 400 (#df6500): 알림, 주목 배지, 에너지 관련 맥락을 위한 웜 액센트.
• Yellow 300 (#ef9100): 보조 웜 액센트, 제품 카테고리 하이라이트.
• Yellow 050 (#feeeb2): 콜아웃 배경을 위한 밝은 웜 표면.

상태 & 시맨틱

• Red 500 (#e52020): 오류 상태, 파괴적 동작, 치명적 알림.
• Red 800 (#650b0b): 심각한 경고 배경을 위한 진한 레드.
• Green 500 (#3f8500): 성공 상태, 긍정적 표시(브랜드 그린보다 어두움).
• Blue 700 (#0046a4): 정보성 액센트, 링크 호버 대안.

장식적

• Purple 800 (#4d1368): 그라디언트 끝부분, 프리미엄/AI 맥락을 위한 진한 퍼플.
• Purple 100 (#f9d4ff): 밝은 퍼플 표면 틴트.
• Fuchsia 700 (#8c1c55): 특별 프로모션이나 추천 콘텐츠를 위한 리치 액센트.

뉴트럴 스케일

• Gray 300 (#a7a7a7): 뮤트 텍스트, 비활성 레이블.
• Gray 400 (#898989): 보조 텍스트, 메타데이터.
• Gray 500 (#757575): 3차 텍스트, 플레이스홀더, 푸터.
• Gray Border (#5e5e5e): 은은한 보더, 구분선.
• Near Black (#1a1a1a): 다크 표면, 블랙 페이지의 카드 배경.

인터랙티브 상태

• Link Default (dark bg) (#ffffff): 다크 배경의 화이트 링크.
• Link Default (light bg) (#000000): 밝은 배경의 그린 언더라인이 있는 블랙 링크.
• Link Hover (#3860be): 모든 링크 변형에서 호버 시 블루로 전환.
• Button Hover (#1eaedb): 버튼 호버 상태의 틸 하이라이트.
• Button Active (#007fff): 활성/눌림 버튼 상태의 밝은 블루.
• Focus Ring (#000000 solid 2px): 키보드 포커스를 위한 블랙 아웃라인.

그림자 & 깊이

• Card Shadow (rgba(0, 0, 0, 0.3) 0px 0px 5px 0px): 부각된 카드를 위한 은은한 앰비언트 그림자.

3. 타이포그래피 규칙

폰트 패밀리

• Primary: NVIDIA-EMEA, 폴백: Arial, Helvetica, sans-serif
• Icon Font: Font Awesome 6 Pro (솔리드 아이콘 weight 900, 레귤러 700)
• Icon Sharp: Font Awesome 6 Sharp (라이트 아이콘 weight 300, 레귤러 400)

계층 구조

원칙

• 볼드가 기본 보이스: NVIDIA는 헤딩, 버튼, 링크, 레이블에 weight 700을 적극 사용한다. 400 weight는 본문 텍스트와 설명에만 쓰이고 — 그 외 모든 것은 볼드로, 자신감과 권위를 투영한다.
• 타이트한 헤딩, 여유로운 본문: 헤딩 줄간격은 일관되게 1.25(타이트)이며, 본문 텍스트는 1.50~1.67로 여유롭다. 이 대비는 콘텐츠 블록 상단에 시각적 밀도를 만들고 단락에서 편안한 가독성을 제공한다.
• 내비게이션에 대문자 사용: 링크 레이블은 weight 700과 함께 text-transform: uppercase를 사용하여, 하드웨어 사양 레이블처럼 읽히는 내비게이션 보이스를 만든다.
• 장식적 자간 없음: 컴팩트 버튼(0.144px)을 제외하고 자간은 전반에 걸쳐 normal이다. 폰트 자체가 조작 없이도 산업적 특성을 담고 있다.

4. 컴포넌트 스타일링

버튼

Primary (Green Border)

• Background: transparent
• Text: #000000
• Padding: 11px 13px
• Border: 2px solid #76b900
• Radius: 2px
• Font: 16px weight 700
• Hover: background #1eaedb, text #ffffff
• Active: background #007fff, text #ffffff, border 1px solid #003eff, scale(1)
• Focus: background #1eaedb, text #ffffff, outline #000000 solid 2px, opacity 0.9
• 용도: 주요 CTA (“Learn More”, “Explore Solutions”)

Secondary (Green Border Thin)

• Background: transparent
• Border: 1px solid #76b900
• Radius: 2px
• 용도: 보조 동작, 대안 CTA

Compact / Inline

• Font: 14.4px weight 700
• Letter-spacing: 0.144px
• Line-height: 1.00
• 용도: 인라인 CTA, 컴팩트 내비게이션

카드 & 컨테이너

• Background: #ffffff (밝은 섹션) 또는 #1a1a1a (다크 섹션)
• Border: 없음 (클린 엣지) 또는 1px solid #5e5e5e
• Radius: 2px
• Shadow: 부각된 카드에 rgba(0, 0, 0, 0.3) 0px 0px 5px 0px
• Hover: 그림자 강화
• Padding: 내부 16~24px

링크

• 다크 배경: #ffffff, 언더라인 없음, 호버 시 #3860be로 전환
• 밝은 배경: #000000 또는 #1a1a1a, 언더라인 2px solid #76b900, 호버 시 #3860be로 전환하며 언더라인 제거
• 그린 링크: #76b900, 호버 시 #3860be로 전환
• 뮤트 링크: #666666, 호버 시 #3860be로 전환

내비게이션

• 다크 블랙 배경(#000000)
• 로고 좌정렬, 두드러진 NVIDIA 워드마크
• 링크: NVIDIA-EMEA 14px weight 700 대문자, #ffffff
• Hover: 컬러 전환, 언더라인 변경 없음
• 제품 카테고리 메가메뉴 드롭다운
• 배경이 있는 스크롤 고정

이미지 처리

• 제품/GPU 렌더 이미지를 히어로로, 대부분 전체 너비로 사용
• 스크린샷 이미지에 깊이감을 위한 은은한 그림자
• 다크 히어로 섹션에 그린 그라디언트 오버레이
• 50% 반경의 원형 아바타 컨테이너

특징적 컴포넌트

Product Cards

• 최소 반경(2px)의 클린 화이트 또는 다크 카드
• 타이틀에 그린 액센트 보더 또는 언더라인
• 볼드 헤딩 + 가벼운 설명 패턴
• 하단에 그린 보더 CTA

Tech Spec Tables

• 산업적 그리드 레이아웃
• 교대로 바뀌는 행 배경(은은한 그레이 전환)
• 볼드 레이블, 레귤러 값
• 주요 지표에 그린 하이라이트

Cookie/Consent Banner

• 하단 고정 위치
• 둥근 버튼(2px 반경)
• 그레이 보더 처리

5. 레이아웃 원칙

간격 시스템

• 기본 단위: 8px
• 스케일: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px, 15px
• 주요 패딩 값: 8px, 11px, 13px, 16px, 24px, 32px
• 섹션 간격: 48~80px 수직 패딩

그리드 & 컨테이너

• 최대 콘텐츠 너비: 약 1200px (컨테이너 내)
• 텍스트는 컨테이너 안에, 히어로 섹션은 전체 너비
• 기능 섹션: 제품 카드를 위한 2~3열 그리드
• 아티클/블로그 콘텐츠는 단일 컬럼
• 문서에는 사이드바 레이아웃

여백 철학

• 목적 있는 밀도: NVIDIA는 일반적인 SaaS 사이트보다 촘촘한 간격을 사용하며, 기술 콘텐츠의 밀도를 반영한다. 여백은 개념을 분리하기 위해 존재하지, 호화로운 공백을 만들기 위한 것이 아니다.
• 섹션 리듬: 다크 섹션과 화이트 섹션이 교대로 나타나며, 간격이 아닌 배경 컬러로 콘텐츠 블록을 구분한다.
• 카드 밀도: 제품 카드는 16~20px 간격으로 촘촘히 배치되어, 갤러리 느낌이 아닌 카탈로그 느낌을 만든다.

보더 반경 스케일

• Micro (1px): 인라인 스팬, 작은 요소
• Standard (2px): 버튼, 카드, 컨테이너, 인풋 — 거의 모든 것의 기본값
• Circle (50%): 아바타 이미지, 원형 탭 인디케이터

6. 깊이 & 엘리베이션

그림자 철학: NVIDIA의 깊이 시스템은 최소한이고 실용적이다. 본질적으로 하나의 그림자 값만 있다 — 30% 불투명도의 5px 앰비언트 블러 — 카드와 모달에 드물게 사용된다. 주요 깊이 신호는 그림자가 아니라 _컬러 대비_다: 화이트 섹션 옆의 블랙 배경, 블랙 표면 위의 그린 보더. 이는 빛을 시뮬레이션하는 것이 아닌 소재 차이에서 깊이가 오는, 하드웨어 같은 시각적 레이어링을 만든다.

장식적 깊이

• 히어로 콘텐츠 뒤에 그린 그라디언트 세척 효과
• 섹션 전환을 위한 다크-투-다커 그라디언트(블랙에서 니어 블랙)
• 글래스모피즘이나 블러 효과 없음 — 분위기보다 명확성 우선

7. 반응형 동작

브레이크포인트

터치 타겟

• 버튼은 편안한 탭 타겟을 위해 11px 13px 패딩 사용
• 내비게이션 링크는 충분한 간격의 14px 대문자
• 그린 보더 버튼은 다크 배경에서 고대비 터치 타겟 제공
• 모바일: 전체 화면 오버레이로 햄버거 메뉴 접힘

접힘 전략

• 히어로: 36px 헤딩이 비례적으로 축소
• 내비게이션: 전체 수평 내비게이션이 ~1024px에서 햄버거 메뉴로 접힘
• 제품 카드: 3열 → 2열 → 단일 컬럼 스택
• 푸터: 멀티컬럼 그리드가 단일 스택 컬럼으로 접힘
• 섹션 간격: 6480px가 모바일에서 3248px로 축소
• 이미지: 종횡비 유지, 컨테이너 너비에 맞게 스케일

이미지 동작

• GPU/제품 렌더는 모든 크기에서 고해상도 유지
• 히어로 이미지는 뷰포트에 비례적으로 스케일
• 카드 이미지는 일관된 종횡비 사용
• 풀블리드 다크 섹션은 엣지-투-엣지 처리 유지

8. 반응형 동작 (확장)

타이포그래피 스케일링

• Display 36px는 모바일에서 ~24px로 축소
• 섹션 헤딩 24px는 모바일에서 ~20px로 축소
• 본문 텍스트는 모든 브레이크포인트에서 15~16px 유지
• 버튼 텍스트는 일관된 탭 타겟을 위해 16px 유지

다크/라이트 섹션 전략

• 다크 섹션(블랙 배경, 화이트 텍스트)과 라이트 섹션(화이트 배경, 블랙 텍스트)이 교대로 배치
• 그린 액센트는 두 표면 유형 모두에서 일관되게 유지
• 다크에서: 링크는 화이트, 언더라인은 그린
• 라이트에서: 링크는 블랙, 언더라인은 그린
• 이 교대 배치는 자연스러운 스크롤 리듬과 콘텐츠 그룹화를 만들어낸다

9. 에이전트 프롬프트 가이드

빠른 컬러 참조

• Primary accent: NVIDIA Green (#76b900)
• Background dark: True Black (#000000)
• Background light: Pure White (#ffffff)
• 헤딩 텍스트 (다크 배경): White (#ffffff)
• 헤딩 텍스트 (라이트 배경): Black (#000000)
• 본문 텍스트 (라이트 배경): Black (#000000) 또는 Near Black (#1a1a1a)
• 본문 텍스트 (다크 배경): White (#ffffff) 또는 Gray 300 (#a7a7a7)
• Link hover: Blue (#3860be)
• Border accent: 2px solid #76b900
• Button hover: Teal (#1eaedb)

예시 컴포넌트 프롬프트

• “블랙 배경의 히어로 섹션을 만드세요. 헤드라인은 36px NVIDIA-EMEA weight 700, line-height 1.25, color #ffffff. 서브타이틀은 18px weight 400, line-height 1.67, color #a7a7a7. CTA 버튼은 transparent 배경, 2px solid #76b900 보더, 2px 반경, 11px 13px 패딩, text #ffffff. Hover: background #1eaedb, text white.”
• “제품 카드를 디자인하세요: 화이트 배경, 2px border-radius, box-shadow rgba(0,0,0,0.3) 0px 0px 5px. 타이틀은 20px NVIDIA-EMEA weight 700, line-height 1.25, color #000000. 본문은 15px weight 400, line-height 1.67, color #757575. 타이틀에 그린 언더라인 액센트: border-bottom 2px solid #76b900.”
• “내비게이션 바를 만드세요: #000000 배경, sticky top. NVIDIA 로고 좌정렬. 링크는 14px NVIDIA-EMEA weight 700 대문자, color #ffffff. Hover: color #3860be. 우정렬 그린 보더 CTA 버튼.”
• “다크 기능 섹션을 만드세요: #000000 배경. 섹션 레이블은 14px weight 700 대문자, color #76b900. 헤딩은 24px weight 700, color #ffffff. 설명은 16px weight 400, color #a7a7a7. 20px 간격의 세 제품 카드를 한 줄로.”
• “푸터를 디자인하세요: #000000 배경. 링크 그룹이 있는 멀티컬럼 레이아웃. 링크는 14px weight 400, color #a7a7a7. Hover: color #76b900. 하단 바에는 12px 법적 문구, color #757575.”

반복 가이드

1. 항상 #76b900을 액센트로 사용하고, 배경 채우기에는 절대 사용하지 않는다 — 보더, 언더라인, 하이라이트를 위한 신호 컬러
2. 버튼은 기본적으로 그린 보더가 있는 투명 배경 — 채워진 배경은 호버/활성 상태에서만 나타난다
3. Weight 700이 모든 인터랙티브 요소와 헤딩의 지배적 보이스; 400은 본문 단락에만 사용
4. 보더 반경은 모든 것에 2px — 이 샤프하고 미니멀한 둥글기는 산업적 미학의 핵심
5. 다크 섹션은 화이트 텍스트; 라이트 섹션은 블랙 텍스트 — 그린 액센트는 두 섹션 모두에서 동일하게 작동
6. 링크 호버는 링크의 기본 컬러에 관계없이 항상 #3860be(블루)
7. 헤딩의 줄간격 1.25, 본문 텍스트 1.50~1.67 — 시각적 계층을 위해 이 대비를 유지
8. 내비게이션은 대문자 14px 볼드 — 이 하드웨어 레이블 타이포그래피는 브랜드 보이스의 일부