# NVIDIA — Design System
> World leader in AI computing, GPU technology, and accelerated data center infrastructure.
- **Canonical:** https://uiuxskills.com/library/nvidia
- **Source:** https://www.nvidia.com
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:15:39.083Z

---

---
version: alpha
name: NVIDIA
description: World leader in AI computing, GPU technology, and accelerated data center infrastructure.
tone: >-
  Authoritative, innovative, and technically precise. The tone is direct, focusing on performance
  metrics, industry breakthroughs, and ecosystem leadership.
color-scheme: light
colors:
  primary: "#76B900"
  surface: "#FFFFFF"
  surface-dim: "#F4F4F4"
  on-surface: "#000000"
  on-primary: "#000000"
  neutral: "#707070"
  outline: "#D1D1D1"
  error: "#D32F2F"
  success: "#388E3C"
  focus-ring: "#76B900"
typography:
  display-lg:
    fontFamily: NVIDIA Sans, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: NVIDIA Sans, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: NVIDIA Sans, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: NVIDIA Sans, sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: NVIDIA Sans, sans-serif
    fontSize: 1rem
  label-md:
    fontFamily: NVIDIA Sans, sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: NVIDIA Sans, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 2px
  md: 4px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#66A300"
    textColor: "{colors.on-primary}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
  input-field:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#66A300"
  badge:
    backgroundColor: "{colors.surface-dim}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "#FFFFFF"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-neutral:
    backgroundColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

NVIDIA's visual identity is defined by high-performance, industrial-grade precision. It balances a stark, professional aesthetic with high-contrast green accents, reflecting its position as the backbone of modern AI and accelerated computing.

## Colors

The color palette is strictly functional, utilizing a high-contrast system to prioritize clarity and technical authority. The brand relies on a clean white base with the signature NVIDIA green as a strategic highlight for interactive elements.

