Nvidia
Nvidia
nvidia
Design System
NVIDIA logo

NVIDIA

NVIDIA's website is a high-contrast, technology-forward experience that communicates raw computational power through design restraint. The page is built on a stark black (#000000) and white (#ffffff) foundation, punctuated by NVIDIA's signature green (#76b900) -- a color so specific it functions as a brand fingerprint. This is not the lush green of nat

01

Color Palette

Brand

Accent

Neutrals

Semantic

02

Typography

Type Scale

Rendered in system-ui to clearly show scale & weight.

display48px · 700 · 1.25
Design at scale
32px32px · 700 · 1.25
Section heading
heading-lg24px · 700 · 1.4
Subheading
body16px · 400 · 1.5
Body text. The quick brown fox jumps over the lazy dog. Designed for readable line-height in long-form content.
small12px · 400 · 1.5
Supporting text
caption12px · 400 · 1.5
Caption · timestamp · 2026
label10px · 500 · 1.5
BADGE / LABEL

Fonts

Primary
NVIDIA Sans (EMEA)
Brand-only
NVIDIA's brand typeface. Not publicly distributed.
Not publicly distributed.
Primary
Font Awesome 6 Pro
Commercial
Commercial icon font (subscription required).
Install via Font Awesome
Primary
Font Awesome 6 Sharp
Commercial
Install via Font Awesome
03

Spacing & Shape

Spacing

PurposeValuePreview
Densitycomfortable
Base unit8px
Section gap16px
Card padding12px
Element gap8px

Border Radius

ElementValuePreview
inlineMicro1px
tinyMicro1px
buttonsStandard2px
cardsStandard2px
containersStandard2px
inputsStandard2px
avatarCircle50%
circularCircle50%

Borders

ElementValuePreview
Border Accent2px solid #76b900
Border2px solid #76b900
Border1px solid #76b900

Elevation

Subtle
Default
Elevated
Floating
Modal
04

Guidelines

Do and Don't guidelines parsed from DESIGN.md.

Do

  • use NVIDIA Green #76b900 exclusively as a SIGNAL color — borders, link underlines, button outlines, focus states.
  • keep the foundation black-and-white. Black #000000 for dark sections, white #ffffff for content, with green pinpricks of accent.
  • use sharp 1-2px border radius across all components — buttons, cards, inputs.
  • apply tight 1.25 line-height to headings for dense, authoritative blocks of text.
  • use 2px solid #76b900 as the primary button border pattern — green-outlined CTAs are the brand's default interactive shape.
  • use Font Awesome 6 Pro/Sharp at weight 900 for sharp iconography matching the engineering aesthetic.

Don't

  • N'T use the green as a fill on large surfaces, backgrounds, or decorative gradients — that destroys its function as a fingerprint accent.
  • N'T introduce mid-tone backgrounds (gray cards, tinted sections) — NVIDIA's contrast is binary by design.
  • N'T use rounded or pill-shaped buttons — that reads as friendly consumer tech, not high-precision engineering hardware.
  • N'T use generous 1.5+ line-height on display headers — it relaxes the engineered, compressed feel.
  • N'T use filled green buttons as the primary pattern — fills belong to consumer brands; NVIDIA reserves green for outlines and accents.
  • N'T use rounded or playful icon sets — they conflict with NVIDIA's industrial precision.
  • Use the green as a fill on large surfaces, backgrounds, or decorative gradients — that destroys its function as a fingerprint accent.
  • introduce mid-tone backgrounds (gray cards, tinted sections) — NVIDIA's contrast is binary by design.
  • Use rounded or pill-shaped buttons — that reads as friendly consumer tech, not high-precision engineering hardware.
  • Use generous 1.5+ line-height on display headers — it relaxes the engineered, compressed feel.
05

Components

Buttons

button-primary
Backgroundtransparent
Text#000000
Radius2
Padding11px 13px
Font16px/700
Use: Primary CTA, 2px green border
button-secondary
Backgroundtransparent
Text#000000
Radius2
Font16px/700
Use: Secondary action, 1px green border
button-compact
Backgroundtransparent
Text#000000
Radius2
Font14.4px/700
Use: Inline / compact CTA

Cards

card
card
Background#ffffff
Radius2
Padding16-24px
Use: Light content card
card-dark
card-dark
Background#1a1a1a
Text#ffffff
Radius2
Padding16-24px
Use: Dark-section card

Related design systems