getdesign.mdgetdesign/nvidia
NVIDIA
High-contrast, technology-forward design with signature electric green accent, industrial typography, and sharp corners signaling precision engineering.
install
npx designkit add getdesign/nvidiapreviewrenderPreviewHtml
source
---
name: NVIDIA
description:
High-contrast, technology-forward design with signature electric green accent,
industrial typography, and sharp corners signaling precision engineering.
originalFonts:
primary: "NVIDIA-EMEA"
fallbacks:
- "Arial"
- "Helvetica"
- "sans-serif"
colors:
background: "#000000"
surface: "#1a1a1a"
ink: "#ffffff"
ink-muted: "#a7a7a7"
accent: "#76b900"
accent-alt: "#bff230"
border: "#5e5e5e"
link: "#ffffff"
nvidia-green: "#76b900"
true-black: "#000000"
pure-white: "#ffffff"
nvidia-green-light: "#bff230"
orange-400: "#df6500"
yellow-300: "#ef9100"
yellow-050: "#feeeb2"
red-500: "#e52020"
red-800: "#650b0b"
green-500: "#3f8500"
blue-700: "#0046a4"
purple-800: "#4d1368"
purple-100: "#f9d4ff"
fuchsia-700: "#8c1c55"
gray-300: "#a7a7a7"
gray-400: "#898989"
gray-500: "#757575"
gray-border: "#5e5e5e"
near-black: "#1a1a1a"
link-hover: "#3860be"
button-hover: "#1eaedb"
button-active: "#007fff"
typography:
h1:
family: "Inter"
size: "2.25rem"
weight: 700
lineHeight: 1.25
h2:
family: "Inter"
size: "1.5rem"
weight: 700
lineHeight: 1.25
body:
family: "Inter"
size: "1rem"
weight: 400
lineHeight: 1.5
code:
family: "JetBrains Mono"
spacing:
xs: "0.5rem"
sm: "0.75rem"
md: "1rem"
lg: "1.5rem"
xl: "2rem"
rounded:
sm: "1px"
md: "2px"
lg: "2px"
xl: "50%"
shadows:
sm: "rgba(0,0,0,0.3) 0px 0px 5px 0px"
md: "rgba(0,0,0,0.3) 0px 0px 5px 0px"
components:
button-primary:
background: "transparent"
color: "{colors.ink}"
border: "2px solid {colors.accent}"
radius: "{rounded.md}"
padding: "11px 13px"
button-secondary:
background: "transparent"
color: "{colors.ink}"
border: "1px solid {colors.accent}"
radius: "{rounded.md}"
padding: "11px 13px"
card:
background: "{colors.surface}"
border: "1px solid {colors.border}"
radius: "{rounded.md}"
padding: "1.5rem"
input:
background: "{colors.surface}"
border: "1px solid {colors.border}"
radius: "{rounded.md}"
padding: "0.5rem 0.75rem"
---
<!-- source: VoltAgent/awesome-design-md @ 80bbbc2 (MIT) — see ATTRIBUTION.md -->
# Design System Inspiration of NVIDIA
## 1. Visual Theme & Atmosphere
NVIDIA's website is a high-contrast, technology-forward experience that
communicates raw computational power through design restraint. The page is built
on a stark black (`#000000`) and white (`#ffffff`) foundation, punctuated by
NVIDIA's signature green (`#76b900`) -- a color so specific it functions as a
brand fingerprint. This is not the lush green of nature; it's the electric,
lime-shifted green of GPU-rendered light, a color that sits between chartreuse
and kelly green and immediately signals "NVIDIA" to anyone in technology.
The custom NVIDIA-EMEA font family (with Arial and Helvetica fallbacks) creates
a clean, industrial typographic voice. Headings at 36px bold with tight 1.25
line-height create dense, authoritative blocks of text. The font lacks the
geometric playfulness of Silicon Valley sans-serifs -- it's European, pragmatic,
and engineering-focused. Body text runs at 15-16px, comfortable for reading but
not generous, maintaining the sense that screen real estate is optimized like
GPU memory.
What distinguishes NVIDIA's design from other dark-background tech sites is the
disciplined use of the green accent. The `#76b900` appears in borders
(`2px solid #76b900`), link underlines (`underline 2px rgb(118, 185, 0)`), and
CTAs -- but never as backgrounds or large surface areas on the main content. The
green is a signal, not a surface. Combined with a deep shadow system
(`rgba(0, 0, 0, 0.3) 0px 0px 5px`) and minimal border radius (1-2px), the
overall effect is of precision engineering hardware rendered in pixels.
**Key Characteristics:**
- NVIDIA Green (`#76b900`) as pure accent -- borders, underlines, and
interactive highlights only
- Black (`#000000`) dominant background with white (`#ffffff`) text on dark
sections
- NVIDIA-EMEA custom font with Arial/Helvetica fallback -- industrial, European,
clean
- Tight line-heights (1.25 for headings) creating dense, authoritative text
blocks
- Minimal border radius (1-2px) -- sharp, engineered corners throughout
- Green-bordered buttons (`2px solid #76b900`) as primary interactive pattern
- Font Awesome 6 Pro/Sharp icon system at weight 900 for sharp iconography
- Multi-framework architecture (PrimeReact, Fluent UI, Element Plus) enabling
rich interactive components
## 2. Color Palette & Roles
### Primary Brand
- **NVIDIA Green** (`#76b900`): The signature -- borders, link underlines, CTA
outlines, active indicators. Never used as large surface fills.
- **True Black** (`#000000`): Primary page background, text on light surfaces,
dominant tone.
- **Pure White** (`#ffffff`): Text on dark backgrounds, light section
backgrounds, card surfaces.
### Extended Brand Palette
- **NVIDIA Green Light** (`#bff230`): Bright lime accent for highlights and
hover states.
- **Orange 400** (`#df6500`): Warm accent for alerts, featured badges, or
energy-related contexts.
- **Yellow 300** (`#ef9100`): Secondary warm accent, product category
highlights.
- **Yellow 050** (`#feeeb2`): Light warm surface for callout backgrounds.
### Status & Semantic
- **Red 500** (`#e52020`): Error states, destructive actions, critical alerts.
- **Red 800** (`#650b0b`): Deep red for severe warning backgrounds.
- **Green 500** (`#3f8500`): Success states, positive indicators (darker than
brand green).
- **Blue 700** (`#0046a4`): Informational accents, link hover alternative.
### Decorative
- **Purple 800** (`#4d1368`): Deep purple for gradient ends, premium/AI
contexts.
- **Purple 100** (`#f9d4ff`): Light purple surface tint.
- **Fuchsia 700** (`#8c1c55`): Rich accent for special promotions or featured
content.
### Neutral Scale
- **Gray 300** (`#a7a7a7`): Muted text, disabled labels.
- **Gray 400** (`#898989`): Secondary text, metadata.
- **Gray 500** (`#757575`): Tertiary text, placeholders, footers.
- **Gray Border** (`#5e5e5e`): Subtle borders, divider lines.
- **Near Black** (`#1a1a1a`): Dark surfaces, card backgrounds on black pages.
### Interactive States
- **Link Default (dark bg)** (`#ffffff`): White links on dark backgrounds.
- **Link Default (light bg)** (`#000000`): Black links with green underline on
light backgrounds.
- **Link Hover** (`#3860be`): Blue shift on hover across all link variants.
- **Button Hover** (`#1eaedb`): Teal highlight for button hover states.
- **Button Active** (`#007fff`): Bright blue for active/pressed button states.
- **Focus Ring** (`#000000 solid 2px`): Black outline for keyboard focus.
### Shadows & Depth
- **Card Shadow** (`rgba(0, 0, 0, 0.3) 0px 0px 5px 0px`): Subtle ambient shadow
for elevated cards.
## 3. Typography Rules
### Font Family
- **Primary**: `NVIDIA-EMEA`, with fallbacks: `Arial, Helvetica, sans-serif`
- **Icon Font**: `Font Awesome 6 Pro` (weight 900 for solid icons, 700 for
regular)
- **Icon Sharp**: `Font Awesome 6 Sharp` (weight 300 for light icons, 400 for
regular)
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
| --------------- | ----------- | ---------------- | ------ | -------------- | -------------- | ---------------------------------------- |
| Display Hero | NVIDIA-EMEA | 36px (2.25rem) | 700 | 1.25 (tight) | normal | Maximum impact headlines |
| Section Heading | NVIDIA-EMEA | 24px (1.50rem) | 700 | 1.25 (tight) | normal | Section titles, card headings |
| Sub-heading | NVIDIA-EMEA | 22px (1.38rem) | 400 | 1.75 (relaxed) | normal | Feature descriptions, subtitles |
| Card Title | NVIDIA-EMEA | 20px (1.25rem) | 700 | 1.25 (tight) | normal | Card and module headings |
| Body Large | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.67 (relaxed) | normal | Emphasized body, lead paragraphs |
| Body | NVIDIA-EMEA | 16px (1.00rem) | 400 | 1.50 | normal | Standard reading text |
| Body Bold | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.50 | normal | Strong labels, nav items |
| Body Small | NVIDIA-EMEA | 15px (0.94rem) | 400 | 1.67 (relaxed) | normal | Secondary content, descriptions |
| Body Small Bold | NVIDIA-EMEA | 15px (0.94rem) | 700 | 1.50 | normal | Emphasized secondary content |
| Button Large | NVIDIA-EMEA | 18px (1.13rem) | 700 | 1.25 (tight) | normal | Primary CTA buttons |
| Button | NVIDIA-EMEA | 16px (1.00rem) | 700 | 1.25 (tight) | normal | Standard buttons |
| Button Compact | NVIDIA-EMEA | 14.4px (0.90rem) | 700 | 1.00 (tight) | 0.144px | Small/compact buttons |
| Link | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | Navigation links |
| Link Uppercase | NVIDIA-EMEA | 14px (0.88rem) | 700 | 1.43 | normal | `text-transform: uppercase`, nav labels |
| Caption | NVIDIA-EMEA | 14px (0.88rem) | 600 | 1.50 | normal | Metadata, timestamps |
| Caption Small | NVIDIA-EMEA | 12px (0.75rem) | 400 | 1.25 (tight) | normal | Fine print, legal |
| Micro Label | NVIDIA-EMEA | 10px (0.63rem) | 700 | 1.50 | normal | `text-transform: uppercase`, tiny badges |
| Micro | NVIDIA-EMEA | 11px (0.69rem) | 700 | 1.00 (tight) | normal | Smallest UI text |
### Principles
- **Bold as the default voice**: NVIDIA leans heavily on weight 700 for
headings, buttons, links, and labels. The 400 weight is reserved for body text
and descriptions -- everything else is bold, projecting confidence and
authority.
- **Tight headings, relaxed body**: Heading line-height is consistently 1.25
(tight), while body text relaxes to 1.50-1.67. This contrast creates visual
density at the top of content blocks and comfortable readability in
paragraphs.
- **Uppercase for navigation**: Link labels use `text-transform: uppercase` with
weight 700, creating a navigation voice that reads like hardware specification
labels.
- **No decorative tracking**: Letter-spacing is normal throughout, except for
compact buttons (0.144px). The font itself carries the industrial character
without manipulation.
## 4. Component Stylings
### Buttons
**Primary (Green Border)**
- Background: `transparent`
- Text: `#000000`
- Padding: 11px 13px
- Border: `2px solid #76b900`
- Radius: 2px
- Font: 16px weight 700
- Hover: background `#1eaedb`, text `#ffffff`
- Active: background `#007fff`, text `#ffffff`, border `1px solid #003eff`,
scale(1)
- Focus: background `#1eaedb`, text `#ffffff`, outline `#000000 solid 2px`,
opacity 0.9
- Use: Primary CTA ("Learn More", "Explore Solutions")
**Secondary (Green Border Thin)**
- Background: transparent
- Border: `1px solid #76b900`
- Radius: 2px
- Use: Secondary actions, alternative CTAs
**Compact / Inline**
- Font: 14.4px weight 700
- Letter-spacing: 0.144px
- Line-height: 1.00
- Use: Inline CTAs, compact navigation
### Cards & Containers
- Background: `#ffffff` (light) or `#1a1a1a` (dark sections)
- Border: none (clean edges) or `1px solid #5e5e5e`
- Radius: 2px
- Shadow: `rgba(0, 0, 0, 0.3) 0px 0px 5px 0px` for elevated cards
- Hover: shadow intensification
- Padding: 16-24px internal
### Links
- **On Dark Background**: `#ffffff`, no underline, hover shifts to `#3860be`
- **On Light Background**: `#000000` or `#1a1a1a`, underline
`2px solid #76b900`, hover shifts to `#3860be`, underline removed
- **Green Links**: `#76b900`, hover shifts to `#3860be`
- **Muted Links**: `#666666`, hover shifts to `#3860be`
### Navigation
- Dark black background (`#000000`)
- Logo left-aligned, prominent NVIDIA wordmark
- Links: NVIDIA-EMEA 14px weight 700 uppercase, `#ffffff`
- Hover: color shift, no underline change
- Mega-menu dropdowns for product categories
- Sticky on scroll with backdrop
### Image Treatment
- Product/GPU renders as hero images, often full-width
- Screenshot images with subtle shadow for depth
- Green gradient overlays on dark hero sections
- Circular avatar containers with 50% radius
### Distinctive Components
**Product Cards**
- Clean white or dark card with minimal radius (2px)
- Green accent border or underline on title
- Bold heading + lighter description pattern
- CTA with green border at bottom
**Tech Spec Tables**
- Industrial grid layouts
- Alternating row backgrounds (subtle gray shift)
- Bold labels, regular values
- Green highlights for key metrics
**Cookie/Consent Banner**
- Fixed bottom positioning
- Rounded buttons (2px radius)
- Gray border treatments
## 5. Layout Principles
### Spacing System
- Base unit: 8px
- Scale: 1px, 2px, 3px, 4px, 5px, 6px, 7px, 8px, 9px, 10px, 11px, 12px, 13px,
15px
- Primary padding values: 8px, 11px, 13px, 16px, 24px, 32px
- Section spacing: 48-80px vertical padding
### Grid & Container
- Max content width: approximately 1200px (contained)
- Full-width hero sections with contained text
- Feature sections: 2-3 column grids for product cards
- Single-column for article/blog content
- Sidebar layouts for documentation
### Whitespace Philosophy
- **Purposeful density**: NVIDIA uses tighter spacing than typical SaaS sites,
reflecting the density of technical content. White space exists to separate
concepts, not to create luxury emptiness.
- **Section rhythm**: Dark sections alternate with white sections, using
background color (not just spacing) to separate content blocks.
- **Card density**: Product cards sit close together with 16-20px gaps, creating
a catalog feel rather than a gallery feel.
### Border Radius Scale
- Micro (1px): Inline spans, tiny elements
- Standard (2px): Buttons, cards, containers, inputs -- the default for nearly
everything
- Circle (50%): Avatar images, circular tab indicators
## 6. Depth & Elevation
| Level | Treatment | Use |
| ---------------------- | --------------------------------- | ------------------------------------- |
| Flat (Level 0) | No shadow | Page backgrounds, inline text |
| Subtle (Level 1) | `rgba(0,0,0,0.3) 0px 0px 5px 0px` | Standard cards, modals |
| Border (Level 1b) | `1px solid #5e5e5e` | Content dividers, section borders |
| Green accent (Level 2) | `2px solid #76b900` | Active elements, CTAs, selected items |
| Focus (Accessibility) | `2px solid #000000` outline | Keyboard focus ring |
**Shadow Philosophy**: NVIDIA's depth system is minimal and utilitarian. There
is essentially one shadow value -- a 5px ambient blur at 30% opacity -- used
sparingly for cards and modals. The primary depth signal is not shadow but
_color contrast_: black backgrounds next to white sections, green borders on
black surfaces. This creates hardware-like visual layering where depth comes
from material difference, not simulated light.
### Decorative Depth
- Green gradient washes behind hero content
- Dark-to-darker gradients (black to near-black) for section transitions
- No glassmorphism or blur effects -- clarity over atmosphere
## 7. Responsive Behavior
### Breakpoints
| Name | Width | Key Changes |
| ------------- | ----------- | --------------------------------------- |
| Mobile Small | <375px | Compact single column, reduced padding |
| Mobile | 375-425px | Standard mobile layout |
| Mobile Large | 425-600px | Wider mobile, some 2-col hints |
| Tablet Small | 600-768px | 2-column grids begin |
| Tablet | 768-1024px | Full card grids, expanded nav |
| Desktop | 1024-1350px | Standard desktop layout |
| Large Desktop | >1350px | Maximum content width, generous margins |
### Touch Targets
- Buttons use 11px 13px padding for comfortable tap targets
- Navigation links at 14px uppercase with adequate spacing
- Green-bordered buttons provide high-contrast touch targets on dark backgrounds
- Mobile: hamburger menu collapse with full-screen overlay
### Collapsing Strategy
- Hero: 36px heading scales down proportionally
- Navigation: full horizontal nav collapses to hamburger menu at ~1024px
- Product cards: 3-column to 2-column to single column stacked
- Footer: multi-column grid collapses to single stacked column
- Section spacing: 64-80px reduces to 32-48px on mobile
- Images: maintain aspect ratio, scale to container width
### Image Behavior
- GPU/product renders maintain high resolution at all sizes
- Hero images scale proportionally with viewport
- Card images use consistent aspect ratios
- Full-bleed dark sections maintain edge-to-edge treatment
## 8. Responsive Behavior (Extended)
### Typography Scaling
- Display 36px scales to ~24px on mobile
- Section headings 24px scale to ~20px on mobile
- Body text maintains 15-16px across all breakpoints
- Button text maintains 16px for consistent tap targets
### Dark/Light Section Strategy
- Dark sections (black bg, white text) alternate with light sections (white bg,
black text)
- The green accent remains consistent across both surface types
- On dark: links are white, underlines are green
- On light: links are black, underlines are green
- This alternation creates natural scroll rhythm and content grouping
## 9. Agent Prompt Guide
### Quick Color Reference
- Primary accent: NVIDIA Green (`#76b900`)
- Background dark: True Black (`#000000`)
- Background light: Pure White (`#ffffff`)
- Heading text (dark bg): White (`#ffffff`)
- Heading text (light bg): Black (`#000000`)
- Body text (light bg): Black (`#000000`) or Near Black (`#1a1a1a`)
- Body text (dark bg): White (`#ffffff`) or Gray 300 (`#a7a7a7`)
- Link hover: Blue (`#3860be`)
- Border accent: `2px solid #76b900`
- Button hover: Teal (`#1eaedb`)
### Example Component Prompts
- "Create a hero section on black background. Headline at 36px NVIDIA-EMEA
weight 700, line-height 1.25, color #ffffff. Subtitle at 18px weight 400,
line-height 1.67, color #a7a7a7. CTA button with transparent background, 2px
solid #76b900 border, 2px radius, 11px 13px padding, text #ffffff. Hover:
background #1eaedb, text white."
- "Design a product card: white background, 2px border-radius, box-shadow
rgba(0,0,0,0.3) 0px 0px 5px. Title at 20px NVIDIA-EMEA weight 700, line-height
1.25, color #000000. Body at 15px weight 400, line-height 1.67, color #757575.
Green underline accent on title: border-bottom 2px solid #76b900."
- "Build a navigation bar: #000000 background, sticky top. NVIDIA logo
left-aligned. Links at 14px NVIDIA-EMEA weight 700 uppercase, color #ffffff.
Hover: color #3860be. Green-bordered CTA button right-aligned."
- "Create a dark feature section: #000000 background. Section label at 14px
weight 700 uppercase, color #76b900. Heading at 24px weight 700, color
#ffffff. Description at 16px weight 400, color #a7a7a7. Three product cards in
a row with 20px gap."
- "Design a footer: #000000 background. Multi-column layout with link groups.
Links at 14px weight 400, color #a7a7a7. Hover: color #76b900. Bottom bar with
legal text at 12px, color #757575."
### Iteration Guide
1. Always use `#76b900` as accent, never as a background fill -- it's a signal
color for borders, underlines, and highlights
2. Buttons are transparent with green borders by default -- filled backgrounds
appear only on hover/active states
3. Weight 700 is the dominant voice for all interactive and heading elements;
400 is only for body paragraphs
4. Border radius is 2px for everything -- this sharp, minimal rounding is core
to the industrial aesthetic
5. Dark sections use white text; light sections use black text -- green accent
works identically on both
6. Link hover is always `#3860be` (blue) regardless of the link's default color
7. Line-height 1.25 for headings, 1.50-1.67 for body text -- maintain this
contrast for visual hierarchy
8. Navigation uses uppercase 14px bold -- this hardware-label typography is part
of the brand voice