NVIDIA Design System

NVIDIA's marketing system reads like 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 and footer chapters. One accent color does all the work: NVIDIA Green at "#76b900", used for every primary CTA, every active tab, every link affordance on dark surfaces, and the small decorative 12px corner squares that anchor each card. There are no gradients, no atmospheric mesh, no soft drop shadows — just black, white, gray, and green stacked into an editorial grid that scales from product cards to massive industry landing pages without bending its rules.

The file packages NVIDIA's chrome into a single Google Labs DESIGN.md spec: 26 color tokens (one brand green plus a deep press variant, two surface modes, six text tiers, six semantic flags, four editorial accents), 18 typography roles in the proprietary NVIDIA-EMEA cut at weights 400 and 700, a tiny radius scale that tops out at 2px outside of avatars, an 8px-based spacing system stretching to a 64px section rhythm, and 25 component specs covering buttons, pill tabs, three card variants, inputs, the four-tier navigation stack, the six-column dark footer, and the signature corner-square ornament.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent produces React components that respect NVIDIA's restraint — green reserved for CTAs and active states, 2px rounding everywhere, hierarchy built from weight contrast rather than color tinting. Or reference the tokens by name in Tailwind config or CSS variables. The system is worth studying precisely because it refuses to grow: ten years of expansion into AI, healthcare, robotics, and life sciences, and the chrome still resolves to one green, one black, one white, and a 2px corner.