*   Primary (#76B900): The iconic NVIDIA green used for primary CTAs and brand highlights.
*   Surface (#FFFFFF): Standard white background for clean, high-readability content.
*   Surface-dim (inferred) (#F4F4F4): Light grey for section backgrounds and card containers.
*   On-surface (#000000): Primary text color for high contrast against white surfaces.
*   On-primary (inferred) (#000000): Black text on green buttons for maximum readability.
*   Neutral (inferred) (#707070): Secondary text and metadata color.
*   Outline (inferred) (#D1D1D1): Border color for cards and input fields.
*   Error (inferred) (#D32F2F): Standard semantic error color for alerts.
*   Success (inferred) (#388E3C): Semantic success color for status indicators.
*   Focus-ring (inferred) (#76B900): Focus indicator using the primary brand color.

## Typography

All typography utilizes the NVIDIA Sans typeface, maintaining a consistent, technical voice across all levels of the information hierarchy.

*   Display-lg (inferred): Used for hero headlines.
*   Display-md (inferred): Used for section titles.
*   Headline-lg (inferred): Used for article titles.
*   Headline-md (inferred): Used for sub-headers.
*   Body-md (inferred): Standard body copy.
*   Label-md (inferred): Used for metadata and tags.
*   Label-sm (inferred): Used for small UI labels.

## Layout

The site utilizes a high-density grid system optimized for large-scale data presentation, with content constrained to a central container to maintain readability. The page structure follows a logical flow: nav, hero, carousel, features, news, and footer. The hero pattern features a full-width image with a bold headline and primary CTA overlay, and the design is mobile-first, with navigation collapsing into a drawer menu on smaller viewports.

## Elevation & Depth

Elevation is used sparingly to define card boundaries and interactive elements. The brand relies on subtle single-layer shadows to separate content from the background, maintaining a clean, flat aesthetic.

*   elevation.sm: Card lift for standard content blocks.
*   elevation.md: Elevated card states or interactive containers.
*   elevation.lg: Modal or drawer overlays.

## Shapes

The design language uses sharp, rectangular corners, reflecting an industrial and engineering-focused brand personality. Radii are kept minimal, ranging from 2px to 4px for most UI components to ensure a crisp, high-precision look.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions and transparent backgrounds with `{colors.primary}` borders for secondary actions. They are designed for high-density interfaces, using `{typography.label-md}` for clear, concise labeling.

### Card
Cards utilize a flat, clean structure with `{rounded.sm}` corners and `{colors.outline}` borders. They are the primary container for news and feature content, often paired with `{elevation.sm}` to provide subtle separation from the background.

### Badge
Badges are used for status indication, with `{colors.surface-dim}` as the default background. Semantic variants like `{badge-success}` and `{badge-error}` provide immediate visual feedback for system states.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Avoid using `{colors.primary}` for background fills. |
| Apply `{typography.headline-lg}` for main section headers. | Do not mix multiple font families; stick to the primary sans-serif. |
| Use `{rounded.sm}` for all card components. | Never use rounded corners larger than `{rounded.xl}` on standard UI cards. |
| Maintain `{spacing.md}` between grid items. | Avoid low-contrast text on `{colors.surface-dim}` backgrounds. |
| Use `{colors.on-surface}` for body text. | Do not use heavy drop shadows on interactive buttons. |
| Apply `{colors.outline}` for content dividers. | Never use `{colors.error}` for non-destructive actions. |
| Use `{typography.label-md}` for button labels. | Avoid using decorative, non-functional shapes. |
| Apply `{elevation.sm}` for subtle card separation. | Do not use excessive elevation on flat UI elements. |

## Content Style

CTA labels are imperative and action-oriented, utilizing verbs like "Watch" or "Try" to drive engagement. Headings are direct and benefit-driven, focusing on performance metrics and technical innovation.

Copy density is high, reflecting a technical, informative, and concise tone. Paragraphs are kept tight to allow for rapid scanning of complex data and industry breakthroughs.

## Imagery & Icons

Imagery combines high-fidelity product photography with clean, technical diagrams. Icons are thin-stroke, minimalist, and monochromatic, ensuring they do not distract from the data-heavy content.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for NVIDIA, a minimal enterprise brand focused on AI computing and GPU technology. Match its authoritative, technically precise tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.md}` — never hardcode hex values, font sizes, or pixel counts.
2. Use only components and variants defined under `components:`. Do not invent variants such as a "button-ghost" or "card-dark" that the spec does not list.
3. Apply `{rounded.sm}` (2px) to cards and inputs; `{rounded.md}` (4px) to buttons. Do not exceed `{rounded.xl}` on any standard UI card.
4. Follow the Layout narrative: mobile-first, single container, nav → hero → content → footer. Collapse navigation to a drawer below 768px.
5. The Do's and Don'ts table is authoritative. If a user request conflicts with it — for example, using `{colors.primary}` as a background fill — surface the conflict before proceeding.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Include hover, focus, and disabled states when the spec defines them (e.g. `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{focus-ring}` using `{colors.focus-ring}` on all keyboard-interactive elements.
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding, margin, and gap values.
- Write CTAs with imperative verbs ("Watch", "Try") per the Content Style section.

**Must NOT:**
- Introduce colors, font families, radii, or elevation values absent from the spec.
- Use generic utility defaults (e.g. `text-gray-500`, `rounded-md`) when a brand token exists.
- Apply heavy drop shadows to buttons; use `{elevation.sm}` only for card separation.
- Add emoji, decorative shapes, or marketing filler copy.
- Rewrite existing headings, button labels, nav items, or page copy.
- Alter navigation structure or page section order as a side effect of applying tokens.

## When in doubt
- If the spec does not define a value, ask the product team before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; for section containers, use `{colors.surface-dim}`.
- Tokens marked "(inferred)" are visual approximations. If an authoritative theme file or component source exists, those values supersede the spec.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.