# build.nvidia.com Design System

> High-contrast technical interface defined by deep obsidian surfaces and high-voltage NVIDIA green accents.

**Source:** https://build.nvidia.com | **Captured:** 2026-06-17 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
The build.nvidia.com interface is a "mixed" system that leans heavily into a dark, developer-centric aesthetic. It utilizes a foundational palette of near-black (`#0c0c0c`) and pure black (`#000000`) surfaces to create a "sunken" canvas, allowing the signature NVIDIA Green (`#76b900`) to serve as the primary high-voltage signal for actions, selections, and success states. Typography is strictly **NVIDIA Sans**, favoring medium and bold weights to maintain legibility against dark backgrounds. Geometry is predominantly sharp or subtly rounded (`4px`), reinforcing a precise, engineered feel.

## Signature DNA
1. **The Green Signal** (NVIDIA Green `#76b900` is used exclusively for primary intent—CTAs, selected states, and success messaging—creating a high-contrast functional map against dark surfaces.)
2. **Obsidian Layering** (The use of `#0c0c0c` for base surfaces and `#000000` for navigation and sunken areas creates depth without relying on traditional drop shadows.)
3. **Technical Precision** (A strict `4px` border-radius on interactive elements and cards provides a modern, "hardware-inspired" aesthetic.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--colors-n1000` | `#000000` | Navigation bg, sunken surfaces, primary text inverse | 46 | 1 | `computed_style` |
| `--background-color-surface-base` | `#0c0c0c` | Primary page canvas, card backgrounds | 11 | 1 | `css_variable` |
| `--text-color-primary` | `#eeeeee` | Primary body text, high-contrast labels | 76 | 1 | `css_variable` |
| `--color-gray-300` | `#a7a7a7` | Placeholder text, disabled borders, footer text | 27 | 1 | `css_variable` |
| `--color-gray-100` | `#e0e0e0` | Secondary text, hover backgrounds | 12 | 1 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `--color-brand` | `#76b900` | Primary CTA bg, selected borders, success icons | 14 | 1 | `css_variable` |
| `--text-color-accent-teal` | `#1dbba4` | Decorative tags, secondary technical accents | 12 | 1 | `css_variable` |

### Semantic
| Token | Hex | Role | Source |
|------|-----|------|--------|
| `--colors-feedbackFgSuccess` | `#76b900` | Success states and confirmation | `css_variable` |
| `--colors-inputBorderError` | `#dc3528` | Validation errors and danger states | `css_variable` |
| `--colors-feedbackBgCaution` | `#f9f4ca` | Warning backgrounds | `css_variable` |
| `--colors-feedbackBgInfo` | `#e9f4fb` | Informational callouts | `css_variable` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| NVIDIA Sans | 400, 500, 700 | All UI, Headings, Body | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `heading-lg` | 24px | 30px | normal | 700 | Section headers | `h2.tracking-less` |
| `heading-md` | 24px | 37.33px | normal | 500 | Feature titles | `h2.text-lg.font-medium` |
| `heading-sm` | 20px | 25px | normal | 700 | Component titles | `h2.nv-text--weight-bold` |
| `body-lg` | 18px | 27px | normal | 400 | Intro paragraphs | `p.font-normal.mb-0` |
| `body-md` | 16px | 24px | normal | 400 | Default body text | `div.fixed.inset-0` |
| `body-sm` | 14px | 21px | normal | 400 | Secondary links | `a.group.text-ms` |
| `button-label` | 14px | 14px | normal | 700 | CTA text | `a.inline-flex.items-center` |
| `caption` | 12px | 18px | normal | 500 | Tags and badges | `a.nv-tag.nv-tag--color-teal` |

### Principles
1. **High Contrast Text**: All primary copy uses `#eeeeee` on dark backgrounds to ensure legibility.
2. **Weight-Based Hierarchy**: Bold weights (`700`) are reserved for structural headings and primary button labels.
3. **No Letter Spacing**: Typography relies on standard tracking to maintain a clean, technical appearance.

## Spacing
**Base unit:** 4px (Custom scale observed)
| Token | Value | Occurrences |
|------|-------|-------------|
| `--spacing-xs` | 4px | 4 |
| `--spacing-sm` | 8px | 14 |
| `--spacing-md` | 16px | 24 |
| `--spacing-lg` | 24px | 3 |
| `--spacing-xl` | 32px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `--radius-none` | 0px | Page containers, footer sections | `radii[0]` |
| `--radius-sm` | 4px | Buttons, inputs, model cards | `radii[1]` |
| `--radius-md` | 8px | Dropdowns, tooltips | `radii[2]` |
| `--radius-lg` | 16px | Large feature cards | `radii[4]` |
| `--radius-xl` | 32px | Pill-style decorative tags | `radii[5]` |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| Flat | none | Default card state | `components[0].shadow` |
| Sunken | `#000000` | Navigation and search bars | `background-color-surface-sunken` |
| Raised | `#161616` | Hovered cards or overlays | `background-color-surface-raised` |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action
**Pages observed:** All
**Spec:** Background `#76b900` | Text `#222222` | Border `#76b900` | Radius `4px` | Padding `7px 11px` | Typography `14px/700`
**States observed:** Default | Hover: `#8fcb2b` | Active: `#a7db57` | Disabled: `#d8d8d8`

#### Secondary Button
**Role:** De-emphasized actions
**Pages observed:** All
**Spec:** Background `rgba(0, 0, 0, 0)` | Text `#eeeeee` | Border `#eeeeee` (1px) | Radius `4px` | Padding `5px 9px`
**States observed:** Default | Hover: `rgba(255, 255, 255, 0.1)` | Active: Captured | Disabled: Captured

### Tier 2: Patterns
#### Model Card
**Role:** Displaying AI model information
**Pages observed:** build.nvidia.com
**Spec:** Background `#0c0c0c` | Text `#eeeeee` | Border `rgba(255, 255, 255, 0.2)` | Radius `8px` | Padding `8px`
**States observed:** Default | Hover: Border `#76b900` | Active: Not captured

#### Technical Tag
**Role:** Categorization (e.g., "moe", "agent")
**Pages observed:** build.nvidia.com
**Spec:** Background `rgba(0, 0, 0, 0)` | Text `#1dbba4` | Border `#1dbba4` | Radius `32px` | Padding `0px 12px` | Typography `12px/500`

### Tier 3: Surface-specific
#### Global Navigation
**Role:** Site-wide header
**Pages observed:** All
**Spec:** Background `#000000` | Text `#eeeeee` | Height `64px` | Border-bottom `1px #333333`
**States observed:** Default | Hover: Text `#ffffff`

#### Global Footer
**Role:** Legal and site links
**Pages observed:** All
**Spec:** Background `rgba(0, 0, 0, 0)` | Text `#a7a7a7` | Border-top `1px rgba(255, 255, 255, 0.2)` | Padding `16px`

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1440px |
| Column Grid | 12-column |
| Section Gap | 32px |
| Card Gap | 16px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger menu; cards stack vertically. |
| Desktop | 1440px | Multi-column grids for model and skill cards. |

## Imagery & decoration
The system uses technical "node-and-line" background graphics to reinforce the AI/Graph network theme. It avoids photography in favor of high-quality iconography and technical diagrams.

## Do's
- Use `#76b900` for the primary path to completion.
- Maintain `#0c0c0c` as the primary surface color for content cards.
- Apply a `4px` border radius to all interactive controls.
- Use NVIDIA Sans Medium (`500`) for UI labels to ensure legibility.
- Ensure 1px borders on cards use `rgba(255, 255, 255, 0.2)` for subtle definition.

## Don'ts
- **Wrong:** Using `#1dbba4` (Teal) for primary CTAs. **Right:** Use `#76b900`. **Reason:** Teal is an accent for categorization, not a primary action color.
- **Wrong:** Using pure white (`#ffffff`) for body text. **Right:** Use `#eeeeee`. **Reason:** Reduces eye strain on deep black backgrounds.
- **Wrong:** Applying large border-radii (>8px) to functional buttons. **Right:** Stick to `4px`. **Reason:** Maintains the technical, engineered brand voice.
- Do not use drop shadows to create depth; use background color layering instead.
- Do not place dark text on dark backgrounds; always use the foundation text tokens.

## Similar brands
- Stripe (Technical precision)
- Vercel (Dark mode developer aesthetic)
- GitHub (Information density)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-brand: #76b900;
  --color-surface-base: #0c0c0c;
  --color-surface-sunken: #000000;
  --color-text-primary: #eeeeee;
  --color-text-secondary: #a7a7a7;
  --radius-standard: 4px;
  --font-main: "NVIDIA Sans", sans-serif;
}
```

### Tailwind v4 @theme
```css
@theme {
  --color-brand: #76b900;
  --color-obsidian-900: #0c0c0c;
  --color-obsidian-1000: #000000;
  --font-nvidia: "NVIDIA Sans";
  --radius-technical: 4px;
}
```

## Agent prompt examples
- "Generate a model selection card using a #0c0c0c background, a 1px border of rgba(255,255,255,0.2), and a 4px border radius. Use NVIDIA Sans for the title."
- "Create a primary CTA button with a #76b900 background and #222222 text, using a 4px border radius and bold NVIDIA Sans font."
- "Design a technical tag with a transparent background, #1dbba4 text and border, and a pill-shaped 32px border radius."

## Known gaps
- Detailed hover states for complex data visualizations were not captured.
- Motion and transition timings are not defined in the source tokens.
- Specific mobile-only component variants were not fully evidenced.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://build.nvidia.com | 1440x900 | 2026-06-17 |
| Pricing | https://build.nvidia.com/pricing | 1440x900 | 2026-06-17 |
| About | https://build.nvidia.com/about | 1440x900 | 2026-06-17 |