--- version: alpha name: NVIDIA website: "https://www.nvidia.com" description: | An engineering-grade marketing system organized around two surface modes — a deep black canvas for hero and footer chapters and a flat paper-white canvas for body content — connected by a single, almost violently saturated NVIDIA Green accent that carries every CTA, every active tab, and the small decorative corner squares that mark out cards. The system is unapologetically angular: 2px radius across every surface, tight bold sans-serif typography in NVIDIA's proprietary EMEA cut, and a hairline gray rule that separates dense multi-column technical content. There is no decorative gradient, no atmospheric mesh, no soft drop shadow — just black, white, gray, and green stacked into a structured editorial grid that scales from product cards to massive industry landing pages without bending its rules. seo: title: "NVIDIA Design System for React — NVIDIA Green #76b900, EMEA, 25 components" metaDescription: "NVIDIA's design system as a DESIGN.md file. Green #76b900, NVIDIA-EMEA, 26 colors, 25 components. For React, Next.js, and AI tools." highlights: - "Single-accent voltage — NVIDIA Green #76b900 carries every CTA, active tab, and 12px corner square; no second accent exists in chrome" - "Hyper-angular geometry — 2px radius on every interactive element, 0px on hero/footer/nav; the only circles are avatars and social icons" - "Two-mode surface architecture — pure #000000 black hero/footer chapters alternate with #ffffff body canvas in a predictable rhythm" - "Brand-locked NVIDIA-EMEA across 18 type tiers at only two weights (400 and 700) — hierarchy comes from weight and size, never from color" - "Flat-by-policy cards — 1px #cccccc hairline borders replace drop shadows everywhere except a 5px ambient on sticky chrome" tags: - "Hardware & Robotics" - "AI & LLM Platforms" lastUpdated: "2026-05-12" author: name: "Dov Azencot" url: "https://x.com/dovazencot" opening: | 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. related: - href: "https://github.com/google-labs-code/design.md" title: "The DESIGN.md specification" description: "Google Labs' open spec for machine-readable design system files — the format this page is built on." - href: "/design" title: "Browse all design systems" description: "The full directory of DESIGN.md files on shadcn.io, with live mockups for each." - href: "/blocks" title: "React blocks for shadcn/ui" description: "Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives." questions: - id: "primary-color" title: "What is NVIDIA's primary brand color?" answer: "NVIDIA Green at #76b900 — an almost violently saturated yellow-green that carries every primary CTA, every active tab, every link affordance on dark surfaces, the brand wordmark, and the signature 12px corner squares anchored to cards. The press state drops one notch deeper to #5a8d00. NVIDIA treats the green as precious — there is exactly one accent in the entire chrome, and the rest of the system runs monochrome black, white, and gray." - id: "typography" title: "What typography does NVIDIA use, and what should I substitute?" answer: "NVIDIA-EMEA is the proprietary brand sans-serif used at every text role — display, body, navigation, captions — with weights locked to 400 and 700, falling back to Arial then Helvetica. The system spans 18 tokens from 10px utility labels up to a 48px display-xl headline, and hierarchy comes almost entirely from weight contrast (400 vs 700) and size rather than from color tinting. Inter is the closest open-source substitute — its x-height and stroke contrast match NVIDIA-EMEA within ~2% at body sizes. Arial is the official documented fallback." - id: "dark-mode" title: "Does NVIDIA have a dark mode?" answer: "Not in the traditional sense — NVIDIA's system is built on a two-mode surface architecture where deep black #000000 hero and footer chapters alternate with paper-white #ffffff body sections in a predictable rhythm down every page. Both modes coexist on the same page rather than toggling per-user. The black canvas frames the page (hero, footer, dark CTA strips, primary nav) while body content always sits on white. There is no separate dark-mode token set." - id: "shape-language" title: "Why is the radius scale so tight?" answer: "NVIDIA's geometry is aggressively angular. Every interactive element — buttons, cards, inputs, pill tabs, badges — sits at 2px radius, enough to soften optical aliasing on a sharp edge but small enough that the system reads as engineering-grade rather than consumer-friendly. Hero chapters, footer, nav, and dark CTA strips are 0px (perfectly square). Only avatars and social icons go full circle. No element in the system exceeds 2px outside of circles — there are no pill buttons, no rounded cards." - id: "use-in-project" title: "Can I use this DESIGN.md to build NVIDIA-style React UI?" answer: "Yes. Feed nvidia.md to Claude, Cursor, or any AI tool that reads structured design tokens, and the agent will reproduce NVIDIA's restraint — single-accent green, 2px radius everywhere, weight-based hierarchy, hairline borders instead of shadows — rather than a generic shadcn theme. Every color, type style, radius, spacing value, and component is a quoted token you can paste into Tailwind config, CSS variables, or your own component library." - id: "known-gaps" title: "What's missing from this DESIGN.md spec?" answer: "A handful of things, documented in the Known Gaps section: mobile screenshots were not captured, so responsive behavior synthesizes NVIDIA's known mobile pattern from desktop evidence; hover states are intentionally omitted per system policy; dialog and modal styling beyond the locale-selector overlay is not present; full sign-up and contact form styling was not visible in captured surfaces; and login or authenticated chrome is not represented. The spec captures the public marketing chrome rather than the developer-portal app surfaces." colors: primary: "#76b900" on-primary: "#000000" primary-dark: "#5a8d00" ink: "#000000" canvas: "#ffffff" surface-dark: "#000000" surface-soft: "#f7f7f7" surface-elevated: "#1a1a1a" hairline: "#cccccc" hairline-strong: "#5e5e5e" body: "#1a1a1a" mute: "#757575" stone: "#898989" ash: "#a7a7a7" on-dark: "#ffffff" on-dark-mute: "rgba(255,255,255,0.7)" link-blue: "#0046a4" blue-700: "#0046a4" error: "#e52020" error-deep: "#650b0b" warning: "#df6500" warning-bright: "#ef9100" success-deep: "#3f8500" accent-yellow-pale: "#feeeb2" accent-purple: "#952fc6" accent-purple-deep: "#4d1368" accent-purple-pale: "#f9d4ff" accent-green-pale: "#bff230" typography: display-xl: fontFamily: NVIDIA-EMEA fontSize: 48px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 display-lg: fontFamily: NVIDIA-EMEA fontSize: 36px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 heading-xl: fontFamily: NVIDIA-EMEA fontSize: 24px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 heading-lg: fontFamily: NVIDIA-EMEA fontSize: 22px fontWeight: 400 lineHeight: 1.75 letterSpacing: 0 heading-md: fontFamily: NVIDIA-EMEA fontSize: 20px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 heading-sm: fontFamily: NVIDIA-EMEA fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0 card-title: fontFamily: NVIDIA-EMEA fontSize: 17px fontWeight: 700 lineHeight: 1.47 letterSpacing: 0 body-md: fontFamily: NVIDIA-EMEA fontSize: 16px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 body-strong: fontFamily: NVIDIA-EMEA fontSize: 16px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 body-sm: fontFamily: NVIDIA-EMEA fontSize: 15px fontWeight: 400 lineHeight: 1.67 letterSpacing: 0 button-lg: fontFamily: NVIDIA-EMEA fontSize: 18px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 button-md: fontFamily: NVIDIA-EMEA fontSize: 16px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 button-sm: fontFamily: NVIDIA-EMEA fontSize: 14.4px fontWeight: 700 lineHeight: 1 letterSpacing: 0.144px link-md: fontFamily: NVIDIA-EMEA fontSize: 15px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0 caption-md: fontFamily: NVIDIA-EMEA fontSize: 14px fontWeight: 700 lineHeight: 1.43 letterSpacing: 0 textTransform: uppercase caption-sm: fontFamily: NVIDIA-EMEA fontSize: 12px fontWeight: 400 lineHeight: 1.25 letterSpacing: 0 caption-xs: fontFamily: NVIDIA-EMEA fontSize: 11px fontWeight: 700 lineHeight: 1 letterSpacing: 0 utility-xs: fontFamily: NVIDIA-EMEA fontSize: 10px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0 textTransform: uppercase rounded: none: 0px xs: 1px sm: 2px full: 9999px spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px section: 64px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 11px 24px height: 44px button-primary-active: backgroundColor: "{colors.primary-dark}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.sm}" button-outline: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.sm}" padding: 11px 13px button-outline-on-dark: backgroundColor: "transparent" textColor: "{colors.on-dark}" typography: "{typography.button-md}" rounded: "{rounded.sm}" button-ghost-link: textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.none}" button-disabled: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ash}" rounded: "{rounded.sm}" pill-tab: backgroundColor: "transparent" textColor: "{colors.ink}" typography: "{typography.button-sm}" rounded: "{rounded.sm}" padding: 10px 18px pill-tab-active: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" typography: "{typography.button-sm}" rounded: "{rounded.sm}" text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 12px 16px height: 44px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.sm}" search-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 10px 16px height: 40px product-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.card-title}" rounded: "{rounded.sm}" padding: 24px feature-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 32px resource-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.card-title}" rounded: "{rounded.sm}" padding: 24px hero-card-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-xl}" rounded: "{rounded.none}" padding: 80px 48px cta-strip-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.heading-xl}" rounded: "{rounded.none}" padding: 64px 48px callout-stat: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" rounded: "{rounded.sm}" padding: 32px corner-square: backgroundColor: "{colors.primary}" rounded: "{rounded.none}" size: 12px utility-bar: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.caption-sm}" rounded: "{rounded.none}" height: 32px primary-nav: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.body-strong}" rounded: "{rounded.none}" height: 64px breadcrumb-bar: backgroundColor: "{colors.surface-soft}" textColor: "{colors.body}" typography: "{typography.caption-md}" rounded: "{rounded.none}" height: 48px sub-nav-strip: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.button-md}" rounded: "{rounded.none}" height: 56px footer-section: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark-mute}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 64px 48px link-inline: textColor: "{colors.link-blue}" typography: "{typography.link-md}" badge-tag: backgroundColor: "{colors.surface-soft}" textColor: "{colors.body}" typography: "{typography.caption-md}" rounded: "{rounded.sm}" padding: 4px 10px --- ## 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.