Nvidia Design System Deep-Dive

1. Brand Overview

Nvidia’s design language is exactly what you’d expect from a global leader in high-performance GPUs and AI computing — sharp, high-contrast, tech-heavy, and unapologetically bold. This is a brand that sells speed, precision, and computational power, and their website reflects that without trying to soften the edges.

The vibe is dark, electric, and functional. Black dominates, but it’s not a flat, lifeless black — it’s layered with deep greys, high-contrast whites, and their unmistakable toxic-lime green (#76b900). This green is their signature — it’s not a friendly pastel, it’s an aggressive “go” signal. It screams “performance mode” the moment you land on the page.

Typography is locked down: the custom NVIDIA font is used everywhere, with fallbacks to Arial and Helvetica. No typographic experiments here — they keep it tight, functional, and consistent. The weight range (400–700) and sizes are tuned for clarity over personality. This site isn’t here to charm you. It’s here to show you exactly what they can do.

Layout-wise, they operate on an 8px scale, but aren’t afraid to push bigger jumps — 30px spacing is everywhere. That’s a big gap in a mostly dark UI, giving breathing room to heavy visuals. Breakpoints are numerous — they’ve clearly tuned the experience for a wide range of devices, from tiny phones (320px) to massive desktop rigs (3000px).

If you’re designing for Nvidia’s audience — gamers, developers, AI researchers — you’re designing for people who care about clarity, speed, and no-nonsense interfaces. There’s no fluff here. Every UI element is tuned for performance and legibility. And that’s exactly how it should be.

2. Color System

2.1 Primary Colors

The primary brand color is #76b900 (RGB 118, 185, 0). This is Nvidia’s green — instantly recognizable, high-saturation, and leaning into that “tech neon” territory. It’s used for CTAs, key interactive states, and accent lines. Psychologically, it’s closer to “energy drink” green than “eco-friendly” green — more urgency, more adrenaline. Competitors like Intel lean blue (#0071c5), AMD goes red (#e52020). Nvidia’s green stands out in the GPU wars, instantly signaling “not them.”

It’s backed by black (#000000) as the dominant background, and white (#ffffff) for text and inverse states. Greys (#eeeeee, #666666, #1a1a1a, #cccccc) handle supporting roles — borders, subtext, disabled states.

2.2 Complete Palette

2.3 Color Relationships

This palette is high contrast. Primary black + Nvidia green meets WCAG AA easily for text. White on green is readable; green on black pops hard. The lighter accent colors (yellow 050, teal 050) are used sparingly — probably for diagrams or infographics. Dark mode is default — you’re designing for a black canvas and layering in neon or white.

2.4 Usage Guide

Works well:

• Green (#76b900) on black — primary buttons
• White text on green — strong CTA
• Grey medium (#666666) for inactive states
• Red (#e52020) for destructive actions

Avoid:

• Green on white — loses impact
• Yellow on white — accessibility fail
• Too many accents in one view — dilutes focus

3. Typography

3.1 Font Families

• Primary: NVIDIA (custom)
• Fallbacks: Arial, Helvetica
• Icons: Font Awesome 6 Pro / Sharp, SVG icons

No Google or Adobe fonts; everything is either proprietary or standard system sans-serif for fallbacks.

3.2 Type Scale

3.3 Hierarchy

Titles hit hard at 48px/700 weight — perfect for hero sections. Subheadings (36px, 24px) keep hierarchy clean. Body and UI text sits in the 14–18px range, leaning heavier (700) for labels and interactive elements. There’s little typographic play — hierarchy is purely size + weight. This makes sense for a brand banking on clarity.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid, but with exceptions.

30px is everywhere — it’s their go-to section padding.

4.2 Layout

Breakpoints: 320px up to 3000px. They’ve got fine-grained control — multiple steps in the 320–1025px range, and even a 3000px breakpoint for ultra-wide.

5. Visual Elements

Border Radius:

• Mostly sharp — 0px or 2px
• 50% for circular avatars
• Rare large radii (20px, 50px) for special inputs
• This is a square brand — rounded corners are exceptions.

Shadows:

• Main shadow: rgba(0, 0, 0, 0.3) 0px 0px 5px
• Occasional deeper shadows for focus states
• No heavy neumorphism — shadows are functional

Borders:

• Thin (1–2px), high contrast
• Green borders for interactive elements
• Black borders in dark UI for subtle separation

6. Components

6.1 Buttons

Primary CTA (btn-content btncta):

• Default: bg #76b900, text #000000, padding 13px 15px, no radius, no border
• Hover: bg #ffffff, text #000000, 2px solid black, box-shadow rgba(0,0,0,0.35) 0px 0px 15px, scale(1.05)
• Active: bg rgb(44, 100, 21), text #ffffff, border 1px solid rgba(162, 192, 169, 0.5), inset shadow
• Focus: outline 1px solid #000000, bg rgb(30, 174, 219), text white

Secondary Outline Button:

• Default: transparent bg, black text, 2px solid #76b900
• Hover: bg rgb(30, 174, 219), text white, no border
• Active: bg #007fff, text white, border 1px solid rgb(0, 62, 255)
• Focus: outline 2px solid #000000, bg rgb(30, 174, 219), text white

Icon Search Button (librarian-search-icon):

• Default: white bg, grey text, no padding, no border

6.2 Links

• Default: black text, underline 2px green
• Hover: remove underline
• Variants: grey text (hover to black), dark grey text, green text (hover to black)

6.3 Forms

Inputs not detailed in data — likely inherit border styles from buttons: thin borders, high contrast, minimal radius.

6.4 Cards

No explicit card data, but shadows suggest subtle depth: rgba(0,0,0,0.3) 0px 0px 5px.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-grey-light: #eeeeee;
  --color-grey-medium: #666666;
  --color-grey-dark: #1a1a1a;
  --color-nvidia-green: #76b900;
  --color-grey-neutral: #cccccc;
  --color-white: #ffffff;
  --color-grey-extra-dark: #111111;
  --color-blue-700: #0046a4;
  --color-purple-800: #4d1368;
  --color-green-100: #bff230;
  --color-gray-300: #a7a7a7;
  --color-yellow-400: #df6500;
  --color-green-500: #3f8500;
  --color-purple-100: #f9d4ff;
  --color-yellow-050: #feeeb2;
  --color-yellow-300: #ef9100;
  --color-gray-100: #e0e0e0;
  --color-red-800: #650b0b;
  --color-red-500: #e52020;
  --color-purple-600: #952fc6;
  --color-fuchsia-800: #5d1337;
  --color-fuchsia-500: #d2308e;
  --color-blue-800: #002781;
  --color-yellow-100: #fcde7b;
  --color-gray-800: #313131;
  --color-teal-050: #adfcf8;
  --color-blue-050: #cbf5ff;
  --color-teal-700: #04554b;
  --color-red-300: #ff8181;
  --color-gray-050: #eeeeee;
  --color-green-050: #cfff40;
  --color-red-700: #961515;
  --color-blue-500: #0074df;
  --color-gray-900: #222222;
  --color-gray-700: #4b4b4b;
  --color-purple-400: #c359ef;
  --color-teal-300: #1dbba4;
  --color-red-100: #ffd7d7;
  --color-yellow-200: #f9c500;
  --color-blue-200: #7cd7fe;
  --color-gray-200: #cccccc;
  --color-green-700: #265600;
  --color-fuchsia-100: #ffd3f2;
  --color-fuchsia-300: #fc79ca;
  --color-purple-700: #741d9d;
  --color-teal-500: #0d8473;
  --color-teal-100: #9aefe5;
  --color-fuchsia-700: #8c1c55;

  /* Typography */
  --font-primary: "NVIDIA", Arial, Helvetica;
  --font-icon-pro: "Font Awesome 6 Pro";
  --font-icon-sharp: "Font Awesome 6 Sharp";

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-5: 5px;
  --space-7: 7px;
  --space-8: 8px;
  --space-9: 9px;
  --space-10: 10px;
  --space-11: 11px;
  --space-11-2: 11.2px;
  --space-12: 12px;
  --space-13: 13px;
  --space-15: 15px;
  --space-16: 16px;
  --space-20: 20px;
  --space-30: 30px;
  --space-50: 50px;
  --space-60: 60px;
  --space-90: 90px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-circle: 50%;
}

8. AI Coding Assistant Prompt

# Nvidia Design System Specification

You are a Nvidia design expert. Build UIs matching their visual language exactly.

## Brand Context
Nvidia’s design is high-contrast, performance-driven, and unapologetically bold. It uses a dark base with neon green accents, sharp typography, and minimal rounded corners. Every element is tuned for clarity and speed.

## Color Palette
- Primary Green: #76b900 — CTAs, primary buttons, key actions
- Black: #000000 — Backgrounds, text
- White: #ffffff — Text on dark, inverted buttons
- Grey Light: #eeeeee — Surfaces, dividers
- Grey Medium: #666666 — Secondary text
- Grey Dark: #1a1a1a — Tertiary text
- Grey Neutral: #cccccc — Borders, inactive
- Grey Extra Dark: #111111 — Accordions
- Red 500: #e52020 — Errors
- Red 700: #961515 — Error states
- Blue 500: #0074df — Links, info
- [Include all colors from token list with usage]

## Typography
- Primary Font: "NVIDIA", Arial, Helvetica
- Icon Fonts: "Font Awesome 6 Pro", "Font Awesome 6 Sharp"

| Level | Size | Weight | Line Height | Use |
|-------|------|--------|-------------|-----|
| H1 | 48px | 700 | 1.25 | Hero titles |
| H2 | 36px | 700 | 1.25 | Section titles |
| Body | 14–18px | 400–700 | 1.25–2.14 | Paragraphs, labels |

## Spacing & Grid
Base: 8px grid
Scale: 1, 2, 4, 5, 8, 10, 11, 12, 13, 15, 16, 20, 30, 50, 60, 90px
Use 30px for section padding, 15px for component padding.

## Border Radius
- none: 0px — most components
- sm: 2px — buttons, inputs
- full: 50% — avatars

## Shadows & Depth
- rgba(0,0,0,0.3) 0px 0px 5px — card and UI depth
- Avoid heavy shadows

## Components

### Primary Button
Default: bg #76b900, text #000000, padding 13px 15px, no border
Hover: bg #ffffff, text #000000, border 2px solid #000000, shadow rgba(0,0,0,0.35) 0px 0px 15px, scale 1.05
Active: bg rgb(44,100,21), text #ffffff, border 1px solid rgba(162,192,169,0.5), inset shadow
Focus: outline 1px solid #000000, bg rgb(30,174,219), text #ffffff

### Secondary Outline Button
Default: transparent bg, text #000000, border 2px solid #76b900
Hover: bg rgb(30,174,219), text #ffffff, no border
Active: bg #007fff, text #ffffff, border 1px solid rgb(0,62,255)

### Navigation Links
Default: black text, underline 2px green
Hover: no underline

## Layout & Responsive Rules
Max width: fluid up to 3000px
Breakpoints: 320px, 375px, 425px, 768px, 1024px, 1350px, 3000px

## Interaction Rules
Transitions: 150ms ease
Focus: visible outline using palette colors

## DO
- Use only palette colors
- Maintain 8px grid
- Keep corners sharp unless full-circle
- Use Nvidia font for all text
- Keep CTAs in primary green

## DON'T
- Add extra shadows
- Use rounded corners inconsistently
- Invent new colors
- Reduce contrast between text and background

## Code Examples

```css
.btn-primary {
  background: #76b900;
  color: #000;
  padding: 13px 15px;
  border: none;
  font-weight: 700;
  font-size: 18px;
  transition: all 150ms ease;
}
.btn-primary:hover {
  background: #fff;
  border: 2px solid #000;
  box-shadow: rgba(0,0,0,0.35) 0px 0px 15px;
  transform: scale(1.05);
}
.btn-primary:focus {
  outline: 1px solid #000;
  background: rgb(30,174,219);
  color: #fff;
}
```

```css
.btn-outline {
  background: transparent;
  color: #000;
  border: 2px solid #76b900;
  padding: 11px 13px;
  font-weight: 700;
}
.btn-outline:hover {
  background: rgb(30,174,219);
  color: #fff;
  border: none;
}
```

```css
.card {
  background: #111;
  border-radius: 2px;
  padding: 30px;
  box-shadow: rgba(0,0,0,0.3) 0px 0px 5px;
}
```

9. Summary

TL;DR: Nvidia’s design is a dark, high-contrast system with neon green accents, sharp typography, and minimal rounded corners. It’s engineered for clarity and performance on any screen size.

Brand Keywords:

• tech-aggressive
• high-contrast
• performance-driven
• gamer-serious
• precision-focused