NVIDIA Design System

Overview

NVIDIA's marketing system is built like a piece of engineering documentation that learned graphic design — every page is a structured cascade of dense, factual information arranged on a paper-white grid, framed top and bottom by deep black hero/footer chapters. There is exactly one accent color in the entire system, and it is doing all the work: NVIDIA Green ({colors.primary} — #76b900), used for every primary CTA, every active tab, every link affordance on dark surfaces, and the small decorative corner squares that mark out card containers. Nothing else competes for attention.

The system's character comes from extreme typographic restraint and an almost punishingly angular geometry. Every container, button, and image uses {rounded.sm} (2px) — a token that's barely-there but never zero, giving the system the precise, technical feel of CAD output rather than warm consumer software. Cards sit on plain {colors.canvas} with a hairline {colors.hairline} border (no shadow, no elevation), separated by tight 8px-base spacing rhythm. Long-form pages stack 6–10 of these cards into multi-column technical grids without ever introducing decorative breaks.

The black-canvas hero and footer chapters are the system's "headline moments" — a single full-bleed photographic or 3D-rendered image with {typography.display-xl} headline copy laid in white, a single green CTA button, and a small green corner square as the only ornamentation. Everything else is subordinate.

Key Characteristics:

• Single-accent system: {colors.primary} carries every CTA, active state, and decorative motif. The rest is monochrome black/white/gray.
• Two-mode surface architecture: {colors.surface-dark} for hero/footer chapters; {colors.canvas} for body — alternating in a predictable rhythm down the page
• Hyper-angular geometry: {rounded.sm} (2px) on every interactive element. There are no pill buttons, no rounded cards, no soft chrome.
• NVIDIA-EMEA proprietary sans-serif at weights 400 and 700, scaled across a 12-tier hierarchy from {typography.utility-xs} (10px) up to {typography.display-xl} (48px)
• Card library leans on hairline {colors.hairline} borders and {colors.surface-soft} backgrounds rather than shadows for separation
• Signature decorative element: the small {component.corner-square} (~12px green square) anchored to one corner of resource and feature cards
• Dense multi-column footer with 4–6 link columns on {colors.surface-dark} — every page closes with the same structured global navigation

Known Gaps

• Mobile screenshots not captured — responsive behavior synthesizes NVIDIA's known mobile pattern (hamburger drawer, accordion footer, 1-up card grid, hero downscale) from desktop evidence and the documented breakpoint stack.
• Hover states not documented by system policy.
• Dialog / modal styling beyond the locale-selector overlay not visible in the captured surfaces.
• Form field styling for full sign-up / contact forms is not present in the captured surfaces — only inline search and basic text inputs are documented.
• Login / authenticated chrome not in the captured pages.