design-md-nvidia
Design System: NVIDIA
1. Visual Theme & Atmosphere
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 nature; it's the electric, lime-shifted green of GPU-rendered light, a color that sits between chartreuse and kelly green and immediately signals "NVIDIA" to anyone in technology.
The custom NVIDIA-EMEA font family (with Arial and Helvetica fallbacks) creates a clean, industrial typographic voice. Headings at 36px bold with tight 1.25 line-height create dense, authoritative blocks of text. The font lacks the geometric playfulness of Silicon Valley sans-serifs -- it's European, pragmatic, and engineering-focused. Body text runs at 15-16px, comfortable for reading but not generous, maintaining the sense that screen real estate is optimized like GPU memory.
What distinguishes NVIDIA's design from other dark-background tech sites is the disciplined use of the green accent. The #76b900 appears in borders (2px solid #76b900), link underlines (underline 2px rgb(118, 185, 0)), and CTAs -- but never as backgrounds or large surface areas on the main content. The green is a signal, not a surface. Combined with a deep shadow system (rgba(0, 0, 0, 0.3) 0px 0px 5px) and minimal border radius (1-2px), the overall effect is of precision engineering hardware rendered in pixels.
Key Characteristics:
- NVIDIA Green (
#76b900) as pure accent -- borders, underlines, and interactive highlights only - Black (
#000000) dominant background with white (#ffffff) text on dark sections - NVIDIA-EMEA custom font with Arial/Helvetica fallback -- industrial, European, clean
- Tight line-heights (1.25 for headings) creating dense, authoritative text blocks
- Minimal border radius (1-2px) -- sharp, engineered corners throughout
- Green-bordered buttons (
2px solid #76b900) as primary interactive pattern - Font Awesome 6 Pro/Sharp icon system at weight 900 for sharp iconography
- Multi-framework architecture (PrimeReact, Fluent UI, Element Plus) enabling rich interactive components